layout/reftests/css-grid/grid-track-sizing-002.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7 <meta charset="utf-8">
   8   <title>CSS Grid Test: freezing tracks in step 2.5 of the Track Sizing Algorithm</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1225368">
  10   <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
  11   <link rel="match" href="grid-track-sizing-002-ref.html">
  12   <style>
  13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
  14
  15 .grid {
  16   display: grid;
  17   float: left;
  18   grid-template-rows: 20px;
  19   justify-items: start;
  20   margin-right: 5px;
  21 }
  22
  23 x {
  24   min-width: 0;
  25   width: 30px;
  26   background: grey;
  27 }
  28 .grid div {
  29   grid-column:1/span 2;
  30   min-width: 0;
  31   width: 100px;
  32   height: 20px;
  33   background: black;
  34 }
  35 div div:nth-child(2n+1) {
  36   background: grey;
  37 }
  38 .grid.c3 div {
  39   grid-column:1/span 3;
  40 }
  41 </style>
  42 </head>
  43 <body>
  44
  45 <div class="grid">
  46   <x></x>
  47   <div></div>
  48 </div>
  49
  50 <div class="grid">
  51   <x></x>
  52   <div></div>
  53   <div></div>
  54 </div>
  55
  56 <div class="grid">
  57   <x></x>
  58   <div></div>
  59   <div></div>
  60   <div></div>
  61 </div>
  62
  63 <div class="grid">
  64   <x></x>
  65   <div style="width:80px"></div>
  66   <div></div>
  67   <div></div>
  68   <div></div>
  69 </div>
  70
  71 <div class="grid" style="grid-auto-columns: minmax(0,auto)">
  72   <x></x>
  73   <div></div>
  74   <div></div>
  75   <div></div>
  76   <div></div>
  77 </div>
  78
  79 <div class="grid" style="grid-auto-columns: minmax(0,auto)">
  80   <x></x>
  81   <div style="width:80px"></div>
  82   <div></div>
  83   <div></div>
  84   <div></div>
  85 </div>
  86
  87 <div class="grid" style="grid-template-columns: minmax(0,auto) 0">
  88   <x></x>
  89   <div></div>
  90 </div>
  91
  92 <br clear=all>
  93
  94 <div class="grid" style="grid-template-columns: minmax(0,auto) 0">
  95   <x></x>
  96   <div></div>
  97   <div></div>
  98 </div>
  99
 100 <div class="grid" style="grid-template-columns: minmax(0,auto) 0">
 101   <x></x>
 102   <div style="width:80px"></div>
 103   <div></div>
 104   <div></div>
 105 </div>
 106
 107 <div class="grid" style="grid-template-columns: minmax(0,auto) 0">
 108   <x></x>
 109   <div style="width:80px"></div>
 110   <div></div>
 111   <div></div>
 112   <div></div>
 113 </div>
 114
 115 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
 116   <x></x>
 117   <div></div>
 118 </div>
 119
 120 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
 121   <x></x>
 122   <div></div>
 123   <div></div>
 124 </div>
 125
 126 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
 127   <x></x>
 128   <div style="width:80px"></div>
 129   <div></div>
 130 </div>
 131
 132 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 0 auto">
 133   <x></x>
 134   <div style="width:80px"></div>
 135   <div></div>
 136   <div></div>
 137   <div></div>
 138 </div>
 139
 140 <br clear=all>
 141
 142 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
 143   <x></x>
 144   <div></div>
 145 </div>
 146
 147 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
 148   <x></x>
 149   <div></div>
 150   <div></div>
 151 </div>
 152
 153 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
 154   <x></x>
 155   <div style="width:80px"></div>
 156   <div></div>
 157 </div>
 158
 159 <div class="grid c3" style="grid-template-columns: minmax(0,auto) 10px auto">
 160   <x></x>
 161   <div style="width:80px"></div>
 162   <div></div>
 163   <div></div>
 164   <div></div>
 165 </div>
 166
 167 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
 168   <x></x>
 169   <div></div>
 170 </div>
 171
 172 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
 173   <x></x>
 174   <div></div>
 175   <div></div>
 176 </div>
 177
 178 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
 179   <x></x>
 180   <div style="width:80px"></div>
 181   <div></div>
 182 </div>
 183
 184 <br clear=all>
 185
 186 <div class="grid c3" style="grid-template-columns: minmax(0,auto) min-content auto">
 187   <x></x>
 188   <div style="width:80px"></div>
 189   <div></div>
 190   <div></div>
 191   <div></div>
 192 </div>
 193
 194 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 195   <x></x>
 196   <div></div>
 197 </div>
 198
 199 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 200   <x></x>
 201   <div></div>
 202   <div></div>
 203 </div>
 204
 205 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 206   <x></x>
 207   <div style="grid-row:2; grid-column:span 2"></div>
 208   <div></div>
 209 </div>
 210
 211 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 212   <x></x>
 213   <div style="width:80px"></div>
 214   <div></div>
 215 </div>
 216
 217 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 218   <x></x>
 219   <div style="width:80px"></div>
 220   <div style="grid-column:span 2"></div>
 221 </div>
 222
 223 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 224   <x></x>
 225   <div style="grid-row:2; grid-column:span 2; width:80px"></div>
 226   <div></div>
 227 </div>
 228
 229 <div class="grid c3" style="grid-template-columns: minmax(0,auto) auto auto">
 230   <x></x>
 231   <div style="width:80px"></div>
 232   <div></div>
 233   <div></div>
 234   <div></div>
 235 </div>
 236
 237 </body>
 238 </html>