diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-variables/variable-invalidation.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-variables/variable-invalidation.html | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-variables/variable-invalidation.html b/testing/web-platform/tests/css/css-variables/variable-invalidation.html new file mode 100644 index 0000000000..677f217c88 --- /dev/null +++ b/testing/web-platform/tests/css/css-variables/variable-invalidation.html @@ -0,0 +1,106 @@ +<!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>
\ No newline at end of file |