tor-browser

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

grid-find-fr-size-gutters-001.html (9158B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid/#gutters">
      6 <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
      7 <meta name="assert" content="This test checks that the size of flexible tracks is properly computed when you have gaps (with and without spanning items).">
      8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      9 <style>
     10 .grid {
     11  position: relative;
     12  display: grid;
     13  grid-gap: 10px 20px;
     14  font: 10px/1 Ahem;
     15  margin: 50px;
     16 }
     17 
     18 .fixedSize {
     19  width: 200px;
     20  height: 100px;
     21 }
     22 
     23 .contentBasedSize {
     24  float: left;
     25  height: auto;
     26 }
     27 
     28 .grid div:nth-child(1) { background: magenta; }
     29 .grid div:nth-child(2) { background: cyan; }
     30 .grid div:nth-child(3) { background: yellow; }
     31 .grid div:nth-child(4) { background: lime; }
     32 </style>
     33 <script src="/resources/testharness.js"></script>
     34 <script src="/resources/testharnessreport.js"></script>
     35 <script src="/resources/check-layout-th.js"></script>
     36 <script type="text/javascript">
     37  setup({ explicit_done: true });
     38 </script>
     39 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     40 
     41 <div id="log"></div>
     42 
     43 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     44  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     45  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
     46  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
     47  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
     48 </div>
     49 
     50 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     51  <div style="grid-column: span 2;"
     52    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
     53  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
     54  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
     55 </div>
     56 
     57 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     58  <div style="grid-column: 1; grid-row: 1;"
     59    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     60  <div style="grid-column: 2; grid-row: 1;"
     61    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
     62  <div style="grid-column: span 2;"
     63    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40"></div>
     64 </div>
     65 
     66 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     67  <div style="grid-row: span 2;"
     68    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
     69  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
     70  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
     71 </div>
     72 
     73 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     74  <div style="grid-column: 1; grid-row: 1;"
     75    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     76  <div style="grid-column: 1; grid-row: 2;"
     77    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
     78  <div style="grid-row: span 2;"
     79    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100"></div>
     80 </div>
     81 
     82 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
     83  <div style="grid-row: span 2; grid-column: span 2;"
     84    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
     85 </div>
     86 
     87 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
     88  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     89  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
     90  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
     91  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
     92 </div>
     93 
     94 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
     95  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     96  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
     97  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
     98  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX<br>X<br>X<br>X</div>
     99 </div>
    100 
    101 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    102  <div style="grid-column: span 2;"
    103    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
    104  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
    105  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX</div>
    106 </div>
    107 
    108 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    109  <div style="grid-column: span 2;"
    110    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">XXXXXXXXXXXXXXXXXXXX</div>
    111  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
    112  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
    113 </div>
    114 
    115 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    116  <div style="grid-column: 1; grid-row: 1;"
    117    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    118  <div style="grid-column: 2; grid-row: 1;"
    119    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
    120  <div style="grid-column: span 2;"
    121    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">X<br>X<br>X<br>X</div>
    122 </div>
    123 
    124 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    125  <div style="grid-column: 1; grid-row: 1;"
    126    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    127  <div style="grid-column: 2; grid-row: 1;"
    128    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
    129  <div style="grid-column: span 2;"
    130    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X</div>
    131 </div>
    132 
    133 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    134  <div style="grid-row: span 2;"
    135    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
    136  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
    137  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">X<br>X<br>X<br>X</div>
    138 </div>
    139 
    140 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    141  <div style="grid-row: span 2;"
    142    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
    143  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
    144  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
    145 </div>
    146 
    147 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    148  <div style="grid-column: 1; grid-row: 1;"
    149    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    150  <div style="grid-column: 1; grid-row: 2;"
    151    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
    152  <div style="grid-row: span 2;"
    153    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX</div>
    154 </div>
    155 
    156 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    157  <div style="grid-column: 1; grid-row: 1;"
    158    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    159  <div style="grid-column: 1; grid-row: 2;"
    160    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
    161  <div style="grid-row: span 2;"
    162    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
    163 </div>
    164 
    165 <div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
    166  <div style="grid-row: span 2; grid-column: span 2;"
    167       data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
    168 XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
    169 </div>