tor-browser

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

variable-definition-keywords.html (3032B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>CSS Variable definitions and keywords</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    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
     10 
     11    <script src="/resources/testharness.js"></script>
     12    <script src="/resources/testharnessreport.js"></script>
     13    <style>
     14        /* Specify a value in a rule hitting keyword targets so that the keywords
     15           have something to override in the cascade. */
     16        div > div
     17        {
     18            --var: 10px;
     19        }
     20    </style>
     21 </head>
     22 <body>
     23 
     24    <div id="inheritParent" style="--var: 20px;">
     25        <div id="inheritTest" style="--var: inherit;"></div>
     26    </div>
     27 
     28    <div id="initialParent" style="--var: 20px;">
     29        <div id="initialTest" style="--var: initial;"></div>
     30    </div>
     31 
     32    <div id="unsetParent" style="--var: 20px;">
     33        <div id="unsetTest" style="--var: unset;"></div>
     34    </div>
     35 
     36    <div id="revertParent" style="--var: 20px;">
     37        <div id="revertTest" style="--var: revert;"></div>
     38    </div>
     39 
     40    <script type="text/javascript">
     41        "use strict";
     42 
     43        let computedStyle = [
     44            { elementId: "inheritTest", property: "--var", expectedValue: "20px", testName: "computed style inherit" },
     45            { elementId: "initialTest", property: "--var", expectedValue: "", testName: "computed style initial" },
     46            { elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" },
     47            { elementId: "revertTest", property: "--var", expectedValue: "20px", testName: "computed style revert" }
     48        ];
     49 
     50        let specifiedStyle = [
     51            { elementId: "inheritTest", property: "--var", expectedValue: "inherit", testName: "specified style inherit" },
     52            { elementId: "initialTest", property: "--var", expectedValue: "initial", testName: "specified style initial" },
     53            { elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" },
     54            { elementId: "revertTest", property: "--var", expectedValue: "revert", testName: "specified style revert" }
     55        ];
     56 
     57        computedStyle.forEach(function (csTest) {
     58            test( function () {
     59                var elem = document.getElementById(csTest.elementId);
     60                var actualValue = window.getComputedStyle(elem).getPropertyValue(csTest.property).trim();
     61                assert_equals(csTest.expectedValue, actualValue);
     62            }, csTest.testName);
     63        });
     64 
     65        specifiedStyle.forEach(function (ssTest) {
     66            test( function () {
     67                var elem = document.getElementById(ssTest.elementId);
     68                var actualValue = elem.style.getPropertyValue(ssTest.property);
     69                assert_equals(ssTest.expectedValue, actualValue);
     70            }, ssTest.testName);
     71        });
     72    </script>
     73 </body>
     74 </html>