| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS variable references - via CSSOM</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 specified in the spec but should work --> |
| <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="target1"></div> |
| <div id="target2" style="background-color: red;"></div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| |
| // This test verifies that variable references are usable when set via CSSOM calls. |
| |
| function TestCssom() { |
| var target = document.getElementById("target1"); |
| |
| target.style.setProperty("background-color", "var(--prop)"); |
| assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty"); |
| assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty"); |
| |
| target.style.removeProperty("background-color"); |
| assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty"); |
| assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty"); |
| } |
| |
| function TestCssomOverridingMarkup() { |
| var target = document.getElementById("target1"); |
| |
| target.style.setProperty("background-color", "var(--prop)"); |
| assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty"); |
| assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty"); |
| |
| target.style.removeProperty("background-color"); |
| assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty"); |
| assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty"); |
| } |
| |
| test(TestCssom, "Verify correct results using CSSOM"); |
| test(TestCssomOverridingMarkup, "Verify correct results with CSSOM overriding markup-set values"); |
| </script> |
| |
| </body> |
| </html> |
