tor-browser

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

scrollbar-gutter-dynamic-003.html (2366B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3  <meta charset="utf-8">
      4  <title>CSS Overflow: test scrollbar-gutter when dynamically update scrollbar-width</title>
      5  <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
      6  <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
      7  <link rel="match" href="scrollbar-gutter-dynamic-003-ref.html">
      8  <script src="/common/reftest-wait.js"></script>
      9 
     10  <style>
     11  .line {
     12    display: flex;
     13  }
     14 
     15  .container {
     16    writing-mode: horizontal-tb;
     17    direction: ltr;
     18    block-size: 200px;
     19    inline-size: 200px;
     20    overflow: hidden;
     21    margin: 10px;
     22    background: deepskyblue;
     23  }
     24 
     25  .content {
     26    inline-size: 100%;
     27    block-size: 200%;
     28    background: lightsalmon;
     29  }
     30 
     31  .width-auto {
     32    scrollbar-width: auto;
     33  }
     34 
     35  .width-thin {
     36    scrollbar-width: thin;
     37  }
     38 
     39  .width-none {
     40    scrollbar-width: none;
     41  }
     42 
     43  .gutter-stable {
     44    scrollbar-gutter: stable;
     45  }
     46 
     47  .gutter-both {
     48    scrollbar-gutter: stable both-edges;
     49  }
     50  </style>
     51 
     52  <div class="line">
     53    <div id="stable-auto" class="container gutter-stable width-auto">
     54      <div class="content"></div>
     55    </div>
     56    <div id="both-auto" class="container gutter-both width-auto">
     57      <div class="content"></div>
     58    </div>
     59  </div>
     60 
     61  <div class="line">
     62    <div id="stable-thin" class="container gutter-stable width-thin">
     63      <div class="content"></div>
     64    </div>
     65    <div id="both-thin" class="container gutter-both width-thin">
     66      <div class="content"></div>
     67    </div>
     68  </div>
     69 
     70  <div class="line">
     71    <div id="stable-none" class="container gutter-stable width-none">
     72      <div class="content"></div>
     73    </div>
     74    <div id="both-none" class="container gutter-both width-none">
     75      <div class="content"></div>
     76    </div>
     77  </div>
     78 <script>
     79  requestAnimationFrame(() => requestAnimationFrame(() => {
     80    document.getElementById('stable-auto').style.scrollbarWidth = 'none';
     81    document.getElementById('both-auto').style.scrollbarWidth = 'none';
     82    document.getElementById('stable-thin').style.scrollbarWidth = 'auto';
     83    document.getElementById('both-thin').style.scrollbarWidth = 'auto';
     84    document.getElementById('stable-none').style.scrollbarWidth = 'thin';
     85    document.getElementById('both-none').style.scrollbarWidth = 'thin';
     86    takeScreenshot();
     87  }));
     88 </script>
     89 </html>