Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/get-computed-style-enumeration.html - WPT Dashboard Interop Dashboard
<!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>