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
|
<!DOCTYPE html>
<html>
<head>
<title>Variables work in ::before/::after pseudos</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root {
--color: green;
--color2: red;
}
div::before {
content: '[before]';
}
div::after {
content: '[after]';
}
#div1 {
color: red;
}
#div1::before, #div1::after {
color: var(--color2);
--color2: green;
}
#div2 {
color: var(--color2);
}
#div2::before, #div2::after {
color: var(--color);
}
#div3 {
color: var(--color);
}
#div3::before, #div3::after {
--color: red;
}
</style>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<span id="control" style="color: green;"></span>
<script>
"use strict";
[...document.querySelectorAll("div")].forEach(function (div) {
test( function () {
const expectedColor = getComputedStyle(document.querySelector("#control")).color;
var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
assert_equals(actualBeforeColor, expectedColor);
assert_equals(actualAfterColor, expectedColor);
}, div.getAttribute("id"));
});
</script>
</body>
</html>
|
