tor-browser

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

scroll-buttons-disabled-rtl.html (1204B)

      1 <!doctype html>
      2 <title>CSS Test: ::scroll-button(inline-end) supports :disabled with rtl direction</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons">
      4 <link rel="match" href="scroll-buttons-disabled-rtl-ref.html">
      5 <style>
      6  * {
      7    margin: 0;
      8    padding: 0;
      9  }
     10 
     11  #scroller {
     12    width: 600px;
     13    height: 300px;
     14    overflow: auto;
     15    scroll-marker-group: after;
     16    white-space: nowrap;
     17    direction: rtl;
     18  }
     19 
     20  #scroller div {
     21    background: green;
     22    display: inline-block;
     23    width: 600px;
     24    height: 270px;
     25  }
     26 
     27  #scroller::scroll-marker-group {
     28    border: 3px solid black;
     29    padding: 5px;
     30    display: flex;
     31    height: 20px;
     32    width: 40px;
     33  }
     34 
     35  #scroller::scroll-button(inline-end) {
     36    content: ">";
     37    background: blue;
     38    display: flex;
     39    height: 20px;
     40    width: 20px;
     41  }
     42 
     43  #scroller::scroll-button(inline-end):disabled {
     44    background: gray;
     45  }
     46 
     47  #scroller div::scroll-marker {
     48    content: "";
     49    width: 10px;
     50    height: 10px;
     51    background-color: blue;
     52    border-radius: 100%;
     53    display: inline-block;
     54  }
     55 </style>
     56 <div id="scroller">
     57  <div></div>
     58  <div></div>
     59 </div>
     60 <script>
     61  scroller.scrollLeft = -610;
     62 </script>