Merge pull request #256 from LeaVerou/css-mixins-1

Added CSS Mixins 1

tests.js

@@ -56,6 +56,7 @@ import cssLinkParams1 from './tests/css-link-params-1.js';
 import cssLists3 from './tests/css-lists-3.js';
 import cssLogical1 from './tests/css-logical-1.js';
 import cssMasking1 from './tests/css-masking-1.js';
+import cssMixins1 from './tests/css-mixins-1.js';
 import cssMulticol1 from './tests/css-multicol-1.js';
 import cssMulticol2 from './tests/css-multicol-2.js';
 import cssNamespaces3 from './tests/css-namespaces-3.js';
@@ -223,6 +224,7 @@ export default {
 	'css-lists-3': cssLists3,
 	'css-logical-1': cssLogical1,
 	'css-masking-1': cssMasking1,
+	'css-mixins-1': cssMixins1,
 	'css-multicol-1': cssMulticol1,
 	'css-multicol-2': cssMulticol2,
 	'css-namespaces-3': cssNamespaces3,

tests/css-mixins-1.js

@@ -0,0 +1,38 @@
+export default {
+	title: 'CSS Functions and Mixins Module',
+	links: {
+		tr: 'css-mixins-1',
+		dev: 'css-mixins-1',
+	},
+	status: {
+		stability: 'experimental',
+	},
+	'@rules': {
+		'@function': {
+			links: {
+				dev: '#defining-custom-functions',
+			},
+			tests: [
+				'@function --negative (--value) {\n  result: calc(-1 * var(--value));\n}',
+				'@function --negative-length (--value) returns <length> {\n  result: calc(-1 * var(--value));\n}',
+				'@function --negative-length (--value <length>) returns <length> {\n  result: calc(-1 * var(--value));\n}',
+				'@function --negative-number-or-percentage(--value type(<number> | <percentage>)) {\n  result: calc(-1 * var(--value));\n}',
+				'@function --circle-area (--r) {\n  result: calc(3.1415 * var(--r2));\n  --r2: calc(var(--r) * var(--r));\n}',
+				'@function --multiply (--value) using (--used) {\n  result: calc(var(--used) * var(--value));\n}',
+				'@function --multiply-length (--value) using (--used <length>) {\n  result: calc(var(--used) * var(--value));\n}',
+				'@function --multiply-length (--value) using (--used <length>: 1em) {\n  result: calc(var(--used) * var(--value));\n}',
+				'@function --suitable-font-size() {\n  result: 16px;\n  @media (width > 1000px) {\n    result: 20px;\n  }\n}',
+			],
+		},
+	},
+	interfaces: {
+		CSSFunctionRule: {
+			links: {
+				dev: '#cssfunctionrule',
+				mdnGroup: 'DOM',
+			},
+			tests: ['cssRules', 'insertRule', 'deleteRule'],
+			required: 'div { }',
+		},
+	},
+};