tor-browser

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

grid-fit-content-tracks-dont-stretch-001.html (8741B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: fit-content() tracks don't stretch</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-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties">
      6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
      7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks">
      8 <meta name="flags" content="ahem dom">
      9 <meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.">
     10 
     11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     12 <style>
     13 .grid {
     14  display: grid;
     15  width: 400px;
     16  height: 200px;
     17  font: 25px/1 Ahem;
     18 }
     19 
     20 .constrainedGrid {
     21  width: 20px;
     22  height: 10px;
     23 }
     24 
     25 .fitContent200x100 {
     26  grid-template-columns: fit-content(200px);
     27  grid-template-rows: fit-content(100px);
     28 }
     29 
     30 .placeContentStretch {
     31  place-content: stretch;
     32 }
     33 
     34 .placeContentStart {
     35  place-content: start;
     36 }
     37 </style>
     38 
     39 <script src="/resources/testharness.js"></script>
     40 <script src="/resources/testharnessreport.js"></script>
     41 <script src="/resources/check-layout-th.js"></script>
     42 <script type="text/javascript">
     43  setup({ explicit_done: true });
     44 </script>
     45 
     46 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     47 
     48 <div id="log"></div>
     49 
     50 <h1>1) place-content: normal</h1>
     51 
     52 <h2>1.2) Unconstrained grid container</h2>
     53 
     54 <div class="grid" data-expected-width="400" data-expected-height="200">
     55  <div data-expected-width="400" data-expected-height="200">X</div>
     56 </div>
     57 
     58 <div class="grid" data-expected-width="400" data-expected-height="200">
     59  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
     60 </div>
     61 
     62 <div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
     63  <div data-expected-width="25" data-expected-height="25">X</div>
     64 </div>
     65 
     66 <div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
     67  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
     68 </div>
     69 
     70 <div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
     71  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
     72 </div>
     73 
     74 <div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
     75    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
     76 </div>
     77 
     78 <h2>1.2) Constrained grid container</h2>
     79 
     80 <div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
     81  <div data-expected-width="25" data-expected-height="25">X</div>
     82 </div>
     83 
     84 <div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
     85  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
     86 </div>
     87 
     88 <div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
     89  <div data-expected-width="25" data-expected-height="25">X</div>
     90 </div>
     91 
     92 <div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
     93  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
     94 </div>
     95 
     96 <div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
     97  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
     98 </div>
     99 
    100 <div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    101    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
    102 </div>
    103 
    104 <h1>2) place-content: stretch</h1>
    105 
    106 <h2>2.2) Unconstrained grid container</h2>
    107 
    108 <div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
    109  <div data-expected-width="400" data-expected-height="200">X</div>
    110 </div>
    111 
    112 <div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
    113  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
    114 </div>
    115 
    116 <div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
    117  <div data-expected-width="25" data-expected-height="25">X</div>
    118 </div>
    119 
    120 <div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
    121  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
    122 </div>
    123 
    124 <div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
    125  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
    126 </div>
    127 
    128 <div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
    129    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
    130 </div>
    131 
    132 <h2>2.2) Constrained grid container</h2>
    133 
    134 <div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
    135  <div data-expected-width="25" data-expected-height="25">X</div>
    136 </div>
    137 
    138 <div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
    139  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
    140 </div>
    141 
    142 <div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    143  <div data-expected-width="25" data-expected-height="25">X</div>
    144 </div>
    145 
    146 <div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    147  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
    148 </div>
    149 
    150 <div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    151  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
    152 </div>
    153 
    154 <div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    155    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
    156 </div>
    157 
    158 <h1>3) place-content: start</h1>
    159 
    160 <h2>3.1) Unconstrained grid container</h2>
    161 
    162 <div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
    163  <div data-expected-width="25" data-expected-height="25">X</div>
    164 </div>
    165 
    166 <div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
    167  <div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div>
    168 </div>
    169 
    170 <div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
    171  <div data-expected-width="25" data-expected-height="25">X</div>
    172 </div>
    173 
    174 <div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
    175  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
    176 </div>
    177 
    178 <div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
    179  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
    180 </div>
    181 
    182 <div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
    183    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
    184 </div>
    185 
    186 <h2>3.2) Constrained grid container</h2>
    187 
    188 <div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
    189  <div data-expected-width="25" data-expected-height="25">X</div>
    190 </div>
    191 
    192 <div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
    193  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
    194 </div>
    195 
    196 <div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    197  <div data-expected-width="25" data-expected-height="25">X</div>
    198 </div>
    199 
    200 <div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    201  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
    202 </div>
    203 
    204 <div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    205  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
    206 </div>
    207 
    208 <div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    209    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
    210 </div>
    211 
    212 </body>