tor-browser

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

scrollable-overflow-transform-009.html (2148B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Overflow: Scrollable Overflow Transform Unreachable Scrollable Overflow</title>
      4 <link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
      6 <meta name="assert" content="Checks that the box in unreachable scrollable overflow region with transform is not included in the calculation.">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/resources/check-layout-th.js"></script>
     10 <style>
     11  .container {
     12    width: 100px;
     13    height: 100px;
     14    overflow: scroll;
     15    background: silver;
     16    border: solid thick;
     17    scrollbar-width: none;
     18  }
     19 
     20  .relative {
     21    position: relative;
     22  }
     23 
     24  .absolute {
     25    position: absolute;
     26  }
     27 
     28  .element {
     29    width: 100px;
     30    height: 100px;
     31    background: lime;
     32  }
     33 </style>
     34 <body onload="checkLayout('.container')">
     35  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
     36    <div style="transform: translate(-300px, -300px);" class="element">
     37    </div>
     38  </div>
     39 
     40  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
     41    <div style="transform: translate(300px, -300px);" class="element">
     42    </div>
     43  </div>
     44 
     45  <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100">
     46    <div style="transform: translate(-300px, 300px);" class="element">
     47    </div>
     48  </div>
     49 
     50  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
     51    <div style="transform: translate(-300px, -300px);" class="element absolute">
     52    </div>
     53  </div>
     54 
     55  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
     56    <div style="transform: translate(300px, -300px);" class="element absolute">
     57    </div>
     58  </div>
     59 
     60  <div class="container relative" data-expected-scroll-width="100" data-expected-scroll-height="100">
     61    <div style="transform: translate(-300px, 300px);" class="element absolute">
     62    </div>
     63  </div>
     64 
     65 </body>