test_grid_implicit.html (11757B)
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 grid-gap: 10px; 14 grid-auto-columns: 20px; 15 grid-auto-rows: 20px; 16 background-color: #f00; 17 } 18 19 .template1 { 20 grid-template-columns: 100px 50px 100px; 21 grid-template-rows: 50px [areaD-start middle] 50px [areaD-end]; 22 grid-template-areas: "areaA areaA ....." 23 "..... areaC areaC"; 24 } 25 26 .template2 { 27 grid-template-areas: "..... areaA ......"; 28 grid-template-columns: [areaA-start] 50px 50px 50px; 29 } 30 31 .template3 { 32 grid-template-columns: [areaA-start areaB-end areaC-end areaD-start] 50px [areaA-end areaB-start areaC-start areaD-end]; 33 grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start]; 34 } 35 36 .template4 { 37 grid-template-columns: 100px 50px 100px; 38 grid-template-rows: 50px; 39 } 40 41 .template5 { 42 grid-template-columns: [a-end] 100px [b]; 43 } 44 45 .template6 { 46 grid-template-columns: [foo-end] 100px [foo-start]; 47 } 48 49 .box { 50 background-color: #444; 51 color: #fff; 52 } 53 .a { 54 grid-area: areaA; 55 } 56 .b { 57 grid-row: span got-this-name-implicitly / 2; 58 grid-column: areaA-end / span 2; 59 } 60 .c { 61 grid-area: areaC; 62 } 63 .d { 64 grid-area: areaD; 65 } 66 .e { 67 grid-column: -7 / 5; 68 } 69 .f { 70 grid-column: a-start / a-end; 71 } 72 .g { 73 grid-column: a-start / 2 a-end; 74 } 75 .h { 76 grid-column: foo-start; 77 } 78 </style> 79 80 <script> 81 "use strict"; 82 83 SimpleTest.waitForExplicitFinish(); 84 85 function runTests() { 86 // test the first grid wrapper 87 let wrapper = document.getElementById("wrapper1"); 88 let grid = wrapper.getGridFragments()[0]; 89 90 // test column and row line counts 91 is(grid.cols.lines.length, 6, 92 "Grid.cols.lines property has length that respects implicit expansion." 93 ); 94 is(grid.rows.lines.length, 4, 95 "Grid.rows.lines property has length that respects implicit expansion." 96 ); 97 98 if ((grid.cols.lines.length == 6) && 99 (grid.rows.lines.length == 4)) { 100 // test explicit / implicit lines 101 is(grid.cols.lines[0].type, "explicit", "Grid column line 1 is explicit."); 102 is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit."); 103 is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit."); 104 105 106 is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit."); 107 is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number."); 108 is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit."); 109 is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number."); 110 is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit."); 111 is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number."); 112 113 // test that row line 1 gets the name forced on it by placement of item B 114 todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1, 115 "Grid row line 1 has the name 'got-this-name-implicitly'." 116 ); 117 118 // test that row line 3 gets its explicit name 119 isnot(grid.rows.lines[2].names.indexOf("middle"), -1, 120 "Grid row line 3 has the name 'middle'." 121 ); 122 123 // test the names of the implicit column lines that were created for area 'areaD' 124 isnot(grid.cols.lines[4].names.indexOf("areaD-start"), -1, 125 "Grid column line 5 has the name 'areaD-start'." 126 ); 127 isnot(grid.cols.lines[5].names.indexOf("areaD-end"), -1, 128 "Grid column line 6 has the name 'areaD-end'." 129 ); 130 } 131 132 // test column and row track counts 133 is(grid.cols.tracks.length, 5, 134 "Grid.cols.tracks property has length that respects implicit expansion." 135 ); 136 is(grid.rows.tracks.length, 3, 137 "Grid.rows.tracks property has length that respects implicit expansion." 138 ); 139 140 if ((grid.cols.tracks.length == 5) && 141 (grid.rows.tracks.length == 3)) { 142 // test explicit / implicit tracks 143 is(grid.cols.tracks[0].type, "explicit", "Grid column track 1 is explicit."); 144 is(grid.cols.tracks[3].type, "implicit", "Grid column track 4 is implicit."); 145 is(grid.cols.tracks[4].type, "implicit", "Grid column track 5 is implicit."); 146 147 is(grid.rows.tracks[0].type, "implicit", "Grid row track 1 is implicit."); 148 is(grid.rows.tracks[1].type, "explicit", "Grid row track 2 is explicit."); 149 is(grid.rows.tracks[2].type, "explicit", "Grid row track 3 is explicit."); 150 } 151 152 // test area count 153 is(grid.areas.length, 3, 154 "Grid.areas property has length that respects implicit expansion." 155 ); 156 157 for (let i = 0; i < grid.areas.length; i++) { 158 let area = grid.areas[i]; 159 if (area.name == "areaD") { 160 is(area.type, "implicit", area.name + " is implicit."); 161 162 // test lines of implicit areas 163 is(area.rowStart, 3, area.name + " has start row line of 3."); 164 is(area.rowEnd, 4, area.name + " has end row line of 4."); 165 is(area.columnStart, 5, area.name + " has start column line of 5."); 166 is(area.columnEnd, 6, area.name + " has end column line of 6."); 167 } else { 168 is(area.type, "explicit", area.name + " is explicit."); 169 } 170 } 171 172 173 // test the second grid wrapper 174 wrapper = document.getElementById("wrapper2"); 175 grid = wrapper.getGridFragments()[0]; 176 177 // test column and row line counts 178 is(grid.cols.lines.length, 4, 179 "Grid.cols.lines property doesn't expand due to an explicit line declaration." 180 ); 181 is(grid.rows.lines.length, 2, 182 "Grid.rows.lines property has length that respects implicit expansion." 183 ); 184 185 // test area count 186 is(grid.areas.length, 1, 187 "Grid.areas property has length that respects implicit expansion." 188 ); 189 190 for (let i = 0; i < grid.areas.length; i++) { 191 let area = grid.areas[i]; 192 if (area.name == "areaA") { 193 is(area.type, "implicit", area.name + " is implicit."); 194 195 // test lines of implicit areas 196 is(area.rowStart, 1, area.name + " has start row line of 1."); 197 is(area.rowEnd, 2, area.name + " has end row line of 2."); 198 is(area.columnStart, 1, area.name + " has start column line of 1."); 199 is(area.columnEnd, 3, area.name + " has end column line of 3."); 200 } 201 } 202 203 204 // test the third grid wrapper 205 wrapper = document.getElementById("wrapper3"); 206 grid = wrapper.getGridFragments()[0]; 207 208 // test column and row line counts 209 is(grid.cols.lines.length, 2, 210 "Grid.cols.lines property doesn't expand due to an explicit line declaration." 211 ); 212 is(grid.rows.lines.length, 2, 213 "Grid.rows.lines property doesn't expand due to an explicit line declaration." 214 ); 215 216 if (grid.cols.lines.length == 2 && grid.rows.lines.length == 2) { 217 // check that areaC gets only the explicit line names and 218 // doesn't get the implicit line names 219 is(grid.cols.lines[0].names.indexOf("areaC-start"), -1, 220 "Grid row line 1 doesn't have the name 'areaC-start'." 221 ); 222 223 isnot(grid.cols.lines[0].names.indexOf("areaC-end"), -1, 224 "Grid row line 1 has the name 'areaC-end'." 225 ); 226 227 isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1, 228 "Grid row line 2 has the name 'areaC-start'." 229 ); 230 231 is(grid.cols.lines[1].names.indexOf("areaC-end"), -1, 232 "Grid row line 2 doesn't have the name 'areaC-end'." 233 ); 234 } 235 236 // test area count 237 is(grid.areas.length, 4, 238 "Grid.areas property reports 4 areas." 239 ); 240 241 for (let i = 0; i < grid.areas.length; i++) { 242 let area = grid.areas[i]; 243 if (area.name == "areaC") { 244 // test lines of implicit area 245 is(area.rowStart, 1, area.name + " has start row line of 1."); 246 is(area.rowEnd, 2, area.name + " has end row line of 2."); 247 is(area.columnStart, 1, area.name + " has start column line of 1."); 248 is(area.columnEnd, 2, area.name + " has end column line of 2."); 249 } 250 } 251 252 // test the fourth grid wrapper 253 wrapper = document.getElementById("wrapper4"); 254 grid = wrapper.getGridFragments()[0]; 255 256 // test column and row line counts 257 is(grid.cols.lines.length, 8, 258 "Grid.cols.lines property expands properly with implicit columns on both sides." 259 ); 260 is(grid.rows.lines.length, 2, 261 "Grid.rows.lines property is as expected" 262 ); 263 264 if (grid.cols.lines.length == 8) { 265 // check that all the lines get correct implict/explicit type and number 266 let expectedType = [ 267 "implicit", 268 "implicit", 269 "implicit", 270 "explicit", 271 "explicit", 272 "explicit", 273 "explicit", 274 "implicit", 275 ]; 276 let expectedNumber = [ 277 0, 278 0, 279 0, 280 1, 281 2, 282 3, 283 4, 284 5, 285 ]; 286 let expectedNegativeNumber = [ 287 -7, 288 -6, 289 -5, 290 -4, 291 -3, 292 -2, 293 -1, 294 0, 295 ]; 296 297 for (let i = 0; i < grid.cols.lines.length; i++) { 298 let line = grid.cols.lines[i]; 299 is(line.type, expectedType[i], "Line index " + i + " has expected type."); 300 is(line.number, expectedNumber[i], "Line index " + i + " has expected number."); 301 is(line.negativeNumber, expectedNegativeNumber[i], "Line index " + i + " has expected negative number."); 302 } 303 } 304 305 // Test the fifth grid wrapper 306 wrapper = document.getElementById("wrapper5"); 307 grid = wrapper.getGridFragments()[0]; 308 309 // Test that lineName-reversed implicit areas have the correct names. 310 for (let i = 0; i < grid.areas.length; i++) { 311 let area = grid.areas[i]; 312 // test the resulting start/end lines of the areas has: 313 // Start line: [a-end] 314 // End Line: [a-start] 315 if (area.name == "a") { 316 const startLineNames = grid.cols.lines[area.columnStart - 1].names; 317 const endLineNames = grid.cols.lines[area.columnEnd - 1].names; 318 319 isnot(startLineNames.indexOf("a-end"), -1, 320 `Grid column line ${area.columnStart} has the name a-end`); 321 is(startLineNames.indexOf("a-start"), -1, 322 `Grid column line ${area.columnStart} does not have the name a-start`); 323 324 isnot(endLineNames.indexOf("a-start"), -1, 325 `Grid column line ${area.columnEnd} has the name a-start`); 326 todo_isnot(endLineNames.indexOf("a-end"), -1, 327 `Grid column line ${area.columnEnd} has the name a-end`); 328 329 // Also test that the fourth line has the name a-end. 330 todo_isnot(grid.cols.lines[3].names.indexOf("a-end"), -1, 331 "Grid column line 4 has the line name a-end"); 332 } 333 } 334 335 // Test the sixth grid wrapper 336 wrapper = document.getElementById("wrapper6"); 337 grid = wrapper.getGridFragments()[0]; 338 339 // Test that the grid has two explicit lines: [foo-end][foo-start] and a third implicit 340 // line that follows. 341 is(grid.cols.lines.length, 3, "Grid should have three lines."); 342 343 isnot(grid.cols.lines[0].names.indexOf("foo-end"), -1, 344 "Grid column line 1 has the name 'foo-end'", 345 ); 346 347 isnot(grid.cols.lines[1].names.indexOf("foo-start"), -1, 348 "Grid column line 2 has the name 'foo-start'", 349 ); 350 351 is(grid.cols.lines[2].type, "implicit", "Grid column line 3 is implicit"); 352 353 SimpleTest.finish(); 354 } 355 </script> 356 </head> 357 <body onLoad="runTests();"> 358 359 <div id="wrapper1" class="wrapper template1"> 360 <div id="boxA" class="box a">A</div> 361 <div id="boxB" class="box b">B</div> 362 <div id="boxC" class="box c">C</div> 363 <div id="boxD" class="box d">D</div> 364 </div> 365 366 <br/> 367 368 <div id="wrapper2" class="wrapper template2"> 369 <div id="boxA" class="box a">A</div> 370 </div> 371 372 <br/> 373 374 <div id="wrapper3" class="wrapper template3"> 375 <div id="boxC" class="box c">C</div> 376 </div> 377 378 <div id="wrapper4" class="wrapper template4"> 379 <div id="boxE" class="box e">E</div> 380 </div> 381 382 <div id="wrapper5" class="wrapper template5"> 383 <div id="boxF" class="box f">F</div> 384 <div id="boxG" class="box g">G</div> 385 </div> 386 <div id="wrapper6" class="wrapper template6"> 387 <div id="boxH" class="box h">H</div> 388 </div> 389 </body> 390 </html>