- Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathcss-variable-change-style-001.html
96 lines (89 loc) · 4.76 KB
/
css-variable-change-style-001.html
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
<!DOCTYPE html>
<metacharset="utf-8">
<title>CSS Variables Test: Style changes on properties using variables</title>
<linkrel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<linkrel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<metaname="assert" content="A change in the custom property declaration must be propagated to all the descendants">
<scriptsrc="/resources/testharness.js"></script>
<scriptsrc="/resources/testharnessreport.js"></script>
<style>
.inner {
color:var(--x);
background-color:var(--x);
white-space:var(--x);
}
</style>
<divid="outer">
<divid="inbetween">
<divid="inner"></div>
</div>
</div>
<script>
"use strict";
letcolorValues=[
{Id: "case1",outer: "red",inbetween: "",expected: "rgb(255, 0, 0)"},
{Id: "case2",outer: "red",inbetween: "blue",expected: "rgb(0, 0, 255)"},
{Id: "case3",outer: "green",inbetween: "blue",expected: "rgb(0, 0, 255)"},
{Id: "case4",outer: "green",inbetween: "",expected: "rgb(0, 128, 0)"},
{Id: "case5",outer: "green",inbetween: "red",expected: "rgb(255, 0, 0)"},
{Id: "case6",outer: "",inbetween: "red",expected: "rgb(255, 0, 0)"},
{Id: "case7",outer: "blue",inbetween: "",expected: "rgb(0, 0, 255)"},
];
letwhiteSpaceValues=[
{Id: "case1",outer: "pre",inbetween: "",expected: "pre"},
{Id: "case2",outer: "pre-wrap",inbetween: "",expected: "pre-wrap"},
{Id: "case3",outer: "pre-wrap",inbetween: "nowrap",expected: "nowrap"},
{Id: "case3",outer: "pre-wrap",inbetween: "",expected: "pre-wrap"},
{Id: "case4",outer: "pre-line",inbetween: "normal",expected: "normal"},
{Id: "case5",outer: "pre-line",inbetween: "",expected: "pre-line"},
{Id: "case6",outer: "",inbetween: "pre-wrap",expected: "pre-wrap"},
{Id: "case7",outer: "",inbetween: "",expected: "normal"},
];
lettestcases=[
{property: "color",values: colorValues,},
{property: "background-color",values: colorValues,},
{property: "white-space",values: whiteSpaceValues},
];
functioninitializeStyles(){
outer.style.cssText="";
inbetween.style.cssText="";
inner.style.cssText="";
}
testcases.forEach(function(testcase){
test(function(){
initializeStyles();
inner.style.cssText=testcase.property+': var(--x)';
testcase.values.forEach(function(value){
outer.style.cssText=value.outer ? "--x:"+value.outer : "";
inbetween.style.cssText=value.inbetween ? "--x:"+value.inbetween : "";
letcomputedStyle=getComputedStyle(inner);
letactualValue=computedStyle.getPropertyValue(testcase.property);
assert_equals(actualValue,value.expected,value.Id);
});
},"Test declaration changes on '"+testcase.property+"' as variable");
test(function(){
initializeStyles();
inbetween.style.cssText=testcase.property+': inherit';
inner.style.cssText=testcase.property+': inherit';
testcase.values.forEach(function(value){
outer.style.cssText="--x:"+value.outer+"; "+testcase.property+": "+value.outer;
letactualValue=getComputedStyle(inner).getPropertyValue(testcase.property);
letexpectedValue=getComputedStyle(outer).getPropertyValue(testcase.property);
assert_equals(actualValue,expectedValue,value.Id);
});
},"Avoid masking differences on '"+testcase.property+"' due to declaration changes");
test(function(){
initializeStyles();
inbetween.style.cssText=testcase.property+': inherit';
inner.style.cssText=testcase.property+': inherit';
letvalue1=testcase.values[0];
letvalue2=testcase.values[3];
outer.style.cssText="--x:"+value2.outer+"; "+testcase.property+": "+value1.outer;
letactualValue=getComputedStyle(inner).getPropertyValue(testcase.property);
assert_equals(actualValue,value1.expected,value1.Id);
inner.style.cssText=testcase.property+': var(--x)';
actualValue=getComputedStyle(inner).getPropertyValue(testcase.property);
assert_equals(actualValue,value2.expected,value2.Id);
},"Test changing '"+testcase.property+"' value to become a css variable");
});
</script>
