| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Tests css variable invalidation</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> |
| <style> |
| #test1 { |
| --var1:red; |
| } |
| #test2 { |
| --var2:red!important; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="test1"><div><div><div class="testElem"></div></div></div></div> |
| <div id="test2"><div><div><div class="testElem"></div></div></div></div> |
| <div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div> |
| <div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| |
| // This is a helper function to avoid repitition |
| function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) { |
| assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + "."); |
| assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + "."); |
| assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + "."); |
| assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + "."); |
| assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + "."); |
| |
| var computedStyle = window.getComputedStyle(testElement); |
| assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + "."); |
| } |
| |
| // This is a boilerplate to build a testcase and then test the expected outcome |
| function testCase(cssStyle, testProperty, testElement, testImportant) { |
| var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;"); |
| |
| testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty); |
| |
| cssStyle.setProperty(testProperty, "blue"); |
| |
| if (!testImportant) { |
| testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty); |
| } |
| |
| if (testProperty) { |
| cssStyle.setProperty(testProperty, "pink", 'important'); |
| testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty); |
| } |
| |
| cssStyle.removeProperty(testProperty); |
| testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, ""); |
| |
| var cssText = testProperty + (testImportant ? ":green!important;" : ":green;"); |
| var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;"); |
| cssStyle.cssText = cssText; |
| testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty); |
| } |
| |
| // The actual tests that utilize the boilerplate & helper methods above |
| test( function () { |
| var cssStyle = document.styleSheets[0].cssRules[0].style; |
| var testProperty = "--var1"; |
| var testElement = document.querySelectorAll("#test1 .testElem")[0]; |
| |
| testCase(cssStyle, testProperty, testElement, false); |
| }, "css rule test"); |
| |
| test( function () { |
| var cssStyle = document.styleSheets[0].cssRules[1].style; |
| var testProperty = "--var2"; |
| var testElement = document.querySelectorAll("#test2 .testElem")[0]; |
| |
| testCase(cssStyle, testProperty, testElement, true); |
| }, "css rule test important"); |
| |
| test( function () { |
| var element = document.getElementById("test3"); |
| var cssStyle = element.style; |
| var testProperty = "--var3"; |
| var testElement = document.querySelectorAll("#test3 .testElem")[0]; |
| |
| testCase(cssStyle, testProperty, testElement, false); |
| }, "inline style test"); |
| |
| test( function () { |
| var element = document.getElementById("test4"); |
| var cssStyle = element.style; |
| var testProperty = "--var4"; |
| var testElement = document.querySelectorAll("#test4 .testElem")[0]; |
| |
| testCase(cssStyle, testProperty, testElement, true); |
| }, "inline style test important"); |
| </script> |
| </body> |
| </html> |
