| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/utils.js"></script> |
| <div id="outer"> |
| <div id="target"></div> |
| </div> |
| <script> |
| |
| // Parsing: |
| |
| let uppercase_first = (x) => x.charAt(0).toUpperCase() + x.slice(1); |
| let to_camel_case = (x) => x.split('-')[0] + x.split('-').slice(1).map(uppercase_first).join(''); |
| |
| function get_cssom_descriptor_value(rule, descriptor) { |
| switch (descriptor) { |
| case 'syntax': |
| return rule.syntax; |
| case 'inherits': |
| return rule.inherits; |
| case 'initial-value': |
| return rule.initialValue; |
| default: |
| assert_true(false, 'Should not reach here'); |
| return null; |
| } |
| } |
| |
| // Test that for the given descriptor (e.g. 'syntax'), the specified value |
| // will yield the expected_value when observed using CSSOM. If the expected_value |
| // is omitted, it is the same as the specified value. |
| function test_descriptor(descriptor, specified_value, expected_value) { |
| let camel = to_camel_case(descriptor); |
| if (typeof(expected_value) === 'undefined') |
| expected_value = specified_value; |
| test_with_at_property({ [camel]: specified_value }, (name, rule) => { |
| assert_equals(get_cssom_descriptor_value(rule, descriptor), expected_value); |
| }, `Attribute '${descriptor}' returns expected value for [${specified_value}]`); |
| } |
| |
| // syntax |
| test_descriptor('syntax', '"<color>"', '<color>'); |
| test_descriptor('syntax', '"<color> | none"', '<color> | none'); |
| test_descriptor('syntax', '"<color># | <image> | none"', '<color># | <image> | none'); |
| test_descriptor('syntax', '"foo | bar | baz"', 'foo | bar | baz'); |
| test_descriptor('syntax', '"*"', '*'); |
| test_descriptor('syntax', '"notasyntax"', 'notasyntax'); |
| |
| test_descriptor('syntax', 'red', ''); |
| test_descriptor('syntax', 'rgb(255, 0, 0)', ''); |
| test_descriptor('syntax', '<color>', ''); |
| test_descriptor('syntax', 'foo | bar', ''); |
| |
| // initial-value |
| test_descriptor('initial-value', '10px'); |
| test_descriptor('initial-value', 'rgb(1, 2, 3)'); |
| test_descriptor('initial-value', 'red'); |
| test_descriptor('initial-value', 'foo'); |
| test_descriptor('initial-value', 'if(){}'); |
| test_descriptor('initial-value', 'var(--x)'); |
| |
| // inherits |
| test_descriptor('inherits', 'true', true); |
| test_descriptor('inherits', 'false', false); |
| |
| test_descriptor('inherits', 'none', false); |
| test_descriptor('inherits', '0', false); |
| test_descriptor('inherits', '1', false); |
| test_descriptor('inherits', '"true"', false); |
| test_descriptor('inherits', '"false"', false); |
| test_descriptor('inherits', 'calc(0)', false); |
| |
| test_with_style_node('@property foo { }', (node) => { |
| assert_equals(node.sheet.rules.length, 0); |
| }, 'Invalid property name does not parse [foo]'); |
| |
| test_with_style_node('@property -foo { }', (node) => { |
| assert_equals(node.sheet.rules.length, 0); |
| }, 'Invalid property name does not parse [-foo]'); |
| |
| // Applying @property rules |
| |
| function test_applied(syntax, initial, inherits, expected) { |
| test_with_at_property({ |
| syntax: `"${syntax}"`, |
| initialValue: initial, |
| inherits: inherits |
| }, (name, rule) => { |
| let actual = getComputedStyle(target).getPropertyValue(name); |
| assert_equals(actual, expected); |
| }, `Rule applied [${syntax}, ${initial}, ${inherits}]`); |
| } |
| |
| function test_not_applied(syntax, initial, inherits) { |
| test_with_at_property({ |
| syntax: `"${syntax}"`, |
| initialValue: initial, |
| inherits: inherits |
| }, (name, rule) => { |
| let actual = getComputedStyle(target).getPropertyValue(name); |
| assert_equals(actual, ''); |
| }, `Rule not applied [${syntax}, ${initial}, ${inherits}]`); |
| } |
| |
| // syntax, initialValue, inherits, expected |
| test_applied('*', 'if(){}', false, 'if(){}'); |
| test_applied('<angle>', '42deg', false, '42deg'); |
| test_applied('<angle>', '1turn', false, '360deg'); |
| test_applied('<color>', 'green', false, 'rgb(0, 128, 0)'); |
| test_applied('<color>', 'rgb(1, 2, 3)', false, 'rgb(1, 2, 3)'); |
| test_applied('<image>', 'url("http://a/")', false, 'url("http://a/")'); |
| test_applied('<integer>', '5', false, '5'); |
| test_applied('<length-percentage>', '10px', false, '10px'); |
| test_applied('<length-percentage>', '10%', false, '10%'); |
| test_applied('<length-percentage>', 'calc(10% + 10px)', false, 'calc(10% + 10px)'); |
| test_applied('<length>', '10px', false, '10px'); |
| test_applied('<number>', '2.5', false, '2.5'); |
| test_applied('<percentage>', '10%', false, '10%'); |
| test_applied('<resolution>', '50dppx', false, '50dppx'); |
| test_applied('<resolution>', '96dpi', false, '1dppx'); |
| test_applied('<time>', '10s', false, '10s'); |
| test_applied('<time>', '1000ms', false, '1s'); |
| test_applied('<transform-function>', 'rotateX(0deg)', false, 'rotateX(0deg)'); |
| test_applied('<transform-list>', 'rotateX(0deg)', false, 'rotateX(0deg)'); |
| test_applied('<transform-list>', 'rotateX(0deg) translateX(10px)', false, 'rotateX(0deg) translateX(10px)'); |
| test_applied('<url>', 'url("http://a/")', false, 'url("http://a/")'); |
| |
| // inherits: true/false |
| test_applied('<color>', 'tomato', false, 'rgb(255, 99, 71)'); |
| test_applied('<color>', 'tomato', true, 'rgb(255, 99, 71)'); |
| |
| test_with_at_property({ syntax: '"*"', inherits: true }, (name, rule) => { |
| try { |
| outer.style.setProperty(name, 'foo'); |
| let actual = getComputedStyle(target).getPropertyValue(name); |
| assert_equals(actual, 'foo'); |
| } finally { |
| outer.style = ''; |
| } |
| }, 'Rule applied for "*", even with no initial value'); |
| |
| test_not_applied(undefined, 'green', false); |
| test_not_applied('<color>', undefined, false); |
| test_not_applied('<color>', 'green', undefined); |
| test_not_applied('<gandalf>', 'grey', false); |
| test_not_applied('gandalf', 'grey', false); |
| test_not_applied('<color>', 'notacolor', false); |
| test_not_applied('<length>', '10em', false); |
| |
| // Inheritance |
| |
| test_with_at_property({ |
| syntax: '"<length>"', |
| inherits: false, |
| initialValue: '0px' |
| }, (name, rule) => { |
| try { |
| outer.style = `${name}: 40px`; |
| assert_equals(getComputedStyle(outer).getPropertyValue(name), '40px'); |
| assert_equals(getComputedStyle(target).getPropertyValue(name), '0px'); |
| } finally { |
| outer.style = ''; |
| } |
| }, 'Non-inherited properties do not inherit'); |
| |
| test_with_at_property({ |
| syntax: '"<length>"', |
| inherits: true, |
| initialValue: '0px' |
| }, (name, rule) => { |
| try { |
| outer.style = `${name}: 40px`; |
| assert_equals(getComputedStyle(outer).getPropertyValue(name), '40px'); |
| assert_equals(getComputedStyle(target).getPropertyValue(name), '40px'); |
| } finally { |
| outer.style = ''; |
| } |
| }, 'Inherited properties inherit'); |
| |
| // Initial values |
| |
| test_with_at_property({ |
| syntax: '"<color>"', |
| inherits: true, |
| initialValue: 'green' |
| }, (name, rule) => { |
| try { |
| target.style = `--x:var(${name})`; |
| assert_equals(getComputedStyle(target).getPropertyValue(name), 'rgb(0, 128, 0)'); |
| } finally { |
| target.style = ''; |
| } |
| }, 'Initial values substituted as computed value'); |
| |
| test_with_at_property({ |
| syntax: '"<length>"', |
| inherits: false, |
| initialValue: undefined |
| }, (name, rule) => { |
| try { |
| target.style = `${name}: calc(1px + 1px);`; |
| assert_equals(getComputedStyle(target).getPropertyValue(name), ' calc(1px + 1px)'); |
| } finally { |
| target.style = ''; |
| } |
| }, 'Non-universal registration are invalid without an initial value'); |
| |
| test_with_at_property({ |
| syntax: '"*"', |
| inherits: false, |
| initialValue: undefined |
| }, (name, rule) => { |
| try { |
| // If the registration suceeded, ${name} does *not* inherit, and hence |
| // the computed value on 'target' should be empty. |
| outer.style = `${name}: calc(1px + 1px);`; |
| assert_equals(getComputedStyle(target).getPropertyValue(name), ''); |
| } finally { |
| outer.style = ''; |
| } |
| }, 'Initial value may be omitted for universal registration'); |
| |
| </script> |
