test_grid_repeat_auto_fill.html (17346B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 body { 9 margin: 40px; 10 } 11 .wrapper { 12 display: grid; 13 width: 600px; 14 grid-gap: 0px; 15 grid-auto-column: 50px; 16 background-color: #f00; 17 } 18 .grid1 { 19 grid-template-columns: 50px 0px repeat(auto-fill, 100px); 20 } 21 .grid2 { 22 grid-template-columns: 50px 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after] 0px [final]; 23 } 24 .grid3 { 25 grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; 26 } 27 .grid4 { 28 grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px); 29 } 30 .grid5 { 31 grid-template-columns: [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; 32 } 33 .grid6 { 34 grid-template-columns: [first] 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; 35 } 36 .grid7 { 37 grid-template-columns: [real-before before] repeat(auto-fill, [before] 100px [after]) [after real-after] 0px [final]; 38 } 39 .grid8 { 40 grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after]; 41 } 42 .grid9 { 43 grid-template-columns: [real-before] repeat(auto-fill, 100px [after]) [real-after]; 44 } 45 .grid10 { 46 grid-template-columns: [real-before] repeat(auto-fill, [before] 100px) [real-after]; 47 } 48 .grid11 { 49 grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after]; 50 } 51 .grid12 { 52 grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after] 10px; 53 } 54 .grid13 { 55 grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) 10px; 56 } 57 .grid14 { 58 grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) 10px; 59 } 60 .grid15 { 61 grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px; 62 } 63 .grid16 { 64 grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px; 65 } 66 .grid17 { 67 grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px [final]; 68 } 69 .grid18 { 70 grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px [final]; 71 } 72 .grid19 { 73 grid-template-columns: repeat(auto-fill, [before] 1000px); 74 } 75 .grid20 { 76 grid-column: 4 / -1; 77 grid-template-columns: subgrid repeat(auto-fill, [x]); 78 } 79 .grid21 { 80 grid-column: 4 / -1; 81 grid-template-columns: subgrid [a] repeat(auto-fill, [x]) [b]; 82 } 83 84 .box { 85 background-color: #444; 86 color: #fff; 87 } 88 .a { 89 grid-column: auto; 90 } 91 .b { 92 grid-column: 4; 93 } 94 .c { 95 grid-column: 6; 96 } 97 .d { 98 grid-column: 7; 99 } 100 .e { 101 grid-column: 5; 102 } 103 .f { 104 grid-column: -9; 105 } 106 107 </style> 108 109 <script> 110 "use strict"; 111 112 SimpleTest.waitForExplicitFinish(); 113 114 function testLines(elementName, grid, expectedValues) { 115 is(grid.cols.lines.length, expectedValues.length, elementName + " has expected number of lines."); 116 117 for (let i = 0; i < grid.cols.lines.length; i++) { 118 // 'number' is optional. 119 if (typeof(expectedValues[i].number) != "undefined") { 120 is(grid.cols.lines[i].number, expectedValues[i].number, elementName + " line " + (i + 1) + " has expected number."); 121 } else { 122 // If 'number' is omitted, assume that first line is line 1 and increase from there. 123 is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number."); 124 } 125 126 // 'negativeNumber' is optional. 127 if (typeof(expectedValues[i].negativeNumber) != "undefined") { 128 // Check for the supplied number. 129 is(grid.cols.lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line " + (i + 1) + " has expected negativeNumber."); 130 } 131 132 // 'start' is optional. 133 if (typeof(expectedValues[i].start) != "undefined") { 134 is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start."); 135 } 136 137 // 'breadth' is optional. 138 if (typeof(expectedValues[i].breadth) != "undefined") { 139 is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth."); 140 } 141 142 // 'names' is optional. 143 if (typeof(expectedValues[i].names) != "undefined") { 144 is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names."); 145 } 146 147 // 'todo_names' is optional. 148 if (typeof(expectedValues[i].todo_names) != "undefined") { 149 todo_is(grid.cols.lines[i].names + "", expectedValues[i].todo_names, elementName + " line " + (i + 1) + " has expected names."); 150 } 151 } 152 } 153 154 function runTests() { 155 let wrapper; 156 let grid; 157 let expectedValues; 158 159 wrapper = document.getElementById("wrapper1"); 160 grid = wrapper.getGridFragments()[0]; 161 162 // test auto-fill count 163 is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fill columns."); 164 165 // test resolved value of grid-template-columns 166 let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; 167 is(templateColumnsText, "50px 0px 100px 100px 100px 100px 100px", 168 "Resolved value of grid-template-columns is as expected."); 169 170 // test starts, breadths, and states 171 expectedValues = [ 172 { "start": 0, 173 "breadth": 50, 174 "state": "static" }, 175 { "start": 50, 176 "breadth": 0, 177 "state": "static" }, 178 { "start": 50, 179 "breadth": 100, 180 "state": "repeat" }, 181 { "start": 150, 182 "breadth": 100, 183 "state": "repeat" }, 184 { "start": 250, 185 "breadth": 100, 186 "state": "repeat" }, 187 { "start": 350, 188 "breadth": 100, 189 "state": "repeat" }, 190 { "start": 450, 191 "breadth": 100, 192 "state": "repeat" }, 193 ]; 194 for (let i = 0; i < grid.cols.tracks.length; i++) { 195 is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start."); 196 is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth."); 197 is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state."); 198 } 199 200 201 wrapper = document.getElementById("wrapper2"); 202 grid = wrapper.getGridFragments()[0]; 203 204 // test auto-fill count 205 is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fill columns."); 206 207 // test resolved value of grid-template-columns 208 templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; 209 is(templateColumnsText, "50px 0px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after] 0px [final]", 210 "Resolved value of grid-template-columns is as expected."); 211 212 // test starts and names 213 expectedValues = [ 214 { "start": 0, 215 "names": "" }, 216 { "start": 50, 217 "names": "" }, 218 { "start": 50, 219 "names": "real-before,before" }, 220 { "start": 150, 221 "names": "after,before" }, 222 { "start": 250, 223 "names": "after,before" }, 224 { "start": 350, 225 "names": "after,before" }, 226 { "start": 450, 227 "names": "after,before" }, 228 { "start": 550, 229 "names": "after,real-after" }, 230 { "start": 550, 231 "names": "final" }, 232 ]; 233 testLines("wrapper2", grid, expectedValues); 234 235 236 wrapper = document.getElementById("wrapper3"); 237 grid = wrapper.getGridFragments()[0]; 238 239 // test resolved value of grid-template-columns 240 templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; 241 is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", 242 "Resolved value of grid-template-columns is as expected."); 243 244 245 wrapper = document.getElementById("wrapper4"); 246 grid = wrapper.getGridFragments()[0]; 247 248 // test auto-fill count of tracks 249 is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns."); 250 251 if (grid.cols.tracks.length == 10) { 252 // test for static and repeat 253 is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static."); 254 is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat."); 255 } 256 257 258 wrapper = document.getElementById("wrapper5"); 259 grid = wrapper.getGridFragments()[0]; 260 261 // test resolved value of grid-template-columns 262 templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; 263 is(templateColumnsText, "[real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", "Resolved value of grid-template-columns is as expected."); 264 265 266 wrapper = document.getElementById("wrapper6"); 267 grid = wrapper.getGridFragments()[0]; 268 269 // test starts and names 270 expectedValues = [ 271 { "start": 0, 272 "names": "first" }, 273 { "start": 0, 274 "names": "real-before,before" }, 275 { "start": 100, 276 "names": "after,before" }, 277 { "start": 200, 278 "names": "after,before" }, 279 { "start": 300, 280 "names": "after,before" }, 281 { "start": 400, 282 "names": "after,before" }, 283 { "start": 500, 284 "names": "after,before" }, 285 { "start": 600, 286 "names": "after,real-after" }, 287 ]; 288 testLines("wrapper6", grid, expectedValues); 289 290 291 wrapper = document.getElementById("wrapper7"); 292 grid = wrapper.getGridFragments()[0]; 293 294 // test starts and names 295 expectedValues = [ 296 { "start": 0, 297 "names": "real-before,before" }, 298 { "start": 100, 299 "names": "after,before" }, 300 { "start": 200, 301 "names": "after,before" }, 302 { "start": 300, 303 "names": "after,before" }, 304 { "start": 400, 305 "names": "after,before" }, 306 { "start": 500, 307 "names": "after,before" }, 308 { "start": 600, 309 "names": "after,real-after" }, 310 { "start": 600, 311 "names": "final" }, 312 ]; 313 testLines("wrapper7", grid, expectedValues); 314 315 316 wrapper = document.getElementById("wrapper8"); 317 grid = wrapper.getGridFragments()[0]; 318 319 // test starts and names 320 expectedValues = [ 321 { "start": 0, 322 "names": "real-before,before" }, 323 { "start": 1000, 324 "names": "after,real-after" }, 325 ]; 326 testLines("wrapper8", grid, expectedValues); 327 328 329 wrapper = document.getElementById("wrapper8b"); 330 grid = wrapper.getGridFragments()[0]; 331 332 // test starts and names 333 expectedValues = [ 334 { "number": 0 }, 335 { "number": 0 }, 336 { "number": 0 }, 337 { "number": 0 }, 338 { "number": 0 }, 339 { "number": 0 }, 340 { "number": 0 }, 341 { "number": 1, 342 "names": "real-before,before" }, 343 { "number": 2, 344 "names": "after,real-after" }, 345 ]; 346 testLines("wrapper8b", grid, expectedValues); 347 348 349 wrapper = document.getElementById("wrapper9"); 350 grid = wrapper.getGridFragments()[0]; 351 352 // test starts and names 353 expectedValues = [ 354 { "start": 0, 355 "names": "real-before" }, 356 { "start": 100, 357 "names": "after" }, 358 { "start": 200, 359 "names": "after" }, 360 { "start": 300, 361 "names": "after" }, 362 { "start": 400, 363 "names": "after" }, 364 { "start": 500, 365 "names": "after" }, 366 { "start": 600, 367 "names": "after,real-after" }, 368 ]; 369 testLines("wrapper9", grid, expectedValues); 370 371 372 wrapper = document.getElementById("wrapper10"); 373 grid = wrapper.getGridFragments()[0]; 374 375 // test starts and names 376 expectedValues = [ 377 { "start": 0, 378 "names": "real-before,before" }, 379 { "start": 100, 380 "names": "before" }, 381 { "start": 200, 382 "names": "before" }, 383 { "start": 300, 384 "names": "before" }, 385 { "start": 400, 386 "names": "before" }, 387 { "start": 500, 388 "names": "before" }, 389 { "start": 600, 390 "names": "real-after" }, 391 ]; 392 testLines("wrapper10", grid, expectedValues); 393 394 wrapper = document.getElementById("wrapper11"); 395 grid = wrapper.getGridFragments()[0]; 396 397 // test starts and names 398 expectedValues = [ 399 { "start": 0, 400 "names": "" }, 401 { "start": 10, 402 "names": "real-before,before" }, 403 { "start": 1010, 404 "names": "after,real-after" }, 405 ]; 406 testLines("wrapper11", grid, expectedValues); 407 408 wrapper = document.getElementById("wrapper12"); 409 grid = wrapper.getGridFragments()[0]; 410 411 // test starts and names 412 expectedValues = [ 413 { "start": 0, 414 "names": "" }, 415 { "start": 10, 416 "names": "real-before,before" }, 417 { "start": 1010, 418 "names": "after,real-after" }, 419 { "start": 1020, 420 "names": "" }, 421 ]; 422 testLines("wrapper12", grid, expectedValues); 423 424 wrapper = document.getElementById("wrapper13"); 425 grid = wrapper.getGridFragments()[0]; 426 427 // test starts and names 428 expectedValues = [ 429 { "start": 0, 430 "names": "" }, 431 { "start": 10, 432 "names": "real-before,before" }, 433 { "start": 1010, 434 "names": "after" }, 435 { "start": 1020, 436 "names": "" }, 437 ]; 438 testLines("wrapper13", grid, expectedValues); 439 440 wrapper = document.getElementById("wrapper14"); 441 grid = wrapper.getGridFragments()[0]; 442 443 // test starts and names 444 expectedValues = [ 445 { "start": 0, 446 "names": "real-before,before" }, 447 { "start": 1000, 448 "names": "after" }, 449 { "start": 1010, 450 "names": "" }, 451 ]; 452 testLines("wrapper14", grid, expectedValues); 453 454 wrapper = document.getElementById("wrapper15"); 455 grid = wrapper.getGridFragments()[0]; 456 457 // test starts and names 458 expectedValues = [ 459 { "start": 0, 460 "names": "before" }, 461 { "start": 1000, 462 "names": "after" }, 463 { "start": 1010, 464 "names": "" }, 465 ]; 466 testLines("wrapper15", grid, expectedValues); 467 468 wrapper = document.getElementById("wrapper16"); 469 grid = wrapper.getGridFragments()[0]; 470 471 // test starts and names 472 expectedValues = [ 473 { "start": 0, 474 "names": "before" }, 475 { "start": 1000, 476 "names": "after,real-after" }, 477 { "start": 1010, 478 "names": "" }, 479 ]; 480 testLines("wrapper16", grid, expectedValues); 481 482 wrapper = document.getElementById("wrapper17"); 483 grid = wrapper.getGridFragments()[0]; 484 485 // test starts and names 486 expectedValues = [ 487 { "start": 0, 488 "names": "before" }, 489 { "start": 1000, 490 "names": "after,real-after" }, 491 { "start": 1010, 492 "names": "final" }, 493 ]; 494 testLines("wrapper17", grid, expectedValues); 495 496 wrapper = document.getElementById("wrapper18"); 497 grid = wrapper.getGridFragments()[0]; 498 499 // test starts and names 500 expectedValues = [ 501 { "start": 0, 502 "names": "before" }, 503 { "start": 1000, 504 "names": "after" }, 505 { "start": 1010, 506 "names": "final" }, 507 ]; 508 testLines("wrapper18", grid, expectedValues); 509 510 wrapper = document.getElementById("wrapper19"); 511 grid = wrapper.getGridFragments()[0]; 512 513 // test starts and names 514 expectedValues = [ 515 { "start": 0, 516 "names": "before" }, 517 { "start": 1000, 518 "names": "" }, 519 ]; 520 testLines("wrapper19", grid, expectedValues); 521 522 wrapper = document.getElementById("wrapper20"); 523 grid = wrapper.getGridFragments()[0]; 524 525 // test starts and names 526 expectedValues = [ 527 { "names": "x" }, 528 { "names": "x" }, 529 { "names": "x" }, 530 { "names": "x" }, 531 ]; 532 testLines("wrapper20", grid, expectedValues); 533 534 wrapper = document.getElementById("wrapper21"); 535 grid = wrapper.getGridFragments()[0]; 536 537 // test starts and names 538 expectedValues = [ 539 { "names": "a" }, 540 { "names": "x" }, 541 { "names": "x" }, 542 { "names": "b" }, 543 ]; 544 testLines("wrapper21", grid, expectedValues); 545 546 SimpleTest.finish(); 547 } 548 </script> 549 </head> 550 <body onLoad="runTests();"> 551 552 <div id="wrapper1" class="wrapper grid1"> 553 <div id="boxB" class="box b">B</div> 554 </div> 555 556 <br/> 557 <div id="wrapper2" class="wrapper grid2"> 558 <div id="boxB" class="box b">B</div> 559 <div id="boxC" class="box c">C</div> 560 </div> 561 562 <br/> 563 <div id="wrapper3" class="wrapper grid3"> 564 <div id="boxB" class="box b">B</div> 565 <div id="boxC" class="box c">C</div> 566 <div id="boxD" class="box d">D</div> 567 </div> 568 569 <br/> 570 <div id="wrapper4" class="wrapper grid4"> 571 <div id="boxA" class="box a">A</div> 572 </div> 573 574 <br/> 575 <div id="wrapper5" class="wrapper grid5"> 576 </div> 577 578 <br/> 579 <div id="wrapper6" class="wrapper grid6"> 580 <div id="boxB" class="box b">B</div> 581 </div> 582 583 <br/> 584 <div id="wrapper7" class="wrapper grid7"> 585 <div id="boxB" class="box b">B</div> 586 </div> 587 588 <br/> 589 <div id="wrapper8" class="wrapper grid8"> 590 </div> 591 592 <br/> 593 <div id="wrapper8b" class="wrapper grid8"> 594 <div id="boxF" class="box f">F</div> 595 </div> 596 597 <br/> 598 <div id="wrapper9" class="wrapper grid9"> 599 <div id="boxB" class="box b">B</div> 600 <div id="boxE" class="box e">E</div> 601 <div id="wrapper20" class="wrapper grid20"><x style="grid-column:x">x</x></div> 602 </div> 603 604 <br/> 605 <div id="wrapper10" class="wrapper grid10"> 606 <div id="boxB" class="box b">B</div> 607 <div id="boxE" class="box e">E</div> 608 <div id="wrapper21" class="wrapper grid21"><x style="grid-column:y">y</x></div> 609 </div> 610 611 <br/> 612 <div id="wrapper11" class="wrapper grid11"> 613 </div> 614 615 <br/> 616 <div id="wrapper12" class="wrapper grid12"> 617 </div> 618 619 <br/> 620 <div id="wrapper13" class="wrapper grid13"> 621 </div> 622 623 <br/> 624 <div id="wrapper14" class="wrapper grid14"> 625 </div> 626 627 <br/> 628 <div id="wrapper15" class="wrapper grid15"> 629 </div> 630 631 <br/> 632 <div id="wrapper16" class="wrapper grid16"> 633 </div> 634 635 <br/> 636 <div id="wrapper17" class="wrapper grid17"> 637 </div> 638 639 <br/> 640 <div id="wrapper18" class="wrapper grid18"> 641 </div> 642 643 <br/> 644 <div id="wrapper19" class="wrapper grid19"> 645 </div> 646 647 </body> 648 </html>