cssstyledeclaration-registered-custom-properties.html (2098B)
1 <!DOCTYPE html> 2 <title>Computed CSSStyleDeclaration includes registered custom properties</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1316"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 @property --non-inherited-length { 9 syntax: "<length>"; 10 inherits: false; 11 initial-value: 0px; 12 } 13 @property --inherited-length { 14 syntax: "<length>"; 15 inherits: true; 16 initial-value: 0px; 17 } 18 @property --universal-with-initial { 19 syntax: "*"; 20 inherits: false; 21 initial-value: foo; 22 } 23 @property --universal-without-initial { 24 syntax: "*"; 25 inherits: false; 26 } 27 #outer { --non-registered-outer: 1px; } 28 #inner { --non-registered-inner: 2px; } 29 #sibling { --universal-without-initial: bar; } 30 </style> 31 <div id=outer> 32 <div id=inner></div> 33 <div id=sibling></div> 34 </div> 35 <script> 36 const assert_present = (props, name) => assert_not_equals(props.indexOf(name), -1); 37 const assert_absent = (props, name) => assert_equals(props.indexOf(name), -1); 38 39 test(function() { 40 let props = Array.from(getComputedStyle(inner)); 41 assert_present(props, '--non-inherited-length'); 42 assert_present(props, '--inherited-length'); 43 assert_present(props, '--non-registered-outer'); 44 assert_present(props, '--non-registered-inner'); 45 assert_present(props, '--universal-with-initial'); 46 assert_absent(props, '--universal-without-initial'); 47 }, 'Registered custom properties are included in CSSComputedStyleDeclaration'); 48 49 test(function() { 50 let props = Array.from(getComputedStyle(sibling)); 51 assert_present(props, '--non-inherited-length'); 52 assert_present(props, '--inherited-length'); 53 assert_present(props, '--non-registered-outer'); 54 assert_present(props, '--universal-with-initial'); 55 assert_present(props, '--universal-without-initial'); 56 assert_absent(props, '--non-registered-inner'); 57 }, 'Only relevant custom properties are included'); 58 </script>