4 <title>Variable on created element
</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 stated in the spec, but still worth testing to ensure it works -->
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>
16 <script type=
"text/javascript">
19 var newDiv
= document
.createElement("div");
20 newDiv
.appendChild(document
.createTextNode("This text should be green."));
21 newDiv
.setAttribute("id", "target");
22 newDiv
.setAttribute("style", "--c: rgb(0, 136, 0); color: var(--c)");
23 document
.body
.insertBefore(newDiv
, document
.body
.firstChild
);
26 assert_equals(document
.getElementById("target").style
.getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
27 }, "Specified variable value appearing in a created element's inline style should work once spliced into the creating document");
30 assert_equals(window
.getComputedStyle(document
.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
31 }, "Computed variable value appearing in a created element's inline style should work once spliced into the creating document");
34 assert_equals(window
.getComputedStyle(document
.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)");
35 }, "Variable reference appearing in a created element's inline style should work once spliced into the creating document");