tor-browser

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

scrollable-overflow-transform-007.html (1349B)


      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Overflow: Scrollable Overflow Transform Scale</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 bounding rectangle of scaled element is included correctly in scrollable overflow.">
      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  .element {
     21    width: 200px;
     22    height: 200px;
     23    background: lime;
     24  }
     25 
     26  .element-2 {
     27    width: 200px;
     28    height: 200px;
     29    background: aqua;
     30  }
     31 </style>
     32 <body onload="checkLayout('.container')">
     33 
     34  <div class="container" data-expected-scroll-width="300" data-expected-scroll-height="300">
     35    <div style="transform: scale(2);" class="element">
     36    </div>
     37  </div>
     38 
     39  <div class="container" data-expected-scroll-height="250" data-expected-scroll-height="250">
     40    <div style="transform: scale(0.5);" class="element">
     41      <div style="transform: scale(3);" class="element-2">
     42      </div>
     43    </div>
     44  </div>
     45 
     46 </body>