4 <title>CSS variable references - via CSSOM
</title>
6 <meta rel=
"author" title=
"Kevin Babbitt">
7 <meta rel=
"author" title=
"Greg Whitworth">
8 <link rel=
"author" title=
"Microsoft Corporation" href=
"http://microsoft.com" />
9 <!-- This is not directly specified in the spec but should work -->
10 <link rel=
"help" href=
"http://www.w3.org/TR/css-variables-1/#defining-variables">
12 <script src=
"/resources/testharness.js"></script>
13 <script src=
"/resources/testharnessreport.js"></script>
17 <div id=
"target1"></div>
18 <div id=
"target2" style=
"background-color: red;"></div>
20 <script type=
"text/javascript">
23 // This test verifies that variable references are usable when set via CSSOM calls.
25 function TestCssom() {
26 var target
= document
.getElementById("target1");
28 target
.style
.setProperty("background-color", "var(--prop)");
29 assert_equals(target
.style
.backgroundColor
, "var(--prop)", "background-color property value after calling setProperty");
30 assert_equals(target
.style
.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
32 target
.style
.removeProperty("background-color");
33 assert_equals(target
.style
.backgroundColor
, "", "background-color property value after calling removeProperty");
34 assert_equals(target
.style
.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
37 function TestCssomOverridingMarkup() {
38 var target
= document
.getElementById("target1");
40 target
.style
.setProperty("background-color", "var(--prop)");
41 assert_equals(target
.style
.backgroundColor
, "var(--prop)", "background-color property value after calling setProperty");
42 assert_equals(target
.style
.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
44 target
.style
.removeProperty("background-color");
45 assert_equals(target
.style
.backgroundColor
, "", "background-color property value after calling removeProperty");
46 assert_equals(target
.style
.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
49 test(TestCssom
, "Verify correct results using CSSOM");
50 test(TestCssomOverridingMarkup
, "Verify correct results with CSSOM overriding markup-set values");