diff --git a/tests.js b/tests.js index 0cf93db..1b98d57 100644 --- a/tests.js +++ b/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, diff --git a/tests/css-mixins-1.js b/tests/css-mixins-1.js new file mode 100644 index 0000000..f1664fa --- /dev/null +++ b/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 {\n result: calc(-1 * var(--value));\n}', + '@function --negative-length (--value ) returns {\n result: calc(-1 * var(--value));\n}', + '@function --negative-number-or-percentage(--value type( | )) {\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 ) {\n result: calc(var(--used) * var(--value));\n}', + '@function --multiply-length (--value) using (--used : 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 { }', + }, + }, +};