tor-browser

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

scrollbar-gutter-dynamic-002.html (3019B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3  <meta charset="utf-8">
      4  <title>CSS Overflow: test scrollbar-gutter dynamic update</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-002-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 
     19    block-size: 200px;
     20    inline-size: 200px;
     21    margin: 10px;
     22    background: deepskyblue;
     23  }
     24 
     25  .content {
     26    inline-size: 100%;
     27    block-size: 200%;
     28    background: lightsalmon;
     29  }
     30  </style>
     31 
     32  <div class="line">
     33    <div id="auto-auto" class="container" style="overflow-y: auto; scrollbar-gutter: auto">
     34      <div class="content"></div>
     35    </div>
     36 
     37    <div id="scroll-auto" class="container" style="overflow-y: scroll; scrollbar-gutter: auto">
     38      <div class="content"></div>
     39    </div>
     40 
     41    <div id="hidden-auto" class="container" style="overflow-y: hidden; scrollbar-gutter: auto">
     42      <div class="content"></div>
     43    </div>
     44  </div>
     45 
     46  <div class="line">
     47    <div id="auto-stable" class="container" style="overflow-y: auto; scrollbar-gutter: stable">
     48      <div class="content"></div>
     49    </div>
     50 
     51    <div id="scroll-stable" class="container" style="overflow-y: scroll; scrollbar-gutter: stable">
     52      <div class="content"></div>
     53    </div>
     54 
     55    <div id="hidden-stable" class="container" style="overflow-y: hidden; scrollbar-gutter: stable">
     56      <div class="content"></div>
     57    </div>
     58  </div>
     59 
     60  <div class="line">
     61    <div id="auto-stable-both" class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges">
     62      <div class="content"></div>
     63    </div>
     64 
     65    <div id="scroll-stable-both" class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges">
     66      <div class="content"></div>
     67    </div>
     68 
     69    <div id="hidden-stable-both" class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges">
     70      <div class="content"></div>
     71    </div>
     72  </div>
     73 <script>
     74  requestAnimationFrame(() => requestAnimationFrame(() => {
     75    document.getElementById('auto-auto').style.scrollbarGutter = 'stable both-edges';
     76    document.getElementById('scroll-auto').style.scrollbarGutter = 'stable both-edges';
     77    document.getElementById('hidden-auto').style.scrollbarGutter = 'stable both-edges';
     78    document.getElementById('auto-stable').style.scrollbarGutter = 'auto';
     79    document.getElementById('scroll-stable').style.scrollbarGutter = 'auto';
     80    document.getElementById('hidden-stable').style.scrollbarGutter = 'auto';
     81    document.getElementById('auto-stable-both').style.scrollbarGutter = 'stable';
     82    document.getElementById('scroll-stable-both').style.scrollbarGutter = 'stable';
     83    document.getElementById('hidden-stable-both').style.scrollbarGutter = 'stable';
     84    takeScreenshot();
     85  }));
     86 </script>
     87 </html>