| <!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> |
| |
