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
113
114
115
116
117
118
119
120
|
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="match" href="highlight-cascade-002-ref.html">
<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
/*
Register the custom properties, other than --unregistered,
which would be an inherited property [css-variables-1].
*/
@property --control {
syntax: "<color>";
initial-value: green;
inherits: false;
}
@property --inherits-false {
syntax: "<color>";
initial-value: red;
inherits: false;
}
@property --inherits-true {
syntax: "<color>";
initial-value: red;
inherits: true;
}
main {
font-size: 7em;
margin: 0.5em;
}
main::selection {
/*
Don’t visibly highlight the spaces between words.
*/
color: black;
background-color: transparent;
}
/*
Non-highlight control: if this text is white on red (inherit)
rather than white on green (initial), then @property is not
supported well enough to make this test meaningful.
*/
main > .control {
--control: red;
}
main > .control > span {
color: white;
background-color: var(--control);
}
main > *::selection {
--inherits-false: green;
--inherits-true: green;
--unregistered: green;
}
/*
Foreground tests: if the foreground of this text is red or
black (initial) rather than green (inherit), then custom
properties are not being inherited in highlight styles.
color is an inherited property, but that shouldn’t matter.
*/
main > .fg > span::selection {
background-color: white;
}
main > .fg.inherits-false > span::selection {
color: var(--inherits-false);
}
main > .fg.inherits-true > span::selection {
color: var(--inherits-true);
}
main > .fg.unregistered > span::selection {
color: var(--unregistered);
}
/*
Background tests: if the background of this text is red or
black (initial) rather than green (inherit), then custom
properties are not being inherited in highlight styles.
background-color is not an inherited property, but that
shouldn’t matter.
*/
main > .bg > span::selection {
color: white;
}
main > .bg.inherits-false > span::selection {
background-color: var(--inherits-false);
}
main > .bg.inherits-true > span::selection {
background-color: var(--inherits-true);
}
main > .bg.unregistered > span::selection {
background-color: var(--unregistered);
}
</style>
<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
<main class="highlight_reftest"
><span class="control"><span>foo</span></span
> <span class="fg inherits-false"><span>b</span></span
><span class="fg inherits-true"><span>a</span></span
><span class="fg unregistered"><span>r</span></span
> <span class="bg inherits-false"><span>b</span></span
><span class="bg inherits-true"><span>a</span></span
><span class="bg unregistered"><span>z</span></span
></main>
<script>
const main = document.querySelector("main");
selectRangeWith(range => {
range.selectNodeContents(main);
range.setStart(main, 2);
range.setEnd(main, 9);
});
</script>
|
