get-computed-style-enumeration.html (3489B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 @property --inherited-length-1 { 7 syntax: "<length>"; 8 inherits: true; 9 initial-value: 10px; 10 } 11 @property --inherited-length-2 { 12 syntax: "<length>"; 13 inherits: true; 14 initial-value: 20px; 15 } 16 @property --non-inherited-length-1 { 17 syntax: "<length>"; 18 inherits: false; 19 initial-value: 30px; 20 } 21 @property --non-inherited-length-2 { 22 syntax: "<length>"; 23 inherits: false; 24 initial-value: 40px; 25 } 26 @property --inherited-no-initial-value-1 { 27 syntax: "*"; 28 inherits: true; 29 } 30 @property --inherited-no-initial-value-2 { 31 syntax: "*"; 32 inherits: true; 33 } 34 @property --inherited-no-initial-value-3 { 35 syntax: "*"; 36 inherits: true; 37 } 38 @property --non-inherited-no-initial-value-1 { 39 syntax: "*"; 40 inherits: false; 41 } 42 @property --non-inherited-no-initial-value-2 { 43 syntax: "*"; 44 inherits: false; 45 } 46 @property --non-inherited-no-initial-value-3 { 47 syntax: "*"; 48 inherits: false; 49 } 50 #parent { 51 --inherited-no-initial-value-2: parent-A; 52 --non-inherited-no-initial-value-2: parent-B; 53 --non-registered-property-2: parent-C; 54 } 55 #node { 56 --inherited-length-1: 50px; 57 --non-inherited-length-1: 60px; 58 --inherited-no-initial-value-1: child-A; 59 --non-inherited-no-initial-value-1: child-B; 60 --non-registered-property-1: child-C; 61 } 62 </style> 63 <div id="parent"><div id="node"></div></div> 64 <script> 65 let style = window.getComputedStyle(document.getElementById("node")); 66 let properties = new Map(); 67 Array.from(style).filter(name => name.startsWith("--")) 68 .forEach(name => properties.set(name, style.getPropertyValue(name))); 69 70 test(() => { 71 assert_equals(properties.get("--inherited-length-1"), "50px"); 72 assert_equals(properties.get("--non-inherited-length-1"), "60px"); 73 assert_equals(properties.get("--inherited-no-initial-value-1"), "child-A"); 74 assert_equals(properties.get("--non-inherited-no-initial-value-1"), "child-B"); 75 assert_equals(properties.get("--non-registered-property-1"), "child-C"); 76 }, "Custom properties specified on the node exposed when enumerating computed style."); 77 78 test(() => { 79 assert_equals(properties.get("--inherited-no-initial-value-2"), "parent-A"); 80 assert_equals(properties.get("--non-registered-property-2"), "parent-C"); 81 }, "Inherited custom properties specified on the parent exposed when enumerating computed style."); 82 83 test(() => { 84 assert_equals(properties.get("--inherited-length-2"), "20px"); 85 assert_equals(properties.get("--non-inherited-length-2"), "40px"); 86 }, "Unspecified properties with initial values exposed when enumerating computed style."); 87 88 test(() => { 89 assert_false(properties.has("--non-inherited-no-initial-value-2")); 90 }, "Non-inherited custom properties specified on the parent without initial values not exposed when enumerating computed style."); 91 92 test(() => { 93 assert_false(properties.has("--inherited-no-initial-value-3"), "inherited"); 94 assert_false(properties.has("--non-inherited-no-initial-value-3"), "non-inherited"); 95 }, "Unspecified properties without initial values not exposed when enumerating computed style."); 96 </script>