variable-created-element.html (1872B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Variable on created element</title> 5 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"> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 </head> 15 <body> 16 <script type="text/javascript"> 17 "use strict"; 18 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); 24 25 test( function () { 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"); 28 29 test( function () { 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"); 32 33 test( function () { 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"); 36 37 </script> 38 </body> 39 </html>