tor-browser

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

dynamic-grid-flex-abspos.html (2226B)

      1 <!DOCTYPE html>
      2 <title>grid items and abspos flex children</title>
      3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" />
      4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-overview" title="Note at bottom of this section: 'the size of a grid item which is stretched is also considered definite.'">
      6 <link rel="bookmark" href="https://crbug.com/1091588" />
      7 <link rel="bookmark" href="https://crbug.com/1018439" />
      8 
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/resources/check-layout-th.js"></script>
     12 
     13 <style>
     14 .grid {
     15  display: grid;
     16 }
     17 
     18 .flexbox {
     19  display: flex;
     20 }
     21 
     22 .relpos {
     23  position: relative;
     24 }
     25 
     26 .abspos {
     27  position: absolute;
     28  border: 1px solid;
     29 }
     30 
     31 /* These are just for making the test look better. */
     32 p {
     33  margin: 0px;
     34 }
     35 p + div {
     36  margin-bottom: 40px;
     37 }
     38 </style>
     39 
     40 <p>This crashed Chrome 84.</p>
     41 <div class=grid>
     42  <div class="relpos flexbox" data-expected-height=20>
     43    <div class=abspos>Test</div>
     44    <div style="height: 20px;"></div>
     45  </div>
     46 </div>
     47 
     48 <p>Outer is a regular div.</p>
     49 <div>
     50  <div class="relpos flexbox" data-expected-height=20>
     51    <div class=abspos>Test</div>
     52    <div style="height: 20px;"></div>
     53  </div>
     54 </div>
     55 
     56 <p>relpos element is a regular div, not flexbox.</p>
     57 <div class=grid>
     58  <div class="relpos" data-expected-height=20>
     59    <div class=abspos>Test</div>
     60    <div style="height: 20px;"></div>
     61  </div>
     62 </div>
     63 
     64 <p>Relpos flexbox has a % height descendant. The height of the flexbox grid item is supposed to be definite, allowing the %height flex item to resolve.
     65 
     66 This fails in chrome because of https://crbug.com/1018439</p>
     67 <div class=grid>
     68  <div class="relpos flexbox" data-expected-height=20>
     69    <div class=abspos>Test</div>
     70    <div style="height: 20px;"></div>
     71    <div style="height: 50%" data-expected-height=10></div>
     72  </div>
     73 </div>
     74 
     75 <script>
     76  checkLayout('.relpos');
     77  // Changing the abspos border shouldn't change the size of any inflow element.
     78  for (abspos of document.querySelectorAll(".abspos")) {
     79    abspos.style.borderWidth = "10px";
     80  }
     81  checkLayout('.relpos');
     82 </script>