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