tor-browser

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

scrollbar-gutter-vertical-lr-002-ref.html (2448B)

      1 <!DOCTYPE html>
      2 <html>
      3  <meta charset="utf-8">
      4  <title>CSS Overflow Reference: test scrollbar-gutter with vertical left to right content</title>
      5  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
      6  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
      7 
      8  <style>
      9  .line {
     10    display: flex;
     11  }
     12 
     13  .container {
     14    writing-mode: vertical-lr;
     15 
     16    box-sizing: border-box;
     17    block-size: 200px;
     18    inline-size: 200px;
     19    margin: 10px;
     20    background: deepskyblue;
     21    resize: both;
     22  }
     23 
     24  .content {
     25    inline-size: 100%;
     26    block-size: 200%;
     27    background: lightsalmon;
     28  }
     29  </style>
     30 
     31  <div class="line">
     32    <div class="container" style="overflow-x: auto">
     33      <div class="content"></div>
     34    </div>
     35 
     36    <div class="container" style="overflow-x: scroll" id="container_scroll_stable">
     37      <div class="content" id="content_scroll_stable"></div>
     38    </div>
     39 
     40    <div class="container" style="overflow-x: hidden" id="container_hidden_stable">
     41      <div class="content"></div>
     42    </div>
     43  </div>
     44 
     45  <div class="line">
     46    <div class="container" style="overflow-x: auto;" id="container_auto_stable_both_edges">
     47      <div class="content"></div>
     48    </div>
     49 
     50    <div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges">
     51      <div class="content"></div>
     52    </div>
     53 
     54    <div class="container" style="overflow-x: hidden;" id="container_hidden_stable_both_edges">
     55      <div class="content"></div>
     56    </div>
     57  </div>
     58 
     59  <script>
     60  let container_scroll_stable = document.getElementById("container_scroll_stable");
     61  let content_scroll_stable = document.getElementById("content_scroll_stable");
     62  let hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight);
     63  let hScrollbarHeightStr = hScrollbarHeight + "px";
     64 
     65  // Simulate scrollbar-gutter via padding on containers.
     66  document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr;
     67  document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
     68  document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
     69  document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr;
     70  document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr;
     71  </script>
     72 </html>