| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#css-style-value-reification"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/utils.js"></script> |
| <div id=div></div> |
| <script> |
| |
| test(() => { |
| let name = generate_name(); |
| with_style_node(`div { ${name}: 100px; }`, () => { |
| // Before registering the property, ${name} should reify as a |
| // a token sequence. |
| assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue'); |
| assert_equals(div.computedStyleMap().get(name).toString(), ' 100px'); |
| |
| with_at_property({ |
| name: name, |
| syntax: '"<length>"', |
| inherits: false, |
| initialValue: '0px' |
| }, () => { |
| // After registering, it should reify as a <length>. |
| assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue'); |
| assert_equals(div.computedStyleMap().get(name).value, 100); |
| assert_equals(div.computedStyleMap().get(name).unit, 'px'); |
| }); |
| |
| // After @property is removed, the computed value is once again a token |
| // sequence. |
| assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue'); |
| assert_equals(div.computedStyleMap().get(name).toString(), ' 100px'); |
| }); |
| }, 'Properties declared with @property reify correctly'); |
| |
| test(() => { |
| let name = generate_name(); |
| // 0 is valid as a both <length> and <integer>, which reify differently. |
| with_style_node(`div { ${name}: 0; }`, () => { |
| with_at_property({ |
| name: name, |
| syntax: '"<length>"', |
| inherits: false, |
| initialValue: '1000px' |
| }, () => { |
| assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue'); |
| assert_equals(div.computedStyleMap().get(name).value, 0); |
| assert_equals(div.computedStyleMap().get(name).unit, 'px'); |
| |
| with_at_property({ |
| name: name, |
| syntax: '"<integer>"', |
| inherits: false, |
| initialValue: '1000' |
| }, () => { |
| assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue'); |
| assert_equals(div.computedStyleMap().get(name).value, 0); |
| assert_equals(div.computedStyleMap().get(name).unit, 'number'); |
| }); |
| }); |
| }); |
| }, 'Re-declaring a property with a different type affects reification'); |
| |
| </script> |