tor-browser

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

variable-pseudo-element.html (1989B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>Variables work in ::before/::after pseudos</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="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
     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 
     15    <style>
     16        :root {
     17            --color: green;
     18            --color2: red;
     19        }
     20        div::before {
     21            content: '[before]';
     22        }
     23        div::after {
     24            content: '[after]';
     25        }
     26 
     27        #div1 {
     28            color: red;
     29        }
     30        #div1::before, #div1::after {
     31            color: var(--color2);
     32            --color2: green;
     33        }
     34 
     35        #div2 {
     36            color: var(--color2);
     37        }
     38        #div2::before, #div2::after {
     39            color: var(--color);
     40        }
     41 
     42        #div3 {
     43            color: var(--color);
     44        }
     45        #div3::before, #div3::after {
     46            --color: red;
     47        }
     48    </style>
     49 
     50    <div id="div1">div1</div>
     51    <div id="div2">div2</div>
     52    <div id="div3">div3</div>
     53    <span id="control" style="color: green;"></span>
     54 
     55 <script>
     56    "use strict";
     57 
     58    [...document.querySelectorAll("div")].forEach(function (div) {
     59        test( function () {
     60            const expectedColor = getComputedStyle(document.querySelector("#control")).color;
     61            var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
     62            var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
     63            assert_equals(actualBeforeColor, expectedColor);
     64            assert_equals(actualAfterColor, expectedColor);
     65        }, div.getAttribute("id"));
     66    });
     67 </script>
     68 
     69 </body>
     70 </html>