wpt/css/css-variables/variable-invalidation.html at master · web-platform-tests/wpt · GitHub

Name: wpt/css/css-variables/variable-invalidation.html at master · web-platform-tests/wpt · GitHub
Rating: 4.4 (8861 reviews)
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
<!DOCTYPE html>
<html>
<head>
<title>Tests css variable invalidation</title>

<metarel="author" title="Kevin Babbitt">
<metarel="author" title="Greg Whitworth">
<linkrel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<!-- This is not directly specified in the spec but should work -->
<linkrel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">

<scriptsrc="/resources/testharness.js"></script>
<scriptsrc="/resources/testharnessreport.js"></script>
<style>
#test1 {
--var1:red;
 }
#test2 {
--var2:red!important;
 }
</style>
</head>
<body>
<divid="test1"><div><div><divclass="testElem"></div></div></div></div>
<divid="test2"><div><div><divclass="testElem"></div></div></div></div>
<divid="test3" style="--var3:red"><div><div><divclass="testElem"></div></div></div></div>
<divid="test4" style="--var4:red!important"><div><div><divclass="testElem"></div></div></div></div>

<scripttype="text/javascript">
"use strict";

// This is a helper function to avoid repitition
functiontestExpectations(testProperty,cssStyle,testElement,testDescription,expectedValue,expectedCssText,expectedPriority,expectedLength,expectedItem0){
assert_equals(cssStyle.cssText,expectedCssText,"cssText "+testDescription+".");
assert_equals(cssStyle.getPropertyValue(testProperty),expectedValue,"Value "+testDescription+".");
assert_equals(cssStyle.getPropertyPriority(testProperty),expectedPriority,"Priority "+testDescription+".");
assert_equals(cssStyle.length,expectedLength,"style length "+testDescription+".");
assert_equals(cssStyle.item(0),expectedItem0,"item(0) "+testDescription+".");

varcomputedStyle=window.getComputedStyle(testElement);
assert_equals(computedStyle.getPropertyValue(testProperty),expectedValue,"Computed Style value "+testDescription+".");
}

// This is a boilerplate to build a testcase and then test the expected outcome
functiontestCase(cssStyle,testProperty,testElement,testImportant){
varinitialCssText=testProperty+(testImportant ? ": red !important;" : ": red;");

testExpectations(testProperty,cssStyle,testElement,"initial","red",initialCssText,testImportant ? "important" : "",1,testProperty);

cssStyle.setProperty(testProperty,"blue");

if(!testImportant){
testExpectations(testProperty,cssStyle,testElement,"after setProperty","blue",testProperty+": blue;","",1,testProperty);
}

if(testProperty){
cssStyle.setProperty(testProperty,"pink",'important');
testExpectations(testProperty,cssStyle,testElement,"after setProperty important","pink",testProperty+": pink !important;","important",1,testProperty);
}

cssStyle.removeProperty(testProperty);
testExpectations(testProperty,cssStyle,testElement,"after removeProperty","","","",0,"");

varcssText=testProperty+(testImportant ? ":green!important;" : ":green;");
varexpectedCssText=testProperty+(testImportant ? ": green !important;" : ": green;");
cssStyle.cssText=cssText;
testExpectations(testProperty,cssStyle,testElement,"after setting cssText","green",expectedCssText,testImportant ? "important" : "",1,testProperty);
}

// The actual tests that utilize the boilerplate & helper methods above
test(function(){
varcssStyle=document.styleSheets[0].cssRules[0].style;
vartestProperty="--var1";
vartestElement=document.querySelectorAll("#test1 .testElem")[0];

testCase(cssStyle,testProperty,testElement,false);
},"css rule test");

test(function(){
varcssStyle=document.styleSheets[0].cssRules[1].style;
vartestProperty="--var2";
vartestElement=document.querySelectorAll("#test2 .testElem")[0];

testCase(cssStyle,testProperty,testElement,true);
},"css rule test important");

test(function(){
varelement=document.getElementById("test3");
varcssStyle=element.style;
vartestProperty="--var3";
vartestElement=document.querySelectorAll("#test3 .testElem")[0];

testCase(cssStyle,testProperty,testElement,false);
},"inline style test");

test(function(){
varelement=document.getElementById("test4");
varcssStyle=element.style;
vartestProperty="--var4";
vartestElement=document.querySelectorAll("#test4 .testElem")[0];

testCase(cssStyle,testProperty,testElement,true);
},"inline style test important");
</script>
</body>
</html>