parent-repeat-auto-fit-002.html (20636B)
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: subgrid inside a parent with repeat(auto-fit) rows</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> 11 <link rel="match" href="parent-repeat-auto-fit-002-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 15 } 16 17 #report { 18 white-space: pre-wrap; 19 } 20 21 .grid { 22 display: inline-grid; 23 height: 50px; 24 width: 50px; 25 grid-template-columns: repeat(auto-fit, 10px); 26 border: 1px solid; 27 vertical-align: top; 28 } 29 30 .subgrid { 31 display: grid; 32 grid: subgrid / subgrid; 33 grid-column: 1 / -1; 34 grid-row: 3 / span 4; 35 grid-auto-columns: 8px; 36 background: grey; 37 } 38 39 .fit-0a { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) } 40 .fit-0b { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) } 41 .fit-0c { grid-template-rows: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } 42 .fit-0d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } 43 .fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } 44 .fit-0f { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } 45 .fit-0g { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } 46 .fit-0h { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } 47 .fit-0i { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } 48 .fit-0j { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } 49 .fit-0k { grid-template-rows: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } 50 .fit-0l { grid-template-rows: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } 51 .fit-0m { grid-template-rows: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) } 52 53 .fit-1a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] } 54 .fit-1b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } 55 .fit-1c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } 56 .fit-1d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } 57 .fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } 58 59 .fit-2a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } 60 .fit-2b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } 61 .fit-2c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } 62 .fit-2d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } 63 64 .fit-3a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } 65 .fit-3b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } 66 .fit-3c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } 67 68 .fit-4a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } 69 .fit-4b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } 70 71 .fit-5 { grid-template-rows: repeat(auto-fit, [y] 10px) minmax(0, auto) } 72 73 .subgrid > :nth-child(2n) { background: black; } 74 .subgrid > :nth-child(2n+1) { background: pink; } 75 76 </style> 77 </head> 78 <body> 79 80 <div class="grid fit-0a"><div class="subgrid"> 81 <div style="grid-row:y 5"></div> 82 <div style="grid-row:y 4"></div> 83 <div style="grid-row:y 3"></div> 84 <div style="grid-row:y 2"></div> 85 <div style="grid-row:y 1"></div> 86 <div style="grid-row:y -1"></div> 87 <div style="grid-row:y -2"></div> 88 <div style="grid-row:y -3"></div> 89 <div style="grid-row:y -4"></div> 90 <div style="grid-row:y -5"></div> 91 </div></div> 92 93 <div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2"> 94 <div style="grid-row:y 5"></div> 95 <div style="grid-row:y 4"></div> 96 <div style="grid-row:y 3"></div> 97 <div style="grid-row:y 2"></div> 98 <div style="grid-row:y 1"></div> 99 <div style="grid-row:y -1"></div> 100 <div style="grid-row:y -2"></div> 101 <div style="grid-row:y -3"></div> 102 <div style="grid-row:y -4"></div> 103 <div style="grid-row:y -5"></div> 104 </div></div> 105 106 <div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3"> 107 <div style="grid-row:y 5"></div> 108 <div style="grid-row:y 4"></div> 109 <div style="grid-row:y 3"></div> 110 <div style="grid-row:y 2"></div> 111 <div style="grid-row:y 1"></div> 112 <div style="grid-row:y -1"></div> 113 <div style="grid-row:y -2"></div> 114 <div style="grid-row:y -3"></div> 115 <div style="grid-row:y -4"></div> 116 <div style="grid-row:y -5"></div> 117 </div></div> 118 119 <div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4"> 120 <div style="grid-row:y 5"></div> 121 <div style="grid-row:y 4"></div> 122 <div style="grid-row:y 3"></div> 123 <div style="grid-row:y 2"></div> 124 <div style="grid-row:y 1"></div> 125 <div style="grid-row:y -1"></div> 126 <div style="grid-row:y -2"></div> 127 <div style="grid-row:y -3"></div> 128 <div style="grid-row:y -4"></div> 129 <div style="grid-row:y -5"></div> 130 </div></div> 131 132 <div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5"> 133 <div style="grid-row:y 5"></div> 134 <div style="grid-row:y 4"></div> 135 <div style="grid-row:y 3"></div> 136 <div style="grid-row:y 2"></div> 137 <div style="grid-row:y 1"></div> 138 <div style="grid-row:y -1"></div> 139 <div style="grid-row:y -2"></div> 140 <div style="grid-row:y -3"></div> 141 <div style="grid-row:y -4"></div> 142 <div style="grid-row:y -5"></div> 143 </div></div> 144 145 <div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6"> 146 <div style="grid-row:y 5"></div> 147 <div style="grid-row:y 4"></div> 148 <div style="grid-row:y 3"></div> 149 <div style="grid-row:y 2"></div> 150 <div style="grid-row:y 1"></div> 151 <div style="grid-row:y -1"></div> 152 <div style="grid-row:y -2"></div> 153 <div style="grid-row:y -3"></div> 154 <div style="grid-row:y -4"></div> 155 <div style="grid-row:y -5"></div> 156 </div></div> 157 158 <div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2"> 159 <div style="grid-row:y 5"></div> 160 <div style="grid-row:y 4"></div> 161 <div style="grid-row:y 3"></div> 162 <div style="grid-row:y 2"></div> 163 <div style="grid-row:y 1"></div> 164 <div style="grid-row:y -1"></div> 165 <div style="grid-row:y -2"></div> 166 <div style="grid-row:y -3"></div> 167 <div style="grid-row:y -4"></div> 168 <div style="grid-row:y -5"></div> 169 </div></div> 170 171 <div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3"> 172 <div style="grid-row:y 5"></div> 173 <div style="grid-row:y 4"></div> 174 <div style="grid-row:y 3"></div> 175 <div style="grid-row:y 2"></div> 176 <div style="grid-row:y 1"></div> 177 <div style="grid-row:y -1"></div> 178 <div style="grid-row:y -2"></div> 179 <div style="grid-row:y -3"></div> 180 <div style="grid-row:y -4"></div> 181 <div style="grid-row:y -5"></div> 182 </div></div> 183 184 <div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4"> 185 <div style="grid-row:y 5"></div> 186 <div style="grid-row:y 4"></div> 187 <div style="grid-row:y 3"></div> 188 <div style="grid-row:y 2"></div> 189 <div style="grid-row:y 1"></div> 190 <div style="grid-row:y -1"></div> 191 <div style="grid-row:y -2"></div> 192 <div style="grid-row:y -3"></div> 193 <div style="grid-row:y -4"></div> 194 <div style="grid-row:y -5"></div> 195 </div></div> 196 197 <div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5"> 198 <div style="grid-row:y 5"></div> 199 <div style="grid-row:y 4"></div> 200 <div style="grid-row:y 3"></div> 201 <div style="grid-row:y 2"></div> 202 <div style="grid-row:y 1"></div> 203 <div style="grid-row:y -1"></div> 204 <div style="grid-row:y -2"></div> 205 <div style="grid-row:y -3"></div> 206 <div style="grid-row:y -4"></div> 207 <div style="grid-row:y -5"></div> 208 </div></div> 209 210 <div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6"> 211 <div style="grid-row:y 5"></div> 212 <div style="grid-row:y 4"></div> 213 <div style="grid-row:y 3"></div> 214 <div style="grid-row:y 2"></div> 215 <div style="grid-row:y 1"></div> 216 <div style="grid-row:y -1"></div> 217 <div style="grid-row:y -2"></div> 218 <div style="grid-row:y -3"></div> 219 <div style="grid-row:y -4"></div> 220 <div style="grid-row:y -5"></div> 221 </div></div> 222 223 <div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2"> 224 <div style="grid-row:y 5"></div> 225 <div style="grid-row:y 4"></div> 226 <div style="grid-row:y 3"></div> 227 <div style="grid-row:y 2"></div> 228 <div style="grid-row:y 1"></div> 229 <div style="grid-row:y -1"></div> 230 <div style="grid-row:y -2"></div> 231 <div style="grid-row:y -3"></div> 232 <div style="grid-row:y -4"></div> 233 <div style="grid-row:y -5"></div> 234 </div></div> 235 236 <div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3"> 237 <div style="grid-row:y 5"></div> 238 <div style="grid-row:y 4"></div> 239 <div style="grid-row:y 3"></div> 240 <div style="grid-row:y 2"></div> 241 <div style="grid-row:y 1"></div> 242 <div style="grid-row:y -1"></div> 243 <div style="grid-row:y -2"></div> 244 <div style="grid-row:y -3"></div> 245 <div style="grid-row:y -4"></div> 246 <div style="grid-row:y -5"></div> 247 </div></div> 248 249 <div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3"> 250 <div style="grid-row:y 5"></div> 251 <div style="grid-row:y 4"></div> 252 <div style="grid-row:y 3"></div> 253 <div style="grid-row:y 2"></div> 254 <div style="grid-row:y 1"></div> 255 <div style="grid-row:y -1"></div> 256 <div style="grid-row:y -2"></div> 257 <div style="grid-row:y -3"></div> 258 <div style="grid-row:y -4"></div> 259 <div style="grid-row:y -5"></div> 260 </div></div> 261 262 <div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2"> 263 <div style="grid-row:y 5"></div> 264 <div style="grid-row:y 4"></div> 265 <div style="grid-row:y 3"></div> 266 <div style="grid-row:y 2"></div> 267 <div style="grid-row:y 1"></div> 268 <div style="grid-row:y -1"></div> 269 <div style="grid-row:y -2"></div> 270 <div style="grid-row:y -3"></div> 271 <div style="grid-row:y -4"></div> 272 <div style="grid-row:y -5"></div> 273 </div></div> 274 275 <div class="grid fit-1c"><div class="subgrid"> 276 <div style="grid-row:y 5"></div> 277 <div style="grid-row:y 4"></div> 278 <div style="grid-row:y 3"></div> 279 <div style="grid-row:y 2"></div> 280 <div style="grid-row:y 1"></div> 281 <div style="grid-row:y -1"></div> 282 <div style="grid-row:y -2"></div> 283 <div style="grid-row:y -3"></div> 284 <div style="grid-row:y -4"></div> 285 <div style="grid-row:y -5"></div> 286 </div></div> 287 288 <div class="grid fit-1d"><div class="subgrid"> 289 <div style="grid-row:y 5"></div> 290 <div style="grid-row:y 4"></div> 291 <div style="grid-row:y 3"></div> 292 <div style="grid-row:y 2"></div> 293 <div style="grid-row:y 1"></div> 294 <div style="grid-row:y -1"></div> 295 <div style="grid-row:y -2"></div> 296 <div style="grid-row:y -3"></div> 297 <div style="grid-row:y -4"></div> 298 <div style="grid-row:y -5"></div> 299 </div></div> 300 301 <div class="grid fit-1e"><div class="subgrid"> 302 <div style="grid-row:y 5"></div> 303 <div style="grid-row:y 4"></div> 304 <div style="grid-row:y 3"></div> 305 <div style="grid-row:y 2"></div> 306 <div style="grid-row:y 1"></div> 307 <div style="grid-row:y -1"></div> 308 <div style="grid-row:y -2"></div> 309 <div style="grid-row:y -3"></div> 310 <div style="grid-row:y -4"></div> 311 <div style="grid-row:y -5"></div> 312 </div></div> 313 314 <div class="grid fit-2a"><div class="subgrid"> 315 <div style="grid-row:y 5"></div> 316 <div style="grid-row:y 4"></div> 317 <div style="grid-row:y 3"></div> 318 <div style="grid-row:y 2"></div> 319 <div style="grid-row:y 1"></div> 320 <div style="grid-row:y -1"></div> 321 <div style="grid-row:y -2"></div> 322 <div style="grid-row:y -3"></div> 323 <div style="grid-row:y -4"></div> 324 <div style="grid-row:y -5"></div> 325 </div></div> 326 327 <div class="grid fit-2b"><div class="subgrid"> 328 <div style="grid-row:y 5"></div> 329 <div style="grid-row:y 4"></div> 330 <div style="grid-row:y 3"></div> 331 <div style="grid-row:y 2"></div> 332 <div style="grid-row:y 1"></div> 333 <div style="grid-row:y -1"></div> 334 <div style="grid-row:y -2"></div> 335 <div style="grid-row:y -3"></div> 336 <div style="grid-row:y -4"></div> 337 <div style="grid-row:y -5"></div> 338 </div></div> 339 340 <div class="grid fit-2c"><div class="subgrid"> 341 <div style="grid-row:y 5"></div> 342 <div style="grid-row:y 4"></div> 343 <div style="grid-row:y 3"></div> 344 <div style="grid-row:y 2"></div> 345 <div style="grid-row:y 1"></div> 346 <div style="grid-row:y -1"></div> 347 <div style="grid-row:y -2"></div> 348 <div style="grid-row:y -3"></div> 349 <div style="grid-row:y -4"></div> 350 <div style="grid-row:y -5"></div> 351 </div></div> 352 353 <div class="grid fit-2d"><div class="subgrid"> 354 <div style="grid-row:y 5"></div> 355 <div style="grid-row:y 4"></div> 356 <div style="grid-row:y 3"></div> 357 <div style="grid-row:y 2"></div> 358 <div style="grid-row:y 1"></div> 359 <div style="grid-row:y -1"></div> 360 <div style="grid-row:y -2"></div> 361 <div style="grid-row:y -3"></div> 362 <div style="grid-row:y -4"></div> 363 <div style="grid-row:y -5"></div> 364 </div></div> 365 366 <div class="grid fit-3a"><div class="subgrid"> 367 <div style="grid-row:y 5"></div> 368 <div style="grid-row:y 4"></div> 369 <div style="grid-row:y 3"></div> 370 <div style="grid-row:y 2"></div> 371 <div style="grid-row:y 1"></div> 372 <div style="grid-row:y -1"></div> 373 <div style="grid-row:y -2"></div> 374 <div style="grid-row:y -3"></div> 375 <div style="grid-row:y -4"></div> 376 <div style="grid-row:y -5"></div> 377 </div></div> 378 379 <div class="grid fit-3b"><div class="subgrid"> 380 <div style="grid-row:y 5"></div> 381 <div style="grid-row:y 4"></div> 382 <div style="grid-row:y 3"></div> 383 <div style="grid-row:y 2"></div> 384 <div style="grid-row:y 1"></div> 385 <div style="grid-row:y -1"></div> 386 <div style="grid-row:y -2"></div> 387 <div style="grid-row:y -3"></div> 388 <div style="grid-row:y -4"></div> 389 <div style="grid-row:y -5"></div> 390 </div></div> 391 392 <div class="grid fit-3c"><div class="subgrid"> 393 <div style="grid-row:y 5"></div> 394 <div style="grid-row:y 4"></div> 395 <div style="grid-row:y 3"></div> 396 <div style="grid-row:y 2"></div> 397 <div style="grid-row:y 1"></div> 398 <div style="grid-row:y -1"></div> 399 <div style="grid-row:y -2"></div> 400 <div style="grid-row:y -3"></div> 401 <div style="grid-row:y -4"></div> 402 <div style="grid-row:y -5"></div> 403 </div></div> 404 405 <div class="grid fit-4a"><div class="subgrid"> 406 <div style="grid-row:y 5"></div> 407 <div style="grid-row:y 4"></div> 408 <div style="grid-row:y 3"></div> 409 <div style="grid-row:y 2"></div> 410 <div style="grid-row:y 1"></div> 411 <div style="grid-row:y -1"></div> 412 <div style="grid-row:y -2"></div> 413 <div style="grid-row:y -3"></div> 414 <div style="grid-row:y -4"></div> 415 <div style="grid-row:y -5"></div> 416 </div></div> 417 418 <div class="grid fit-4b"><div class="subgrid"> 419 <div style="grid-row:y 5"></div> 420 <div style="grid-row:y 4"></div> 421 <div style="grid-row:y 3"></div> 422 <div style="grid-row:y 2"></div> 423 <div style="grid-row:y 1"></div> 424 <div style="grid-row:y -1"></div> 425 <div style="grid-row:y -2"></div> 426 <div style="grid-row:y -3"></div> 427 <div style="grid-row:y -4"></div> 428 <div style="grid-row:y -5"></div> 429 </div></div> 430 431 <div class="grid fit-5"><div class="subgrid"> 432 <div style="grid-row:y 5"></div> 433 <div style="grid-row:y 4"></div> 434 <div style="grid-row:y 3"></div> 435 <div style="grid-row:y 2"></div> 436 <div style="grid-row:y 1"></div> 437 <div style="grid-row:y -1"></div> 438 <div style="grid-row:y -2"></div> 439 <div style="grid-row:y -3"></div> 440 <div style="grid-row:y -4"></div> 441 <div style="grid-row:y -5"></div> 442 </div></div> 443 444 <div id="report"></div> 445 446 <script> 447 const expectedResults = [ 448 "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px", 449 "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px", 450 "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]", 451 "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]", 452 "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]", 453 "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px", 454 "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]", 455 "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]", 456 "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]", 457 "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px", 458 "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", 459 "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", 460 "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px", 461 "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]", 462 "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", 463 "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]", 464 "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]", 465 "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px", 466 "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", 467 "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", 468 "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px", 469 "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px", 470 "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", 471 "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", 472 "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px", 473 "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", 474 "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", 475 "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", 476 ]; 477 [...document.querySelectorAll('.grid')].forEach(function(grid, i) { 478 let actual = window.getComputedStyle(grid)['grid-template-rows']; 479 let expected = expectedResults[i]; 480 if (actual != expected) { 481 let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + 482 " Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n"; 483 report.appendChild(document.createTextNode(err)); 484 } 485 }); 486 </script> 487 488 </body> 489 </html>