tor-browser

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

scroll-markers-under-content-visibility-auto-ref.html (1268B)


      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>::scroll-markers with content-visibility: auto ancestors ref</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <style>
      7  #scroller {
      8    width: 600px;
      9    height: 300px;
     10    overflow: scroll;
     11    scroll-marker-group: after;
     12  }
     13 
     14  #scroller div {
     15    width: 600px;
     16    height: 300px;
     17    margin-bottom: 20px;
     18    background: green;
     19  }
     20 
     21  #scroller::scroll-marker-group {
     22    border: 3px solid black;
     23    padding: 5px;
     24    height: 20px;
     25    display: block;
     26  }
     27 
     28  #scroller div::scroll-marker {
     29    content: "";
     30    width: 10px;
     31    height: 10px;
     32    background-color: blue;
     33    border-radius: 50%;
     34    display: inline-block;
     35  }
     36 </style>
     37 <div id="scroller">
     38  <div></div> <div></div> <div></div>
     39  <div></div> <div></div> <div></div>
     40  <div></div> <div></div> <div></div>
     41  <div></div> <div></div> <div></div>
     42  <div></div> <div></div> <div></div>
     43  <div></div> <div></div> <div></div>
     44  <div></div> <div></div> <div></div>
     45  <div></div> <div></div> <div></div>
     46  <div></div> <div></div> <div></div>
     47  <div></div> <div></div> <div></div>
     48  <div></div> <div></div> <div></div>
     49  <div></div> <div></div> <div></div>
     50 </div>