tor-browser

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

grid-template-rows-fit-content-001-ref.html (9857B)

      1 <!DOCTYPE html>
      2 <html lang=en>
      3 <meta charset="utf-8">
      4 <title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
      5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      6 <link rel="stylesheet" href="/css/support/grid.css">
      7 <meta name="flags" content="ahem">
      8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      9 <style>
     10 .grid {
     11  justify-content: start;
     12  align-content: start;
     13  height: 100px;
     14  width: 40px;
     15  position: relative;
     16  padding-left: 10px;
     17  margin-right: 5px;
     18  grid-row-gap: 5px;
     19  float: left;
     20 }
     21 
     22 .item {
     23  font: 10px/1 Ahem;
     24  background: cyan;
     25  padding-left: 2px;
     26 }
     27 
     28 .spanningItem {
     29  font: 10px/1 Ahem;
     30  grid-row: 1 / -1;
     31  grid-column: 2;
     32  background: salmon;
     33  padding-left: 2px;
     34 }
     35 
     36 .test {
     37  position: absolute;
     38  left: 0; top: 0; bottom: 0;
     39  width: 5px;
     40  background: purple;
     41 }
     42 .test:nth-child(2n) { background: orange; }
     43 
     44 .firstRow { grid-row: 1 / 2; }
     45 .secondRow { grid-row: 2 / 3; }
     46 .thirdRow { grid-row: 3 / 4; }
     47 
     48 div.grid > div { writing-mode: vertical-lr; }
     49 
     50 </style>
     51 
     52 <p>The test passes if it has the same output than the reference.</p>
     53 
     54 <div class="grid" style="grid-template-rows: 30px;">
     55  <div class="item">XXX</div>
     56  <div class="test firstRow"></div>
     57 </div>
     58 
     59 <div class="grid" style="grid-template-rows: 30px 0px;">
     60  <div class="item">XXX</div>
     61  <div class="spanningItem">XXX</div>
     62  <div class="test firstRow"></div>
     63  <div class="test secondRow"></div>
     64 </div>
     65 
     66 <div class="grid" style="grid-template-rows: 40px;">
     67  <div class="item">XXX XXX</div>
     68  <div class="test firstRow"></div>
     69 </div>
     70 
     71 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
     72  <div class="spanningItem">XXX XXX</div>
     73  <div class="test firstRow"></div>
     74  <div class="test secondRow"></div>
     75 </div>
     76 
     77 <div class="grid" style="grid-template-rows: 40px 25px;">
     78  <div class="item">XXX XXX</div>
     79  <div class="spanningItem">XXX XXX</div>
     80  <div class="test firstRow"></div>
     81  <div class="test secondRow"></div>
     82 </div>
     83 
     84 <div class="grid" style="grid-template-rows: 80px;">
     85  <div class="item">XXX XXX XXX</div>
     86  <div class="test firstRow"></div>
     87 </div>
     88 
     89 <div class="grid" style="grid-template-rows: 47.5px 47.5px;">
     90  <div class="spanningItem">XXX XXX XXX</div>
     91  <div class="test firstRow"></div>
     92  <div class="test secondRow"></div>
     93 </div>
     94 
     95 <div class="grid" style="grid-template-rows: 25px 70px;">
     96  <div class="item secondRow">XXX XXX XXX</div>
     97  <div class="spanningItem">XXX XXX XXX</div>
     98  <div class="test firstRow"></div>
     99  <div class="test secondRow"></div>
    100 </div>
    101 
    102 <div class="grid" style="grid-template-rows: 20px 50px;">
    103  <div class="spanningItem">XXX XX XXX</div>
    104  <div class="test firstRow"></div>
    105  <div class="test secondRow"></div>
    106 </div>
    107 
    108 <div class="grid" style="grid-template-rows: 40px 40px;">
    109  <div class="item">XXXXX</div>
    110  <div class="spanningItem">XXX XX XXX</div>
    111  <div class="test firstRow"></div>
    112  <div class="test secondRow"></div>
    113 </div>
    114 
    115 <div class="grid" style="grid-template-rows: 15px 80px;">
    116  <div class="item secondRow">XXXXX</div>
    117  <div class="spanningItem">XXX XX XXX</div>
    118  <div class="test firstRow"></div>
    119  <div class="test secondRow"></div>
    120 </div>
    121 
    122 <br clear="all">
    123 <br clear="all">
    124 
    125 <div class="grid" style="grid-template-rows: 12.5px 82.5px;">
    126  <div class="spanningItem">XXX XX XXX</div>
    127  <div class="test firstRow"></div>
    128  <div class="test secondRow"></div>
    129 </div>
    130 
    131 <div class="grid" style="grid-template-rows: 50px 45px;">
    132  <div class="item">XXXXX</div>
    133  <div class="spanningItem">XXX XX XXX</div>
    134  <div class="test firstRow"></div>
    135  <div class="test secondRow"></div>
    136 </div>
    137 
    138 <div class="grid" style="grid-template-rows: 0px 95px;">
    139  <div class="item secondRow">XXXXX</div>
    140  <div class="spanningItem">XXX XX XXX</div>
    141  <div class="test firstRow"></div>
    142  <div class="test secondRow"></div>
    143 </div>
    144 
    145 <div class="grid" style="grid-template-rows: 12.5px 40px;">
    146  <div class="spanningItem">XXX XX XXX</div>
    147  <div class="test firstRow"></div>
    148  <div class="test secondRow"></div>
    149 </div>
    150 
    151 <div class="grid" style="grid-template-rows: 50px 40px;">
    152  <div class="item">XXXXX</div>
    153  <div class="spanningItem">XXX XX XXX</div>
    154  <div class="test firstRow"></div>
    155  <div class="test secondRow"></div>
    156 </div>
    157 
    158 <div class="grid" style="grid-template-rows: 0px 50px;">
    159  <div class="item secondRow">XXXXX</div>
    160  <div class="spanningItem">XXX XX XXX</div>
    161  <div class="test firstRow"></div>
    162  <div class="test secondRow"></div>
    163 </div>
    164 
    165 <div class="grid" style="grid-template-rows: auto min-content max-content">
    166  <div class="spanningItem">XXX XX XXX</div>
    167  <div class="test firstRow"></div>
    168  <div class="test secondRow"></div>
    169  <div class="test thirdRow"></div>
    170 </div>
    171 
    172 <div class="grid" style="grid-template-rows: min-content auto max-content">
    173  <div class="spanningItem">XXX XX XXX</div>
    174  <div class="test firstRow"></div>
    175  <div class="test secondRow"></div>
    176  <div class="test thirdRow"></div>
    177 </div>
    178 
    179 <div class="grid" style="grid-template-rows: min-content max-content auto">
    180  <div class="spanningItem">XXX XX XXX</div>
    181  <div class="test firstRow"></div>
    182  <div class="test secondRow"></div>
    183  <div class="test thirdRow"></div>
    184 </div>
    185 
    186 <div class="grid" style="grid-template-rows: 30px 0px 60px;">
    187  <div class="item" style="grid-row: 1">XXX XX</div>
    188  <div class="spanningItem">XXX XX XXX</div>
    189  <div class="test firstRow"></div>
    190  <div class="test secondRow"></div>
    191  <div class="test thirdRow"></div>
    192 </div>
    193 
    194 <div class="grid" style="grid-template-rows: 30px 0px 60px;">
    195  <div class="item" style="grid-row: 1">XXX XX</div>
    196  <div class="spanningItem">XXX XX XXX</div>
    197  <div class="test firstRow"></div>
    198  <div class="test secondRow"></div>
    199  <div class="test thirdRow"></div>
    200 </div>
    201 
    202 <div class="grid" style="grid-template-rows: 0px 90px 0px;">
    203  <div class="item" style="grid-row: 2">XXX XX</div>
    204  <div class="spanningItem">XXX XX XXX</div>
    205  <div class="test firstRow"></div>
    206  <div class="test secondRow"></div>
    207  <div class="test thirdRow"></div>
    208 </div>
    209 
    210 <br clear="all">
    211 <br clear="all">
    212 
    213 <div class="grid" style="grid-template-rows: 30px;">
    214  <div class="item">XXX</div>
    215  <div class="test firstRow"></div>
    216 </div>
    217 
    218 <div class="grid" style="grid-template-rows: 30px 0px;">
    219  <div class="item">XXX</div>
    220  <div class="spanningItem">XXX</div>
    221  <div class="test firstRow"></div>
    222  <div class="test secondRow"></div>
    223 </div>
    224 
    225 <div class="grid" style="grid-template-rows: 30px;">
    226  <div class="item">XX XX</div>
    227  <div class="test firstRow"></div>
    228 </div>
    229 
    230 <div class="grid" style="grid-template-rows: 30px 30px;">
    231  <div class="spanningItem">XXX XXX</div>
    232  <div class="test firstRow"></div>
    233  <div class="test secondRow"></div>
    234 </div>
    235 
    236 <div class="grid" style="grid-template-rows: 30px 30px;">
    237  <div class="item secondRow">X X X</div>
    238  <div class="spanningItem">XXX XXX</div>
    239  <div class="test firstRow"></div>
    240  <div class="test secondRow"></div>
    241 </div>
    242 
    243 <div class="grid" style="grid-template-rows: 90px;">
    244  <div class="item">XXX XXX XXX</div>
    245  <div class="test firstRow"></div>
    246 </div>
    247 
    248 <div class="grid" style="grid-template-rows: 47.5px 47.5px;">
    249  <div class="spanningItem">XXX XXX XXX</div>
    250  <div class="test firstRow"></div>
    251  <div class="test secondRow"></div>
    252 </div>
    253 
    254 <div class="grid" style="grid-template-rows: 15px 80px;">
    255  <div class="item secondRow">XXX XXX XXX</div>
    256  <div class="spanningItem">XXX XXX XXX</div>
    257  <div class="test firstRow"></div>
    258  <div class="test secondRow"></div>
    259 </div>
    260 
    261 <br clear="all">
    262 <br clear="all">
    263 
    264 <div class="grid" style="grid-template-rows: 70px;">
    265  <div class="item">XXX XXX</div>
    266  <div class="test firstRow"></div>
    267 </div>
    268 
    269 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
    270  <div class="spanningItem">XXX XXX</div>
    271  <div class="test firstRow"></div>
    272  <div class="test secondRow"></div>
    273 </div>
    274 
    275 <div class="grid" style="grid-template-rows: 70px 0px;">
    276  <div class="item">XXX XXX</div>
    277  <div class="spanningItem">XXX XXX</div>
    278  <div class="test firstRow"></div>
    279  <div class="test secondRow"></div>
    280 </div>
    281 
    282 <div class="grid" style="grid-template-rows: 32.5px 32.5px;">
    283  <div class="spanningItem">XXX XXX</div>
    284  <div class="test firstRow"></div>
    285  <div class="test secondRow"></div>
    286 </div>
    287 
    288 <div class="grid" style="grid-template-rows: 45px 20px;">
    289  <div class="item secondRow">XX</div>
    290  <div class="spanningItem">XXX XXX</div>
    291  <div class="test firstRow"></div>
    292  <div class="test secondRow"></div>
    293 </div>
    294 
    295 <div class="grid" style="grid-template-rows: 92.5px 12.5px;">
    296  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
    297  <div class="spanningItem">XXX XXX</div>
    298  <div class="test firstRow"></div>
    299  <div class="test secondRow"></div>
    300 </div>
    301 
    302 <div class="grid" style="grid-template-rows: 82.5px 12.5px;">
    303  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
    304  <div class="spanningItem">XXX XXX</div>
    305  <div class="test firstRow"></div>
    306  <div class="test secondRow"></div>
    307 </div>
    308 
    309 <div class="grid" style="grid-template-rows: max-content auto max-content;">
    310  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
    311  <div class="spanningItem">XXX XXX</div>
    312  <div class="test firstRow"></div>
    313  <div class="test secondRow"></div>
    314  <div class="test thirdRow"></div>
    315 </div>
    316 
    317 <div class="grid" style="grid-template-rows: min-content auto min-content;">
    318  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
    319  <div class="spanningItem">XXX XXX</div>
    320  <div class="test firstRow"></div>
    321  <div class="test secondRow"></div>
    322  <div class="test thirdRow"></div>
    323 </div>
    324 
    325 <div class="grid" style="grid-template-rows: auto auto auto;">
    326  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
    327  <div class="spanningItem">XXX XXX</div>
    328  <div class="test firstRow"></div>
    329  <div class="test secondRow"></div>
    330  <div class="test thirdRow"></div>
    331 </div>