blob: 77858729afaf8c55b435094baceb5959b67d3d46 (
plain)
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
|
<!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="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(below) {
color: yellow;
background: maroon;
}
::highlight(textshadow-currentcolor) {
text-shadow: currentcolor 2px 2px;
}
</style>
<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-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>
|
