96 lines
3.4 KiB
HTML
96 lines
3.4 KiB
HTML
<!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>
|