tor-browser

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

block-height-004.html (2734B)

      1 <!DOCTYPE html>
      2 <link rel="help"
      3  href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
      4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044">
      5 <script src='/resources/testharness.js'></script>
      6 <script src='/resources/testharnessreport.js'></script>
      7 <script src="/resources/check-layout-th.js"></script>
      8 <meta name="assert"
      9  content="margins of the stretched element are accounted for correctly in a variety of scenarios, mostly around siblings">
     10 
     11 <style>
     12  .outer {
     13    width: 100px;
     14    height: 100px;
     15    outline: solid;
     16    position: relative;
     17  }
     18 
     19  .inner {
     20    height: stretch;
     21    margin: 10px;
     22  }
     23 </style>
     24 
     25 <h2>These tests assert the behavior described at
     26  https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601
     27 </h2>
     28 
     29 <p>Basic case: treat margins as 0.</p>
     30 <div class="outer">
     31  <div class="inner" style="border: solid magenta;" data-expected-height="100"
     32    data-offset-y="0">
     33  </div>
     34 </div>
     35 
     36 <p>
     37  When resolving stretch treat both block margins as 0 because the parent is
     38  not a BFC and has no top or bottom content edge (i.e. border + padding = 0).
     39  <br>But cyan's margins will not actually collapse through its IFC-siblings so
     40  there is overflow:
     41 </p>
     42 <div class="outer">
     43  <div style="overflow: hidden"></div>
     44  <div class="inner" style="border: solid cyan;" data-expected-height="100"
     45    data-offset-y="10">
     46  </div>
     47  <div style="overflow: hidden"></div>
     48 </div>
     49 
     50 <div class="outer">
     51  <div></div>
     52  <div class="inner" style="border: solid blue;" data-expected-height="100"
     53    data-offset-y="0">
     54  </div>
     55  <div></div>
     56 </div>
     57 
     58 <div class="outer">
     59  <div></div>
     60  <div class="inner" style="border: solid purple;" data-expected-height="100"
     61    data-offset-y="0">
     62  </div>
     63 </div>
     64 
     65 <div class="outer">
     66  <div class="inner" style="border: solid lime;" data-expected-height="100"
     67    data-offset-y="0">
     68  </div>
     69  <div></div>
     70 </div>
     71 
     72 <p>Parent has non-zero bottom border, so only top margin is treated as 0:</p>
     73 <div class="outer" style="border-bottom: 5px dashed blue;">
     74  <div class="inner" style="border: solid brown;" data-expected-height="90"
     75    data-offset-y="0">
     76  </div>
     77 </div>
     78 
     79 <p>Parent has non-zero top padding so only bottom margin is treated as 0:</p>
     80 <div class="outer" style="padding-top: 5px;">
     81  <div class="inner" style="border: solid darkgreen;" data-expected-height="90"
     82    data-offset-y="15"> <!-- 15 = 10px top margin + parent's padding-->
     83  </div>
     84 </div>
     85 
     86 <p>Account for the margins when parent establishes a BFC.</p>
     87 <div class="outer" style="display: flow-root;">
     88  <div class="inner" style="border: solid orange;" data-expected-height="80"
     89    data-offset-y="10">
     90  </div>
     91  <div></div>
     92 </div>
     93 
     94 <script>checkLayout(".inner");</script>