| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Variable added to created document</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> |
| <div id="target">This text should be green.</div> |
| <script type="text/javascript"> |
| "use strict"; |
| |
| var workDocument = document.implementation.createHTMLDocument(""); |
| workDocument.documentElement.innerHTML = "<style id='style'>#target { --c: rgb(0, 136, 0); color: var(--c) }</style>"; |
| document.head.appendChild(workDocument.getElementById("style")); |
| |
| test( function () { |
| assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)"); |
| }, "Variable definition appearing in a created document 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 document should work once spliced into the creating document"); |
| |
| </script> |
| </body> |
| </html> |
| |
