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: highlight selectors inheritance getComputedStyle for currentcolor</title>
<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’ in the parent. The child should inherit both properties as if if they were directly set to ‘currentColor’, due to highlight inheritance and the fact that ‘currentColor’ computes to itself, and the result for both properties should equal the originating element ‘color’.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
background-color: green;
color: lime;
}
#target::selection {
color: currentcolor;
background-color: currentcolor;
}
#target::target-text {
color: currentcolor;
background-color: currentcolor;
}
#target::spelling-error {
color: currentcolor;
background-color: currentcolor;
}
#target::grammar-error {
color: currentcolor;
background-color: currentcolor;
}
#target::highlight(foo) {
color: currentcolor;
background-color: currentcolor;
}
</style>
<div id="target"><span id="child"></span></div>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
test(() => {
let style = getComputedStyle(child, pseudo);
assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
}, `getComputedStyle() for ${pseudo}`);
}
</script>
|
