tor-browser

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

flex-outer-flexbox-column-recalculate-height-on-resize-001.html (2290B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>CSS Flexbox: height resizing 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/527039">
      6 <meta name="assert" content="This test checks that resizing the height of a layout with two nested flexboxes using 'flex-direction: column' correctly recalculates the outer box's height." />
      7 
      8 <style>
      9 body,
     10 html {
     11  height: 100%;
     12 }
     13 
     14 .OuterFlexbox {
     15  display: flex;
     16  flex-direction: column;
     17  height: 100%;
     18 }
     19 
     20 .InnerFlexbox {
     21  display: flex;
     22  flex-direction: column;
     23  max-height: 100%;
     24  outline: 1px blue solid;
     25 }
     26 
     27 .InnerFlexbox-body {
     28  flex: 1 1 auto;
     29  overflow-y: hidden;
     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 onload="update()">
     38 
     39 <div class="OuterFlexbox" data-expected-height="250">
     40  <div class="InnerFlexbox" data-expected-height="250">
     41       <div class="InnerFlexbox-body" data-expected-height="250">
     42         <ul>
     43           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     44           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     45           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     46           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     47           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     48           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     49           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     50           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     51           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     52           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     53           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     54           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     55           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     56           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     57           <li>Suspendisse eu nunc lectus. Curabitur.</li>
     58         </ul>
     59       </div>
     60  </div>
     61 </div>
     62 
     63 <script>
     64 function update() {
     65  document.body.offsetHeight;
     66  document.body.style.height = '50px';
     67  document.body.offsetHeight;
     68  document.body.style.height = '250px';
     69  document.body.offsetHeight;
     70  checkLayout('.OuterFlexbox');
     71 }
     72 </script>
     73 </body>
     74 </html>