tor-browser

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

negative-overflow.html (2599B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>CSS Flexbox: align-items: center/flex-end and bottom padding.</title>
      5 <link rel="stylesheet" href="support/flexbox.css" >
      6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
      7 <meta name="assert" content="This test ensures that flexbox containers with 'align-items: center|flex-end' and 'overflow: auto/scroll' have no extra bottom padding."/>
      8 <style>
      9 .flexbox {
     10    overflow: auto;
     11    height: 50px;
     12    width: 50px;
     13    background-color: red;
     14    position: relative;
     15 }
     16 
     17 .vertical-padding {
     18    padding-top: 5px;
     19    padding-bottom: 10px;
     20    background-color: lime;
     21 }
     22 
     23 .vertical-border {
     24    border-top: 2px solid black;
     25    border-bottom: 8px solid lightblue;
     26 }
     27 
     28 .flexbox > div {
     29    width: 100%;
     30    height: 100px;
     31    background-color: green;
     32 }
     33 </style>
     34 <script src="/resources/testharness.js"></script>
     35 <script src="/resources/testharnessreport.js"></script>
     36 <script src="/resources/check-layout-th.js"></script>
     37 <script>
     38 window.onload = function() {
     39    checkLayout('.flexbox');
     40 
     41    // Make failures more obvious by showing the red background that should have been clipped.
     42    Array.prototype.forEach.call(document.querySelectorAll(".flexbox"), function(element) {
     43        element.scrollTop = 1000;
     44    });
     45 };
     46 </script>
     47 </head>
     48 <body>
     49 <div id=log></div>
     50 
     51 <div class="flexbox align-items-flex-end" data-expected-scroll-height="50">
     52    <div></div>
     53 </div>
     54 
     55 <div class="flexbox align-items-flex-end" data-expected-scroll-height="150">
     56    <div></div>
     57    <div style="position: absolute; left: 0; top: 50px;"></div>
     58 </div>
     59 
     60 <div class="flexbox align-items-center" data-expected-scroll-height="75">
     61    <div></div>
     62 </div>
     63 
     64 <div class="flexbox" data-expected-scroll-height="100">
     65    <div></div>
     66 </div>
     67 
     68 <div class="flexbox wrap-reverse" data-expected-scroll-height="200">
     69    <div></div>
     70    <div></div>
     71 </div>
     72 
     73 <div class="flexbox align-items-flex-end vertical-padding" data-expected-scroll-height="65">
     74    <div></div>
     75 </div>
     76 
     77 <div class="flexbox align-items-flex-end vertical-padding vertical-border" data-expected-scroll-height="65">
     78    <div></div>
     79 </div>
     80 
     81 <div class="flexbox align-items-center vertical-padding" data-expected-scroll-height="90">
     82    <div></div>
     83 </div>
     84 
     85 <div class="flexbox vertical-padding" data-expected-scroll-height="115">
     86    <div></div>
     87 </div>
     88 
     89 <div class="flexbox vertical-padding vertical-border" data-expected-scroll-height="115">
     90    <div></div>
     91 </div>
     92 
     93 <div class="flexbox wrap-reverse vertical-padding" data-expected-scroll-height="215">
     94    <div></div>
     95    <div></div>
     96 </div>
     97 </body>
     98 </html>