| <!DOCTYPE html> |
| <title>CSS Custom Functions: CSSOM</title> |
| <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#cssom"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <script> |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() {} |
| `); |
| assert_equals(sheet.cssRules.length, 1); |
| let functionRule = sheet.cssRules[0]; |
| assert_true(functionRule instanceof CSSFunctionRule); |
| assert_equals(functionRule.cssRules.length, 0); |
| }, 'Empty CSSFunctionRule'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| result: 100px; |
| } |
| `); |
| assert_equals(sheet.cssRules.length, 1); |
| let functionRule = sheet.cssRules[0]; |
| assert_true(functionRule instanceof CSSFunctionRule); |
| assert_equals(functionRule.cssRules.length, 1); |
| let declarationsRule = functionRule.cssRules[0]; |
| assert_true(declarationsRule instanceof CSSFunctionDeclarations); |
| let descriptors = declarationsRule.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| }, 'Single CSSFunctionDeclarations'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| result: 100px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.result, '100px'); |
| }, 'CSSFunctionDescriptors (result)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| result: 100px; |
| result: 101px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.result, '101px'); |
| }, 'CSSFunctionDescriptors (result, repeated)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| --y: 2px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.getPropertyValue('--x'), '1px'); |
| assert_equals(descriptors.getPropertyValue('--y'), '2px'); |
| assert_equals(descriptors.getPropertyValue('--unknown'), ''); |
| assert_equals(descriptors.result, ''); |
| }, 'CSSFunctionDescriptors (local variables)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| --y: 2px; |
| --x: 3px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.getPropertyValue('--x'), '3px'); |
| assert_equals(descriptors.getPropertyValue('--y'), '2px'); |
| assert_equals(descriptors.getPropertyValue('--unknown'), ''); |
| assert_equals(descriptors.result, ''); |
| }, 'CSSFunctionDescriptors (local variables, repeated)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| --y: 2px; |
| result: 3px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.getPropertyValue('--x'), '1px'); |
| assert_equals(descriptors.getPropertyValue('--y'), '2px'); |
| assert_equals(descriptors.getPropertyValue('--unknown'), ''); |
| assert_equals(descriptors.result, '3px'); |
| }, 'CSSFunctionDescriptors (local variables and result)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| --y: 2px; |
| result: 3px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.cssText, '--x: 1px; --y: 2px; result: 3px;'); |
| }, 'CSSFunctionDescriptors serialization'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| syntax: "<length>"; |
| --y: 2px; |
| color: red; |
| unknown: unknown; |
| result: 3px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.length, 3); |
| assert_equals(descriptors.cssText, '--x: 1px; --y: 2px; result: 3px;'); |
| }, 'Unknown descriptors'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.length, 1); |
| descriptors.cssText = '--x: 1px; color: red; result: 3px; --y: 2px;'; |
| assert_equals(descriptors.length, 3); |
| assert_equals(descriptors.cssText, '--x: 1px; result: 3px; --y: 2px;'); |
| }, 'Unknown descriptors (mutation)'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| result: 2px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.length, 2); |
| assert_equals(descriptors.item(0), '--x'); |
| assert_equals(descriptors.item(1), 'result'); |
| }, 'item()'); |
| |
| // https://webidl.spec.whatwg.org/#dfn-indexed-property-getter |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| --x: 1px; |
| result: 2px; |
| } |
| `); |
| let descriptors = sheet.cssRules[0]?.cssRules[0]?.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_array_equals(Array.from(descriptors), ['--x', 'result']);; |
| }, 'Indexed property getter'); |
| |
| // Conditional rules |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() { |
| @supports (width: 100px) { |
| result: 100px; |
| } |
| result: 200px; |
| } |
| `); |
| assert_equals(sheet.cssRules.length, 1); |
| let functionRule = sheet.cssRules[0]; |
| assert_true(functionRule instanceof CSSFunctionRule); |
| assert_equals(functionRule.cssRules.length, 2); |
| let supportsRule = functionRule.cssRules[0]; |
| assert_true(supportsRule instanceof CSSSupportsRule); |
| assert_true(supportsRule.cssRules[0] instanceof CSSFunctionDeclarations); |
| assert_equals(supportsRule.cssRules[0].style?.result, '100px'); |
| |
| let declarationsRule = functionRule.cssRules[1]; |
| assert_true(declarationsRule instanceof CSSFunctionDeclarations); |
| let descriptors = declarationsRule.style; |
| assert_true(descriptors instanceof CSSFunctionDescriptors); |
| assert_equals(descriptors.result, '200px'); |
| }, '@supports in body'); |
| |
| // CSSFunctionRule |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --foo() {} |
| `); |
| assert_equals(sheet.cssRules.length, 1); |
| let functionRule = sheet.cssRules[0]; |
| assert_true(functionRule instanceof CSSFunctionRule); |
| assert_equals(functionRule.name, '--foo'); |
| }, 'CSSFunctionRule.name'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --f0() {} |
| @function --f1(--x) {} |
| @function --f2(--x <length>) {} |
| @function --f3(--x: 10px) {} |
| @function --f4(--x <length>: 10px) {} |
| @function --f5(--x type(<length> | auto): 10px, --y, --z: red) {} |
| `); |
| assert_equals(sheet.cssRules.length, 6); |
| assert_object_equals(sheet.cssRules[0].getParameters(), []); |
| assert_object_equals(sheet.cssRules[1].getParameters(), [ |
| {name: '--x', type: '*'}, |
| ]); |
| assert_object_equals(sheet.cssRules[2].getParameters(), [ |
| {name: '--x', type: '<length>'}, |
| ]); |
| assert_object_equals(sheet.cssRules[3].getParameters(), [ |
| {name: '--x', type: '*', defaultValue: '10px'}, |
| ]); |
| assert_object_equals(sheet.cssRules[4].getParameters(), [ |
| {name: '--x', type: '<length>', defaultValue: '10px'}, |
| ]); |
| assert_object_equals(sheet.cssRules[5].getParameters(), [ |
| {name: '--x', type: '<length> | auto', defaultValue: '10px'}, |
| {name: '--y', type: '*'}, |
| {name: '--z', type: '*', defaultValue: 'red'}, |
| ], '--f5'); |
| }, 'CSSFunctionRule.getParameters()'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(` |
| @function --f0() {} |
| @function --f1() returns <length> {} |
| @function --f2() returns <length>+ {} |
| @function --f3() returns type(*) {} |
| @function --f4() returns type(<length> | auto) {} |
| `); |
| assert_equals(sheet.cssRules.length, 5); |
| assert_equals(sheet.cssRules[0]?.returnType, '*'); |
| assert_equals(sheet.cssRules[1]?.returnType, '<length>'); |
| assert_equals(sheet.cssRules[2]?.returnType, '<length>+'); |
| assert_equals(sheet.cssRules[3]?.returnType, '*'); |
| assert_equals(sheet.cssRules[4]?.returnType, '<length> | auto'); |
| }, 'CSSFunctionRule.returnType'); |
| |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| // U+0009 CHARACTER TABULATION |
| sheet.replaceSync(`@function --escaped-\\9 -tab(--param-\\9 -tab) { --local-\\9 -tab: 1px; }`); |
| assert_equals(sheet.cssRules.length, 1); |
| let rule = sheet.cssRules[0]; |
| assert_equals(rule.name, '--escaped-\t-tab'); |
| assert_equals(rule.getParameters()[0]?.name, '--param-\t-tab'); |
| assert_equals(rule.cssRules[0].style.getPropertyValue('--local-\t-tab'), '1px'); |
| }, 'CSSFunctionRule escapes'); |
| |
| function test_cssText(actual, expected) { |
| expected ??= actual; |
| let name = actual.match(/@function (--[-\w]+)/)[1]; |
| test(t => { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync(actual); |
| assert_equals(sheet.cssRules[0]?.cssText, expected); |
| }, `CSSFunctionRule.cssText (${name})`); |
| } |
| |
| // The function name is used by the test description; please make sure it's |
| // unique among all test_cssText cases. |
| test_cssText(`@function --empty() { }`); |
| |
| test_cssText(`@function --ret-length() returns <length> { }`); |
| test_cssText(`@function --ret-length-auto() returns type(<length> | auto) { }`); |
| |
| test_cssText(`@function --param-single(--x) { }`); |
| test_cssText(`@function --param-typed(--x <length>) { }`); |
| test_cssText(`@function --param-typed-default(--x <length>: 10px) { }`); |
| test_cssText(`@function --param-default(--x: 10px) { }`); |
| test_cssText(`@function --param-multi(--x, --y) { }`); |
| test_cssText(`@function --param-multi-mixed(--x: 10px, --y, --z <length>) { }`); |
| |
| test_cssText(`@function --body-result() { result: 10px; }`); |
| test_cssText(`@function --body-locals() { --x: 1px; --y: 2px; result: 10px; }`); |
| |
| // Cases that don't round-trip as-is: |
| test_cssText(`@function --param-type-fn(--x type(<length>)) { }`, |
| `@function --param-type-fn(--x <length>) { }`); |
| test_cssText(`@function --param-type-fn-uni(--x type(*)) { }`, |
| `@function --param-type-fn-uni(--x) { }`); |
| test_cssText(`@function --ret-type-fn() returns type(*) { }`, |
| `@function --ret-type-fn() { }`); |
| test_cssText(`@function --ret-type-fn-uni() returns type(*) { }`, |
| `@function --ret-type-fn-uni() { }`); |
| test_cssText(`@function --body-result-multi() { result: 10px; result: 20px; }`, |
| `@function --body-result-multi() { result: 20px; }`); |
| |
| // Escapes (U+0009 CHARACTER TABULATION): |
| test_cssText(`@function --escaped-\\9 -tab(--param-\\9 -tab) { --local-\\9 -tab: 1px; }`); |
| </script> |
