variable-reference-cssom.html (2521B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS variable references - via CSSOM</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 specified in the spec but should work --> 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 17 <div id="target1"></div> 18 <div id="target2" style="background-color: red;"></div> 19 20 <script type="text/javascript"> 21 "use strict"; 22 23 // This test verifies that variable references are usable when set via CSSOM calls. 24 25 function TestCssom() { 26 var target = document.getElementById("target1"); 27 28 target.style.setProperty("background-color", "var(--prop)"); 29 assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty"); 30 assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty"); 31 32 target.style.removeProperty("background-color"); 33 assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty"); 34 assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty"); 35 } 36 37 function TestCssomOverridingMarkup() { 38 var target = document.getElementById("target1"); 39 40 target.style.setProperty("background-color", "var(--prop)"); 41 assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty"); 42 assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty"); 43 44 target.style.removeProperty("background-color"); 45 assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty"); 46 assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty"); 47 } 48 49 test(TestCssom, "Verify correct results using CSSOM"); 50 test(TestCssomOverridingMarkup, "Verify correct results with CSSOM overriding markup-set values"); 51 </script> 52 53 </body> 54 </html>