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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!DOCTYPE html>
<html>
<head>
<title>test basic variable substitution</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="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>
#testArea {
color: orange;
}
#testArea > div {
width: 50px !important;
}
</style>
</head>
<body>
<div id="log"></div>
<div id="testArea"></div>
<script type="text/javascript">
"use strict";
let templates = [
{
testName:"Simple substitution test",
propertyName:"border-spacing",
expectedValue:"20px 20px",
style:"--gap: 20px;border-spacing: var(--gap);"
},
{
testName:"You can't build up a single token where part of it is provided by a variable",
propertyName:"border-spacing",
expectedValue:"0px 0px",
style:"--gap: 20;border-spacing: var(--gap)px;"
},
{
testName:"You can't build up a single token where part of it is provided by a variable (percentages)",
propertyName:"text-indent",
expectedValue:"0px",
style:"--v: 20;text-indent: var(--v)%;"
},
{
testName:"Multiple variable references in a single property",
propertyName:"border-spacing",
expectedValue:"19px 47px",
style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);"
},
{
testName:"Multiple variable references in a single property (no spaces)",
propertyName:"border-spacing",
expectedValue:"23px 59px",
style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);"
},
{
testName:"Fallback value",
propertyName:"border-spacing",
expectedValue:"11px 11px",
style:"border-spacing:var(--gap,11px);"
},
{
testName:"Fallback value which is also a variable reference",
propertyName:"border-spacing",
expectedValue:"27px 27px",
style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));"
},
{
testName:"Multiple var references in fallback value",
propertyName:"border-spacing",
expectedValue:"66px 92px",
style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));"
},
{
testName:"Multiple nested fallbacks",
propertyName:"border-spacing",
expectedValue:"98px 18px",
style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));"
},
{
testName:"Bad variable reference that should inherit by default",
propertyName:"color",
expectedValue:"rgb(255, 165, 0)",
style:"color: var(--colorVar) pink;"
},
{
testName:"Test that var reference doesn’t overwrite !important",
propertyName:"width",
expectedValue:"50px",
style:"--varWidth: 28px; width: var(--varWidth);"
},
{
testName:"Test that !important on a property that has a variable reference can overwrite !important",
propertyName:"width",
expectedValue:"28px",
style:"--varWidth: 28px; width: var(--varWidth) !important;"
},
{
testName:"Test that !important inside of var reference can't overwrite !important on property",
propertyName:"width",
expectedValue:"50px",
style:"--varWidth: 28px !important; width: var(--varWidth);"
},
];
let testArea = document.getElementById("testArea");
templates.forEach(function (template) {
test( function () {
let div = document.createElement("div");
div.style.cssText = template.style;
testArea.appendChild(div);
let computedStyle = window.getComputedStyle(div);
let value = computedStyle.getPropertyValue(template.propertyName);
assert_equals(value, template.expectedValue, "Expected Value should match actual value");
testArea.removeChild(div);
}, template.testName);
});
</script>
</body>
</html>
|
