<!DOCTYPE html> <html> <head> <title>Variable on created element</title> <meta rel="author" title="Kevin Babbitt"> <meta rel="author" title="Greg Whitworth"> <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> <!-- This is not directly stated in the spec, but still worth testing to ensure it works --> <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> </head> <body> <script type="text/javascript"> "use strict"; var newDiv = document.createElement("div"); newDiv.appendChild(document.createTextNode("This text should be green.")); newDiv.setAttribute("id", "target"); newDiv.setAttribute("style", "--c: rgb(0, 136, 0); color: var(--c)"); document.body.insertBefore(newDiv, document.body.firstChild); test( function () { assert_equals(document.getElementById("target").style.getPropertyValue("--c").trim(), "rgb(0, 136, 0)"); }, "Specified variable value appearing in a created element's inline style should work once spliced into the creating document"); test( function () { assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)"); }, "Computed variable value appearing in a created element's inline style should work once spliced into the creating document"); test( function () { assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)"); }, "Variable reference appearing in a created element's inline style should work once spliced into the creating document"); </script> </body> </html>