tor-browser

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

scroll-marker-group-005.html (1369B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: scroll-marker-group dynamic change</title>
      4 <link rel="match" href="scroll-marker-group-005-ref.html">
      5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo">
      6 <style>
      7  div.scroll-marker-group-before {
      8    overflow: auto;
      9    scroll-marker-group: before;
     10  }
     11 
     12  div.scroll-marker-group-after {
     13    overflow: auto;
     14    scroll-marker-group: after;
     15  }
     16 
     17  div::before {
     18    background: red;
     19    content: "";
     20    border-radius: 50%;
     21    display: flex;
     22    height: 30px;
     23    width: 30px;
     24  }
     25 
     26  div::after {
     27    background: yellow;
     28    content: "";
     29    border-radius: 50%;
     30    display: flex;
     31    height: 30px;
     32    width: 30px;
     33  }
     34 
     35  div::scroll-marker-group {
     36    background: green;
     37    border-radius: 50%;
     38    display: flex;
     39    height: 30px;
     40    width: 30px;
     41  }
     42 </style>
     43 <p>Test passes if there are <strong>three circles filled red, yellow, green</strong>.
     44 <div id="target"></div>
     45 <script>
     46  document.documentElement.offsetTop;
     47  target.className = "scroll-marker-group-before";
     48  document.documentElement.offsetTop;
     49  target.className = "scroll-marker-group-after";
     50  document.documentElement.offsetTop;
     51  target.className = "";
     52  document.documentElement.offsetTop;
     53  target.className = "scroll-marker-group-before";
     54  target.className = "scroll-marker-group-after";
     55 </script>