tor-browser

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

explicit-grid-size-001.html (5897B)

      1 <!DOCTYPE html>
      2 <title>CSS Grid: grid size with explicit grid-template-areas.</title>
      3 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
      4 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"/>
      5 <link rel="issue" href="https://crrev.com/603160"/>
      6 <meta name="assert" content="Test ensures that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas."/>
      7 
      8 <link href="/css/support/grid.css" rel="stylesheet"/>
      9 <style>
     10 
     11 .grid {
     12    grid-auto-columns: 10px;
     13    grid-auto-rows: 10px;
     14    position: relative;
     15 }
     16 
     17 .oneColumnOneRow {
     18    grid-template-columns: 50px;
     19    grid-template-rows: 50px;
     20 }
     21 
     22 .twoColumnsOneRow {
     23    grid-template-columns: 50px 50px;
     24    grid-template-rows: 50px;
     25 }
     26 
     27 .oneColumnTwoRows {
     28    grid-template-columns: 50px;
     29    grid-template-rows: 50px 50px;
     30 }
     31 
     32 .twoColumnsTwoRows {
     33    grid-template-columns: 50px 50px;
     34    grid-template-rows: 50px 50px;
     35 }
     36 
     37 .oneColumnOneRowAreas {
     38    grid-template-areas: "a";
     39 }
     40 
     41 .twoColumnsOneRowAreas {
     42    grid-template-areas: "a b";
     43 }
     44 
     45 .oneColumnTwoRowsAreas {
     46    grid-template-areas: "a"
     47                         "b";
     48 }
     49 
     50 .twoColumnsTwoRowsAreas {
     51    grid-template-areas: "a b"
     52                         "c d";
     53 }
     54 
     55 </style>
     56 <script src="/resources/testharness.js"></script>
     57 <script src="/resources/testharnessreport.js"></script>
     58 <script src="/resources/check-layout-th.js"></script>
     59 <body onload="checkLayout('.grid')">
     60 <div id="log"></div>
     61 
     62 <div class="grid">
     63    <div class="autoRowAutoColumn"
     64        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
     65    </div>
     66 </div>
     67 
     68 <div class="grid oneColumnOneRow">
     69    <div class="autoRowAutoColumn"
     70        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
     71    </div>
     72 </div>
     73 
     74 <div class="grid oneColumnOneRowAreas">
     75    <div class="autoRowAutoColumn"
     76        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
     77    </div>
     78 </div>
     79 
     80 <div class="grid oneColumnTwoRows">
     81    <div class="autoRowAutoColumn"
     82        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
     83    </div>
     84    <div class="autoRowAutoColumn"
     85        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
     86    </div>
     87 </div>
     88 
     89 <div class="grid oneColumnTwoRowsAreas">
     90    <div class="autoRowAutoColumn"
     91        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
     92    </div>
     93    <div class="autoRowAutoColumn"
     94        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
     95    </div>
     96 </div>
     97 
     98 <div class="grid twoColumnsOneRow">
     99    <div class="autoRowAutoColumn"
    100        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    101    </div>
    102    <div class="autoRowAutoColumn"
    103        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    104    </div>
    105 </div>
    106 
    107 <div class="grid twoColumnsOneRowAreas">
    108    <div class="autoRowAutoColumn"
    109        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    110    </div>
    111    <div class="autoRowAutoColumn"
    112        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    113    </div>
    114 </div>
    115 
    116 <div class="grid twoColumnsTwoRows">
    117    <div class="autoRowAutoColumn"
    118        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    119    </div>
    120    <div class="autoRowAutoColumn"
    121        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    122    </div>
    123    <div class="autoRowAutoColumn"
    124        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    125    </div>
    126    <div class="autoRowAutoColumn"
    127        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    128    </div>
    129 </div>
    130 
    131 <div class="grid twoColumnsTwoRowsAreas">
    132    <div class="autoRowAutoColumn"
    133        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    134    </div>
    135    <div class="autoRowAutoColumn"
    136        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    137    </div>
    138    <div class="autoRowAutoColumn"
    139        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
    140    </div>
    141    <div class="autoRowAutoColumn"
    142        data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10">
    143    </div>
    144 </div>
    145 
    146 <div class="grid oneColumnOneRow twoColumnsTwoRowsAreas">
    147    <div class="autoRowAutoColumn"
    148        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    149    </div>
    150    <div class="autoRowAutoColumn"
    151        data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50">
    152    </div>
    153    <div class="autoRowAutoColumn"
    154        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10">
    155    </div>
    156    <div class="autoRowAutoColumn"
    157        data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">
    158    </div>
    159 </div>
    160 
    161 <div class="grid twoColumnsTwoRows oneColumnOneRowAreas">
    162    <div class="autoRowAutoColumn"
    163        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    164    </div>
    165    <div class="autoRowAutoColumn"
    166        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    167    </div>
    168    <div class="autoRowAutoColumn"
    169        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    170    </div>
    171    <div class="autoRowAutoColumn"
    172        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    173    </div>
    174 </div>
    175 
    176 </body>