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
|
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<meta name="fuzzy" content="0-50;0-150">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(below) {
color: yellow;
background: maroon;
}
::highlight(empty) {
}
::highlight(color-currentcolor) {
color: currentcolor;
}
::highlight(backgroundcolor-currentcolor) {
background-color: currentcolor;
}
::highlight(textdecorationcolor-currentcolor) {
text-decoration-line: underline;
text-decoration-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-currentcolor) {
color: currentcolor;
background-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-blue) {
color: currentcolor;
background-color: blue;
}
::highlight(color-blue-backgroundcolor-currentcolor) {
color: blue;
background-color: currentcolor;
}
</style>
<div id="empty" class="highlight_reftest">example - empty</div>
<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
let ranges = [];
for (let div of divs) {
ranges.push(range(div.firstChild, 0, 7));
}
CSS.highlights.set("below", new Highlight(...ranges));
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
}
</script>
|
