| <!DOCTYPE HTML> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-propertydescriptor-initialvalue" /> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| #target { |
| background: var(--inherited-color); |
| color: var(--non-inherited-color); |
| } |
| </style> |
| <div id=target></div> |
| <script> |
| CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: 'calc(10px + 15px)'}); |
| CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)'}); |
| CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true}); |
| CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple'}); |
| CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))'}); |
| CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))'}); |
| |
| test(function() { |
| computedStyle = getComputedStyle(target); |
| assert_equals(computedStyle.getPropertyValue('--length'), '25px'); |
| assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)'); |
| assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink'); |
| assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple'); |
| assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)'); |
| assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)'); |
| |
| assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)'); |
| assert_equals(computedStyle.color, 'rgb(128, 0, 128)'); |
| }, "Initial values of registered properties can be referenced when no custom properties are explicitly set."); |
| </script> |
