tor-browser

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

grid-item-flex-container-001.html (3338B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid item which is also a flex container</title>
      4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
      5 <link rel="help" href="http://www.w3.org/TR/css-grid-1">
      6 <meta name="assert" content="Checks that the grid is updated when the contents of the grid item flex container change their size dynamically.">
      7 <style>
      8 .grid {
      9  display: grid;
     10  width: 100px;
     11  background: cyan;
     12 }
     13 .flex {
     14  display: flex;
     15  min-height: 0;
     16  height: 100%;
     17 }
     18 .height200 {
     19  height: 200px;
     20 }
     21 .height100 {
     22  height: 100px;
     23 }
     24 </style>
     25 <script src="/resources/testharness.js"></script>
     26 <script src="/resources/testharnessreport.js"></script>
     27 <script src="/resources/check-layout-th.js"></script>
     28 
     29 <div id="log"></div>
     30 
     31 <pre>grid-template-rows: minmax(auto, auto);</pre>
     32 
     33 <div class="grid" style="grid-template-rows: minmax(auto, auto);" data-expected-height="100" >
     34  <div class="flex">
     35    <div>
     36      <div class="height200"></div>
     37    </div>
     38  </div>
     39 </div>
     40 
     41 <pre>grid-template-rows: minmax(min-content, auto);</pre>
     42 
     43 <div class="grid" style="grid-template-rows: minmax(min-content, auto);" data-expected-height="100">
     44  <div class="flex">
     45    <div>
     46      <div class="height200"></div>
     47    </div>
     48  </div>
     49 </div>
     50 
     51 <pre>grid-template-rows: minmax(max-content, auto);</pre>
     52 
     53 <div class="grid" style="grid-template-rows: minmax(max-content, auto);" data-expected-height="100">
     54  <div class="flex">
     55    <div>
     56      <div class="height200"></div>
     57    </div>
     58  </div>
     59 </div>
     60 
     61 <pre>grid-template-rows: minmax(auto, min-content);</pre>
     62 
     63 <div class="grid" style="grid-template-rows: minmax(auto, min-content);" data-expected-height="100">
     64  <div class="flex">
     65    <div>
     66      <div class="height200"></div>
     67    </div>
     68  </div>
     69 </div>
     70 
     71 <pre>grid-template-rows: minmax(min-content, min-content);</pre>
     72 
     73 <div class="grid" style="grid-template-rows: minmax(min-content, min-content);" data-expected-height="100">
     74  <div class="flex">
     75    <div>
     76      <div class="height200"></div>
     77    </div>
     78  </div>
     79 </div>
     80 
     81 <pre>grid-template-rows: minmax(max-content, min-content);</pre>
     82 
     83 <div class="grid" style="grid-template-rows: minmax(max-content, min-content);" data-expected-height="100">
     84  <div class="flex">
     85    <div>
     86      <div class="height200"></div>
     87    </div>
     88  </div>
     89 </div>
     90 
     91 <pre>grid-template-rows: minmax(auto, max-content);</pre>
     92 
     93 <div class="grid" style="grid-template-rows: minmax(auto, max-content);" data-expected-height="100">
     94  <div class="flex">
     95    <div>
     96      <div class="height200"></div>
     97    </div>
     98  </div>
     99 </div>
    100 
    101 <pre>grid-template-rows: minmax(min-content, max-content);</pre>
    102 
    103 <div class="grid" style="grid-template-rows: minmax(min-content, max-content);" data-expected-height="100">
    104  <div class="flex">
    105    <div>
    106      <div class="height200"></div>
    107    </div>
    108  </div>
    109 </div>
    110 
    111 <pre>grid-template-rows: minmax(max-content, max-content);</pre>
    112 
    113 <div class="grid" style="grid-template-rows: minmax(max-content, max-content);" data-expected-height="100">
    114  <div class="flex">
    115    <div>
    116      <div class="height200"></div>
    117    </div>
    118  </div>
    119 </div>
    120 
    121 <script>
    122 // Force layout
    123 document.body.offsetLeft;
    124 
    125 // Change content sizes
    126 for (let el of document.querySelectorAll(".height200")) {
    127  el.className = "height100";
    128 }
    129 
    130 // Check final layout
    131 checkLayout('.grid');
    132 </script>