tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

variable-invalidation.html (5094B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>Tests css variable invalidation</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    <style>
     15        #test1 {
     16            --var1:red;
     17        }
     18        #test2 {
     19            --var2:red!important;
     20        }
     21    </style>
     22 </head>
     23 <body>
     24    <div id="test1"><div><div><div class="testElem"></div></div></div></div>
     25    <div id="test2"><div><div><div class="testElem"></div></div></div></div>
     26    <div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div>
     27    <div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div>
     28 
     29    <script type="text/javascript">
     30        "use strict";
     31 
     32        // This is a helper function to avoid repitition
     33        function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) {
     34            assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + ".");
     35            assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + ".");
     36            assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + ".");
     37            assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + ".");
     38            assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + ".");
     39 
     40            var computedStyle = window.getComputedStyle(testElement);
     41            assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + ".");
     42        }
     43 
     44        // This is a boilerplate to build a testcase and then test the expected outcome
     45        function testCase(cssStyle, testProperty, testElement, testImportant) {
     46            var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;");
     47 
     48            testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty);
     49 
     50            cssStyle.setProperty(testProperty, "blue");
     51 
     52            if (!testImportant) {
     53                testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty);
     54            }
     55 
     56            if (testProperty) {
     57                cssStyle.setProperty(testProperty, "pink", 'important');
     58                testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty);
     59            }
     60 
     61            cssStyle.removeProperty(testProperty);
     62            testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, "");
     63 
     64            var cssText = testProperty + (testImportant ? ":green!important;" : ":green;");
     65            var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;");
     66            cssStyle.cssText = cssText;
     67            testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty);
     68        }
     69 
     70        // The actual tests that utilize the boilerplate & helper methods above
     71        test( function () {
     72            var cssStyle = document.styleSheets[0].cssRules[0].style;
     73            var testProperty = "--var1";
     74            var testElement = document.querySelectorAll("#test1 .testElem")[0];
     75 
     76            testCase(cssStyle, testProperty, testElement, false);
     77        }, "css rule test");
     78 
     79        test( function () {
     80            var cssStyle = document.styleSheets[0].cssRules[1].style;
     81            var testProperty = "--var2";
     82            var testElement = document.querySelectorAll("#test2 .testElem")[0];
     83 
     84            testCase(cssStyle, testProperty, testElement, true);
     85        }, "css rule test important");
     86 
     87        test( function () {
     88            var element = document.getElementById("test3");
     89            var cssStyle = element.style;
     90            var testProperty = "--var3";
     91            var testElement = document.querySelectorAll("#test3 .testElem")[0];
     92 
     93            testCase(cssStyle, testProperty, testElement, false);
     94        }, "inline style test");
     95 
     96        test( function () {
     97            var element = document.getElementById("test4");
     98            var cssStyle = element.style;
     99            var testProperty = "--var4";
    100            var testElement = document.querySelectorAll("#test4 .testElem")[0];
    101 
    102            testCase(cssStyle, testProperty, testElement, true);
    103        }, "inline style test important");
    104    </script>
    105 </body>
    106 </html>