grid-repeat-auto-fill-fit-010.html (7179B)
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>