layout/reftests/css-grid/grid-repeat-auto-fill-fit-010.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: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798">
  10   <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
  11   <link rel="match" href="grid-repeat-auto-fill-fit-010-ref.html">
  12   <style type="text/css">
  13 html,body {
  14     color:black; background-color:white; font-size:16px; padding:0; margin:0;
  15     /* We use overflow:hidden on root scroller to work around bug 1873749: */
  16     overflow: hidden;
  17 }
  18
  19 .grid {
  20   display: grid;
  21   border: 1px solid;
  22 }
  23
  24 .inline-grid {
  25   display: inline-grid;
  26   grid: min-content 40px / min-content 40px;
  27   border: 3px dotted silver;
  28   align-items: start;
  29   justify-items: start;
  30 }
  31
  32 .cfill { grid: auto auto / repeat(auto-fill, 100px); }
  33 .rfill { grid: repeat(auto-fill, 50px) / auto auto; grid-auto-flow:column; }
  34 fit .cfill { grid: auto auto / repeat(auto-fit, 100px); }
  35 fit .rfill { grid: repeat(auto-fit, 50px) / auto auto; grid-auto-flow:column; }
  36 .r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; }
  37
  38 span:nth-of-type(1) { background: magenta; }
  39 span:nth-of-type(2) { background: cyan; }
  40 span:nth-of-type(3) { background: yellow; }
  41 span:nth-of-type(4) { background: lime; }
  42
  43 x {
  44   display: inline-block;
  45   width: 20px;
  46   height: 30px;
  47 }
  48
  49 y {
  50   grid-row: 2;
  51   align-self: stretch;
  52   justify-self: stretch;
  53   min-width: 10px;
  54   min-height: 10px;
  55   background: grey;
  56 }
  57
  58 .min-content {
  59   min-width: -webkit-min-content;
  60   min-width: min-content;
  61 }
  62 .max-content {
  63   min-width: -webkit-max-content;
  64   min-width: max-content;
  65 }
  66 .fill {
  67   min-width: -moz-available;
  68   min-width: -webkit-fill-available;
  69   min-width: fill;
  70 }
  71 .fit-content {
  72   min-width: -moz-fit-content;
  73   min-width: -webkit-fit-content;
  74   min-width: fit-content;
  75 }
  76
  77 .rfill.min-content {
  78   min-height: -webkit-min-content;
  79   min-height: min-content;
  80 }
  81 .rfill.max-content {
  82   min-height: -webkit-max-content;
  83   min-height: max-content;
  84 }
  85 .rfill.fill {
  86   min-height: -moz-available;
  87   min-height: -webkit-fill-available;
  88   min-height: fill;
  89 }
  90 .rfill.fit-content {
  91   min-height: -moz-fit-content;
  92   min-height: -webkit-fit-content;
  93   min-height: fit-content;
  94 }
  95     </style>
  96 </head>
  97 <body>
  98
  99 <div class="inline-grid">
 100 <div class="grid cfill" style="min-width:250px">
 101   <span><x></x></span>
 102   <span><x></x></span>
 103   <span><x></x></span>
 104   <span><x></x></span>
 105 </div>
 106 <y></y>
 107 </div>
 108
 109 <div class="inline-grid">
 110 <div class="grid cfill" style="max-width:250px">
 111   <span><x></x></span>
 112   <span><x></x></span>
 113   <span><x></x></span>
 114   <span><x></x></span>
 115 </div>
 116 <y></y>
 117 </div>
 118
 119 <div class="inline-grid">
 120 <div class="grid cfill" style="min-width:350px; max-width:250px">
 121   <span><x></x></span>
 122   <span><x></x></span>
 123   <span><x></x></span>
 124   <span><x></x></span>
 125 </div>
 126 <y></y>
 127 </div>
 128
 129 <div class="inline-grid">
 130 <div class="grid cfill min-content">
 131   <span><x></x></span>
 132   <span><x></x></span>
 133   <span><x></x></span>
 134   <span><x></x></span>
 135 </div>
 136 <y></y>
 137 </div>
 138
 139 <div class="inline-grid">
 140 <div class="grid cfill max-content">
 141   <span><x></x></span>
 142   <span><x></x></span>
 143   <span><x></x></span>
 144   <span><x></x></span>
 145 </div>
 146 <y></y>
 147 </div>
 148
 149 <div class="inline-grid">
 150 <div class="grid cfill fit-content">
 151   <span><x></x></span>
 152   <span><x></x></span>
 153   <span><x></x></span>
 154   <span><x></x></span>
 155 </div>
 156 <y></y>
 157 </div>
 158
 159 <div class="inline-grid">
 160 <div class="grid cfill fill">
 161   <span><x></x></span>
 162   <span><x></x></span>
 163   <span><x></x></span>
 164   <span><x></x></span>
 165 </div>
 166 <y></y>
 167 </div>
 168
 169 <div class="inline-grid">
 170 <div class="grid rfill" style="min-height:120px">
 171   <span><x></x></span>
 172   <span><x></x></span>
 173   <span><x></x></span>
 174   <span><x></x></span>
 175 </div>
 176 <y></y>
 177 </div>
 178
 179 <div class="inline-grid">
 180 <div class="grid rfill" style="max-height:160px;">
 181   <span><x></x></span>
 182   <span><x></x></span>
 183   <span><x></x></span>
 184   <span><x></x></span>
 185 </div>
 186 <y></y>
 187 </div>
 188
 189 <div class="inline-grid">
 190 <div class="grid rfill" style="min-height:120px; max-height:100px;">
 191   <span><x></x></span>
 192   <span><x></x></span>
 193   <span><x></x></span>
 194   <span><x></x></span>
 195 </div>
 196 <y></y>
 197 </div>
 198
 199 <div class="inline-grid">
 200 <div class="grid rfill" style="min-height:160px; max-height:100px;">
 201   <span><x></x></span>
 202   <span><x></x></span>
 203   <span><x></x></span>
 204   <span><x></x></span>
 205 </div>
 206 <y></y>
 207 </div>
 208
 209 <div class="inline-grid">
 210 <div class="grid rfill min-content">
 211   <span><x></x></span>
 212   <span><x></x></span>
 213   <span><x></x></span>
 214   <span><x></x></span>
 215 </div>
 216 <y></y>
 217 </div>
 218
 219 <div class="inline-grid">
 220 <div class="grid rfill max-content">
 221   <span><x></x></span>
 222   <span><x></x></span>
 223   <span><x></x></span>
 224   <span><x></x></span>
 225 </div>
 226 <y></y>
 227 </div>
 228
 229 <div class="inline-grid">
 230 <div class="grid rfill fit-content">
 231   <span><x></x></span>
 232   <span><x></x></span>
 233   <span><x></x></span>
 234   <span><x></x></span>
 235 </div>
 236 <y></y>
 237 </div>
 238
 239 <div class="inline-grid">
 240 <div class="grid rfill fill">
 241   <span><x></x></span>
 242   <span><x></x></span>
 243   <span><x></x></span>
 244   <span><x></x></span>
 245 </div>
 246 <y></y>
 247 </div>
 248
 249 <div class="inline-grid">
 250 <div class="grid r3" style="min-height:120px">
 251   <span><x></x></span>
 252   <span><x></x></span>
 253   <span><x></x></span>
 254   <span><x></x></span>
 255 </div>
 256 <y></y>
 257 </div>
 258
 259 <fit>
 260
 261 <div class="inline-grid">
 262 <div class="grid cfill" style="min-width:250px">
 263   <span><x></x></span>
 264   <span><x></x></span>
 265 </div>
 266 <y></y>
 267 </div>
 268
 269 <div class="inline-grid">
 270 <div class="grid cfill" style="max-width:250px">
 271   <span><x></x></span>
 272 </div>
 273 <y></y>
 274 </div>
 275
 276 <div class="inline-grid">
 277 <div class="grid cfill" style="min-width:350px; max-width:250px">
 278   <span><x></x></span>
 279   <span><x></x></span>
 280 </div>
 281 <y></y>
 282 </div>
 283
 284 <div class="inline-grid">
 285 <div class="grid cfill min-content">
 286 </div>
 287 <y></y>
 288 </div>
 289
 290 <div class="inline-grid">
 291 <div class="grid cfill max-content">
 292 </div>
 293 <y></y>
 294 </div>
 295
 296 <div class="inline-grid">
 297 <div class="grid cfill fit-content">
 298 </div>
 299 <y></y>
 300 </div>
 301
 302 <div class="inline-grid">
 303 <div class="grid cfill fill">
 304 </div>
 305 <y></y>
 306 </div>
 307
 308 <div class="inline-grid">
 309 <div class="grid rfill" style="min-height:120px">
 310   <span><x></x></span>
 311   <span><x></x></span>
 312 </div>
 313 <y></y>
 314 </div>
 315
 316 <div class="inline-grid">
 317 <div class="grid rfill" style="max-height:160px;">
 318   <span><x></x></span>
 319   <span><x></x></span>
 320 </div>
 321 <y></y>
 322 </div>
 323
 324 <div class="inline-grid">
 325 <div class="grid rfill" style="min-height:120px; max-height:100px;">
 326   <span><x></x></span>
 327 </div>
 328 <y></y>
 329 </div>
 330
 331 <div class="inline-grid">
 332 <div class="grid rfill" style="min-height:160px; max-height:100px;">
 333   <span><x></x></span>
 334   <span><x></x></span>
 335 </div>
 336 <y></y>
 337 </div>
 338
 339 <div class="inline-grid">
 340 <div class="grid rfill min-content">
 341 </div>
 342 <y></y>
 343 </div>
 344
 345 <div class="inline-grid">
 346 <div class="grid rfill max-content">
 347 </div>
 348 <y></y>
 349 </div>
 350
 351 <div class="inline-grid">
 352 <div class="grid rfill fit-content">
 353 </div>
 354 <y></y>
 355 </div>
 356
 357 <div class="inline-grid">
 358 <div class="grid rfill fill">
 359 </div>
 360 <y></y>
 361 </div>
 362
 363 </fit>
 364
 365 </body>
 366 </html>