property-cascade.html (1780B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" /> 3 <meta name="assert" content="Verifies that registering a property does not affect the cascade" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 9 #outer { color: rgb(1, 1, 1); } 10 #inner { 11 --my-color: rgb(2, 2, 2); 12 --my-color: url(not-a-color); 13 color: var(--my-color); 14 } 15 16 </style> 17 18 <div id=outer> 19 <div id=inner></div> 20 </div> 21 22 <script> 23 24 test(function(){ 25 // Because var(--my-color) is invalid, our color declaration should behave 26 // like color:unset, i.e. it should compute to the inherited color. 27 assert_equals(getComputedStyle(inner).color, 'rgb(1, 1, 1)'); 28 29 CSS.registerProperty({ 30 name: '--my-color', 31 syntax: '<color>', 32 initialValue: 'rgb(3, 3, 3)', 33 inherits: false 34 }); 35 36 // After registering, var(--my-color) is still invalid. The important thing 37 // here is that the computed value of color is the initialValue of 38 // --my-color, and not rgb(2, 2, 2). 39 assert_equals(getComputedStyle(inner).color, 'rgb(3, 3, 3)'); 40 }, 'Registering a property does not affect cascade'); 41 42 test(function(){ 43 CSS.registerProperty({ 44 name: '--my-color-2', 45 syntax: '<color>', 46 initialValue: 'rgb(4, 4, 4)', 47 inherits: false 48 }); 49 50 let element = document.createElement('div'); 51 element.style = ` 52 --my-color-2: rgb(2, 2, 2); 53 --my-color-2: url(not-a-color); 54 color: var(--my-color-2); 55 `; 56 57 outer.appendChild(element); 58 59 assert_equals(getComputedStyle(element).color, 'rgb(4, 4, 4)'); 60 }, 'Registering a property does not affect parsing'); 61 62 63 </script>