at-property-shadow.html (1336B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#shadow-dom"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/utils.js"></script> 6 <style> 7 @property --x { 8 syntax: "<length>"; 9 inherits: false; 10 initial-value: 0px; 11 } 12 #outside { 13 --x: calc(1px + 1px); 14 --y: calc(1px + 1px); 15 } 16 </style> 17 <template id=template> 18 <style> 19 /* This rule should be globally registered */ 20 @property --y { 21 syntax: "<length>"; 22 inherits: false; 23 initial-value: 0px; 24 } 25 #inside { 26 --x: calc(1px + 1px); 27 --y: calc(1px + 1px); 28 } 29 </style> 30 <div id=inside></div> 31 </template> 32 <div id=host></div> 33 <div id=outside></div> 34 <script> 35 36 test(() => { 37 let root = host.attachShadow({ mode: 'open' }); 38 root.append(template.content.cloneNode(true)); 39 let inside = root.querySelector('#inside'); 40 assert_equals(getComputedStyle(outside).getPropertyValue('--x'), '2px'); 41 assert_equals(getComputedStyle(outside).getPropertyValue('--y'), '2px'); 42 assert_equals(getComputedStyle(inside).getPropertyValue('--x'), '2px'); 43 assert_equals(getComputedStyle(inside).getPropertyValue('--y'), '2px'); 44 }, '@property rules in shadow trees should be globally registered'); 45 46 </script>