tor-browser

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

scroll-marker-group-add-dynamic-004.html (1067B)

      1 <!DOCTYPE html>
      2 <title>Re-attach fieldset ::scroll-marker-group</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo">
      4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
      5 <style>
      6  fieldset,
      7  legend {
      8    margin: 0;
      9    border: 0;
     10    padding: 0;
     11  }
     12 
     13  #scrollable::scroll-marker-group {
     14    display: block;
     15    height: 50px;
     16  }
     17 
     18  #scrollable.extra::scroll-marker-group {
     19    display: flex;
     20  }
     21 
     22  #scrollable>div::scroll-marker {
     23    display: block;
     24    width: 50px;
     25    height: 50px;
     26    content: "";
     27    background: green;
     28  }
     29 </style>
     30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     31 <div style="width:100px; height:100px; background:red;">
     32  <fieldset id="scrollable" style="scroll-marker-group:after; height:50px; overflow:hidden; background:green;">
     33    <legend style="width:100px; height:20px; background:green;"></legend>
     34    <div></div>
     35    <div></div>
     36  </fieldset>
     37 </div>
     38 <script>
     39  document.body.offsetTop;
     40  scrollable.className = "extra";
     41 </script>