| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #div1 { |
| --length: 5px; |
| --color: notacolor; |
| } |
| #div2 { |
| --color: pink; |
| } |
| </style> |
| |
| <div id=div1></div> |
| <div id=div2></div> |
| <div id=div3></div> |
| |
| <script> |
| test(function() { |
| var reregisterError = {name: 'InvalidModificationError'}; |
| var unregisterError = {name: 'NotFoundError'}; |
| CSS.registerProperty({name: '--property'}); |
| assert_throws(reregisterError, () => CSS.registerProperty({name: '--property'})); |
| assert_throws(unregisterError, () => CSS.unregisterProperty({name: '--property2'})); |
| |
| CSS.registerProperty({name: '--property2', syntax: '<length>', initialValue: '5px'}); |
| assert_throws(reregisterError, () => CSS.registerProperty({name: '--property2'})); |
| assert_throws(reregisterError, () => CSS.registerProperty({name: '--property'})); |
| |
| CSS.unregisterProperty('--property'); |
| assert_throws(unregisterError, () => CSS.unregisterProperty({name: '--property'})); |
| assert_throws(reregisterError, () => CSS.registerProperty({name: '--property2'})); |
| CSS.registerProperty({name: '--property'}); |
| assert_throws(reregisterError, () => CSS.registerProperty({name: '--property'})); |
| |
| CSS.unregisterProperty('--property2'); |
| assert_throws(unregisterError, () => CSS.unregisterProperty({name: '--property2'})); |
| }, "Registration state is correctly managed and correct errors are thrown"); |
| |
| test(function() { |
| computedStyle1 = getComputedStyle(div1); |
| computedStyle2 = getComputedStyle(div2); |
| assert_equals(computedStyle1.getPropertyValue('--length'), ' 5px'); |
| assert_equals(computedStyle1.getPropertyValue('--color'), ' notacolor'); |
| assert_equals(computedStyle2.getPropertyValue('--length'), ''); |
| assert_equals(computedStyle2.getPropertyValue('--color'), ' pink'); |
| |
| CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '10px'}); |
| CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'red'}); |
| assert_equals(computedStyle1.getPropertyValue('--length'), '5px'); |
| assert_equals(computedStyle1.getPropertyValue('--color'), 'red'); |
| assert_equals(computedStyle2.getPropertyValue('--length'), '10px'); |
| assert_equals(computedStyle2.getPropertyValue('--color'), 'pink'); |
| |
| CSS.unregisterProperty('--length'); |
| CSS.unregisterProperty('--color'); |
| assert_equals(computedStyle1.getPropertyValue('--length'), ' 5px'); |
| assert_equals(computedStyle1.getPropertyValue('--color'), ' notacolor'); |
| assert_equals(computedStyle2.getPropertyValue('--length'), ''); |
| assert_equals(computedStyle2.getPropertyValue('--color'), ' pink'); |
| }, "Unregistration correctly updates computed style"); |
| |
| test(function() { |
| computedStyle = getComputedStyle(div3); |
| assert_equals(computedStyle.getPropertyValue('--x'), ''); |
| |
| CSS.registerProperty({name: '--x', syntax: '<length>', initialValue: '10px'}); |
| assert_equals(computedStyle.getPropertyValue('--x'), '10px'); |
| |
| CSS.unregisterProperty('--x'); |
| assert_equals(computedStyle.getPropertyValue('--x'), ''); |
| |
| CSS.registerProperty({name: '--x', syntax: '<color>', initialValue: 'purple'}); |
| div3.style.setProperty('--x', '5px'); |
| assert_equals(computedStyle.getPropertyValue('--x'), 'purple'); |
| }, "Property can be re-registered with different type"); |
| </script> |
