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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE html>
<title>CSS Color 4: System colors compute to absolute colors</title>
<link rel="help" href="https://www.w3.org/TR/css-color-4/#resolving-color-values">
<meta name="assert" content="Tests that system color keywords resolve to absolute colors at computed value time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.parent {
border: 1px solid black;
width: 100px;
height: 170px;
margin: 5px;
padding: 5px;
color-scheme: light;
}
.child {
position: relative;
border: 1px solid black;
width: 80px;
height: 50px;
margin: 4px;
padding: 4px;
color-scheme: dark;
}
.specified {
color: Menu;
background-color: Menu;
box-shadow: 2px 2px Menu;
text-shadow: 2px 2px Menu;
border-color: Menu;
column-rule-color: Menu;
outline-color: Menu;
caret-color: Menu;
fill: Menu;
stroke: Menu;
}
.inherit {
color: inherit;
background-color: inherit;
box-shadow: inherit;
text-shadow: inherit;
border-color: inherit;
column-rule-color: inherit;
outline-color: inherit;
caret-color: inherit;
fill: inherit;
stroke: inherit;
}
</style>
<div id="parent" class="specified parent">Parent
<div id="specified" class="specified child">Specified Child</div>
<div id="inherited" class="inherit child">Inherit Child</div>
</div>
<script>
// The premise behind this test is that if a system color keyword were to
// compute to itself, then child elements inheriting a system color value
// will incorrectly inherit the keyword, not the color it resolves to. We can
// detect whether this is happening by applying different color schemes to
// parent and child, then comparing the results we get between a child that
// inherited a system color versus a child that received the system color
// directly.
// As a precondition check, validate that the color-scheme property results
// in a different resolved color.
test(function() {
let light_value =
getComputedStyle(document.getElementById("parent")).backgroundColor;
let dark_value =
getComputedStyle(document.getElementById("specified")).backgroundColor;
assert_not_equals(light_value, dark_value);
}, "color-scheme property affects Menu system color keyword");
// Test several color properties.
const properties_to_test = [
"color",
"background-color",
"box-shadow",
"text-shadow",
"border-left-color",
"border-top-color",
"border-right-color",
"border-bottom-color",
"column-rule-color",
"outline-color",
"caret-color",
"fill",
"stroke",
];
for (let property of properties_to_test) {
test(function() {
let specified_value =
getComputedStyle(document.getElementById("specified"))
.getPropertyValue(property);
let inherited_value =
getComputedStyle(document.getElementById("inherited"))
.getPropertyValue(property);
assert_not_equals(inherited_value, specified_value);
}, "System color doesn't compute to itself on " + property);
test(function() {
let inherited_value =
document.getElementById("inherited").computedStyleMap()
.get(property);
assert_false(/menu/i.test(inherited_value));
}, "Inherited system color keyword is observable on " + property);
}
</script>
|
