tor-browser

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

flex-direction-column-overlap-001.html (1345B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>CSS Flexbox: vertical overlap with flex-direction: column.</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
      5 <link rel="help" href="https://crbug.com/669714"/>
      6 <meta name="assert" content="This test ensures that no unnecessary vertical overlap happens between an inline flex item and a block element inside a nested flexbox with 'flex-direction: column'."/>
      7 
      8 <style>
      9 html {
     10  line-height: 1;
     11  font-size: 18px;
     12 }
     13 
     14 .flex {
     15  flex: 1;
     16  min-height: 0;
     17 }
     18 
     19 .layout-column, .layout-row {
     20  display: flex;
     21 }
     22 
     23 .layout-column {
     24  flex-direction: column;
     25 }
     26 
     27 #relpos {
     28  position: relative;
     29  top: 1px;
     30 }
     31 </style>
     32 
     33 <script src="/resources/testharness.js"></script>
     34 <script src="/resources/testharnessreport.js"></script>
     35 <script src="/resources/check-layout-th.js"></script>
     36 
     37 <body>
     38 
     39 <p>XXX and YYY should be on separate lines and not overlap, i.e. the height of .flex should not be 0.</p>
     40 
     41 <div class="layout-column" id="container">
     42    <div class="layout-row">
     43      <div class="layout-column">
     44        <div class="flex" data-expected-height="18">XXX<span id="relpos"></span></div>
     45        <div>YYY</div>
     46      </div>
     47    </div>
     48 </div>
     49 
     50 <script>
     51 document.body.offsetHeight;
     52 document.getElementById("relpos").innerText = " ";
     53 checkLayout("#container");
     54 </script>
     55 </body>
     56 </html>