| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| @property --inherited-length-1 { |
| syntax: "<length>"; |
| inherits: true; |
| initial-value: 10px; |
| } |
| @property --inherited-length-2 { |
| syntax: "<length>"; |
| inherits: true; |
| initial-value: 20px; |
| } |
| @property --non-inherited-length-1 { |
| syntax: "<length>"; |
| inherits: false; |
| initial-value: 30px; |
| } |
| @property --non-inherited-length-2 { |
| syntax: "<length>"; |
| inherits: false; |
| initial-value: 40px; |
| } |
| @property --inherited-no-initial-value-1 { |
| syntax: "*"; |
| inherits: true; |
| } |
| @property --inherited-no-initial-value-2 { |
| syntax: "*"; |
| inherits: true; |
| } |
| @property --inherited-no-initial-value-3 { |
| syntax: "*"; |
| inherits: true; |
| } |
| @property --non-inherited-no-initial-value-1 { |
| syntax: "*"; |
| inherits: false; |
| } |
| @property --non-inherited-no-initial-value-2 { |
| syntax: "*"; |
| inherits: false; |
| } |
| @property --non-inherited-no-initial-value-3 { |
| syntax: "*"; |
| inherits: false; |
| } |
| #parent { |
| --inherited-no-initial-value-2: parent-A; |
| --non-inherited-no-initial-value-2: parent-B; |
| --non-registered-property-2: parent-C; |
| } |
| #node { |
| --inherited-length-1: 50px; |
| --non-inherited-length-1: 60px; |
| --inherited-no-initial-value-1: child-A; |
| --non-inherited-no-initial-value-1: child-B; |
| --non-registered-property-1: child-C; |
| } |
| </style> |
| <div id="parent"><div id="node"></div></div> |
| <script> |
| let style = window.getComputedStyle(document.getElementById("node")); |
| let properties = new Map(); |
| Array.from(style).filter(name => name.startsWith("--")) |
| .forEach(name => properties.set(name, style.getPropertyValue(name))); |
| |
| test(() => { |
| assert_equals(properties.get("--inherited-length-1"), "50px"); |
| assert_equals(properties.get("--non-inherited-length-1"), "60px"); |
| assert_equals(properties.get("--inherited-no-initial-value-1"), "child-A"); |
| assert_equals(properties.get("--non-inherited-no-initial-value-1"), "child-B"); |
| assert_equals(properties.get("--non-registered-property-1"), "child-C"); |
| }, "Custom properties specified on the node exposed when enumerating computed style."); |
| |
| test(() => { |
| assert_equals(properties.get("--inherited-no-initial-value-2"), "parent-A"); |
| assert_equals(properties.get("--non-registered-property-2"), "parent-C"); |
| }, "Inherited custom properties specified on the parent exposed when enumerating computed style."); |
| |
| test(() => { |
| assert_equals(properties.get("--inherited-length-2"), "20px"); |
| assert_equals(properties.get("--non-inherited-length-2"), "40px"); |
| }, "Unspecified properties with initial values exposed when enumerating computed style."); |
| |
| test(() => { |
| assert_false(properties.has("--non-inherited-no-initial-value-2")); |
| }, "Non-inherited custom properties specified on the parent without initial values not exposed when enumerating computed style."); |
| |
| test(() => { |
| assert_false(properties.has("--inherited-no-initial-value-3"), "inherited"); |
| assert_false(properties.has("--non-inherited-no-initial-value-3"), "non-inherited"); |
| }, "Unspecified properties without initial values not exposed when enumerating computed style."); |
| </script> |
