1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<!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>
|
