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