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
|
<!DOCTYPE html>
<html>
<head>
<title>Parse, store, and serialize CSS variable references</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is not directly specified in the spec but should work -->
<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>
<!--
https://drafts.csswg.org/css-syntax/#error-handling
If the stylesheet ends while any rule, declaration, function, string, etc. are still open, everything is automatically closed.
-->
<style id="variable-reference-left-open">
div
{
color: var(--my-color);
--my-color: blue;
--my-color2: red;
}
#div1::after
{
content: '[after]';
color: var(--my-color);
--my-color: orange;
}
#div2::after
{
content: '[after]';
color: var(--my-color2);
}
#div3::after
{
content: '[after]';
--my-color: orange;
}
#div4::after
{
content: '[after]';
color: var(--my-color);
--my-color: pink;
}
#div1::before
{
content: '[before]';
color: var(--my-color);
--my-color: orange;
}
#div2::before
{
content: '[before]';
color: var(--my-color2);
}
#div3::before
{
content: '[before]';
--my-color: orange;
}
#div4::before
{
content: '[before]';
color: var(--my-color);
--my-color: purple;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<script type="text/javascript">
"use strict";
var testcases = [
{ ID: "div1", expectedAfterColor: "rgb(255, 165, 0)", expectedBeforeColor: "rgb(255, 165, 0)" },
{ ID: "div2", expectedAfterColor: "rgb(255, 0, 0)", expectedBeforeColor: "rgb(255, 0, 0)" },
{ ID: "div3", expectedAfterColor: "rgb(0, 0, 255)", expectedBeforeColor: "rgb(0, 0, 255)" },
{ ID: "div4", expectedAfterColor: "rgb(255, 192, 203)", expectedBeforeColor: "rgb(128, 0, 128)" },
];
testcases.forEach(function (testcase) {
test( function () {
var div = document.getElementById(testcase.ID);
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
assert_equals(actualBeforeColor, testcase.expectedBeforeColor, "The color of the before pseudo element should match the expected color");
assert_equals(actualAfterColor, testcase.expectedAfterColor, "The color of the after pseudo element should match the expected color");
}, testcase.ID);
});
</script>
</body>
</html>
|
