<!doctype html> <html> <head> <meta charset="utf-8"> <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> <style> body { margin: 40px; } .wrapper { display: grid; grid-gap: 10px; grid-auto-columns: 20px; grid-auto-rows: 20px; background-color: #f00; } .template1 { grid-template-columns: 100px 50px 100px; grid-template-rows: 50px [areaD-start middle] 50px [areaD-end]; grid-template-areas: "areaA areaA ....." "..... areaC areaC"; } .template2 { grid-template-areas: "..... areaA ......"; grid-template-columns: [areaA-start] 50px 50px 50px; } .template3 { grid-template-columns: [areaA-start areaB-end areaC-end areaD-start] 50px [areaA-end areaB-start areaC-start areaD-end]; grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start]; } .template4 { grid-template-columns: 100px 50px 100px; grid-template-rows: 50px; } .template5 { grid-template-columns: [a-end] 100px [b]; } .template6 { grid-template-columns: [foo-end] 100px [foo-start]; } .box { background-color: #444; color: #fff; } .a { grid-area: areaA; } .b { grid-row: span got-this-name-implicitly / 2; grid-column: areaA-end / span 2; } .c { grid-area: areaC; } .d { grid-area: areaD; } .e { grid-column: -7 / 5; } .f { grid-column: a-start / a-end; } .g { grid-column: a-start / 2 a-end; } .h { grid-column: foo-start; } </style> <script> "use strict"; SimpleTest.waitForExplicitFinish(); function runTests() { // test the first grid wrapper let wrapper = document.getElementById("wrapper1"); let grid = wrapper.getGridFragments()[0]; // test column and row line counts is(grid.cols.lines.length, 6, "Grid.cols.lines property has length that respects implicit expansion." ); is(grid.rows.lines.length, 4, "Grid.rows.lines property has length that respects implicit expansion." ); if ((grid.cols.lines.length == 6) && (grid.rows.lines.length == 4)) { // test explicit / implicit lines is(grid.cols.lines[0].type, "explicit", "Grid column line 1 is explicit."); is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit."); is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit."); is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit."); is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number."); is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit."); is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number."); is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit."); is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number."); // test that row line 1 gets the name forced on it by placement of item B todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1, "Grid row line 1 has the name 'got-this-name-implicitly'." ); // test that row line 3 gets its explicit name isnot(grid.rows.lines[2].names.indexOf("middle"), -1, "Grid row line 3 has the name 'middle'." ); // test the names of the implicit column lines that were created for area 'areaD' isnot(grid.cols.lines[4].names.indexOf("areaD-start"), -1, "Grid column line 5 has the name 'areaD-start'." ); isnot(grid.cols.lines[5].names.indexOf("areaD-end"), -1, "Grid column line 6 has the name 'areaD-end'." ); } // test column and row track counts is(grid.cols.tracks.length, 5, "Grid.cols.tracks property has length that respects implicit expansion." ); is(grid.rows.tracks.length, 3, "Grid.rows.tracks property has length that respects implicit expansion." ); if ((grid.cols.tracks.length == 5) && (grid.rows.tracks.length == 3)) { // test explicit / implicit tracks is(grid.cols.tracks[0].type, "explicit", "Grid column track 1 is explicit."); is(grid.cols.tracks[3].type, "implicit", "Grid column track 4 is implicit."); is(grid.cols.tracks[4].type, "implicit", "Grid column track 5 is implicit."); is(grid.rows.tracks[0].type, "implicit", "Grid row track 1 is implicit."); is(grid.rows.tracks[1].type, "explicit", "Grid row track 2 is explicit."); is(grid.rows.tracks[2].type, "explicit", "Grid row track 3 is explicit."); } // test area count is(grid.areas.length, 3, "Grid.areas property has length that respects implicit expansion." ); for (let i = 0; i < grid.areas.length; i++) { let area = grid.areas[i]; if (area.name == "areaD") { is(area.type, "implicit", area.name + " is implicit."); // test lines of implicit areas is(area.rowStart, 3, area.name + " has start row line of 3."); is(area.rowEnd, 4, area.name + " has end row line of 4."); is(area.columnStart, 5, area.name + " has start column line of 5."); is(area.columnEnd, 6, area.name + " has end column line of 6."); } else { is(area.type, "explicit", area.name + " is explicit."); } } // test the second grid wrapper wrapper = document.getElementById("wrapper2"); grid = wrapper.getGridFragments()[0]; // test column and row line counts is(grid.cols.lines.length, 4, "Grid.cols.lines property doesn't expand due to an explicit line declaration." ); is(grid.rows.lines.length, 2, "Grid.rows.lines property has length that respects implicit expansion." ); // test area count is(grid.areas.length, 1, "Grid.areas property has length that respects implicit expansion." ); for (let i = 0; i < grid.areas.length; i++) { let area = grid.areas[i]; if (area.name == "areaA") { is(area.type, "implicit", area.name + " is implicit."); // test lines of implicit areas is(area.rowStart, 1, area.name + " has start row line of 1."); is(area.rowEnd, 2, area.name + " has end row line of 2."); is(area.columnStart, 1, area.name + " has start column line of 1."); is(area.columnEnd, 3, area.name + " has end column line of 3."); } } // test the third grid wrapper wrapper = document.getElementById("wrapper3"); grid = wrapper.getGridFragments()[0]; // test column and row line counts is(grid.cols.lines.length, 2, "Grid.cols.lines property doesn't expand due to an explicit line declaration." ); is(grid.rows.lines.length, 2, "Grid.rows.lines property doesn't expand due to an explicit line declaration." ); if (grid.cols.lines.length == 2 && grid.rows.lines.length == 2) { // check that areaC gets only the explicit line names and // doesn't get the implicit line names is(grid.cols.lines[0].names.indexOf("areaC-start"), -1, "Grid row line 1 doesn't have the name 'areaC-start'." ); isnot(grid.cols.lines[0].names.indexOf("areaC-end"), -1, "Grid row line 1 has the name 'areaC-end'." ); isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1, "Grid row line 2 has the name 'areaC-start'." ); is(grid.cols.lines[1].names.indexOf("areaC-end"), -1, "Grid row line 2 doesn't have the name 'areaC-end'." ); } // test area count is(grid.areas.length, 4, "Grid.areas property reports 4 areas." ); for (let i = 0; i < grid.areas.length; i++) { let area = grid.areas[i]; if (area.name == "areaC") { // test lines of implicit area is(area.rowStart, 1, area.name + " has start row line of 1."); is(area.rowEnd, 2, area.name + " has end row line of 2."); is(area.columnStart, 1, area.name + " has start column line of 1."); is(area.columnEnd, 2, area.name + " has end column line of 2."); } } // test the fourth grid wrapper wrapper = document.getElementById("wrapper4"); grid = wrapper.getGridFragments()[0]; // test column and row line counts is(grid.cols.lines.length, 8, "Grid.cols.lines property expands properly with implicit columns on both sides." ); is(grid.rows.lines.length, 2, "Grid.rows.lines property is as expected" ); if (grid.cols.lines.length == 8) { // check that all the lines get correct implict/explicit type and number let expectedType = [ "implicit", "implicit", "implicit", "explicit", "explicit", "explicit", "explicit", "implicit", ]; let expectedNumber = [ 0, 0, 0, 1, 2, 3, 4, 5, ]; let expectedNegativeNumber = [ -7, -6, -5, -4, -3, -2, -1, 0, ]; for (let i = 0; i < grid.cols.lines.length; i++) { let line = grid.cols.lines[i]; is(line.type, expectedType[i], "Line index " + i + " has expected type."); is(line.number, expectedNumber[i], "Line index " + i + " has expected number."); is(line.negativeNumber, expectedNegativeNumber[i], "Line index " + i + " has expected negative number."); } } // Test the fifth grid wrapper wrapper = document.getElementById("wrapper5"); grid = wrapper.getGridFragments()[0]; // Test that lineName-reversed implicit areas have the correct names. for (let i = 0; i < grid.areas.length; i++) { let area = grid.areas[i]; // test the resulting start/end lines of the areas has: // Start line: [a-end] // End Line: [a-start] if (area.name == "a") { const startLineNames = grid.cols.lines[area.columnStart - 1].names; const endLineNames = grid.cols.lines[area.columnEnd - 1].names; isnot(startLineNames.indexOf("a-end"), -1, `Grid column line ${area.columnStart} has the name a-end`); is(startLineNames.indexOf("a-start"), -1, `Grid column line ${area.columnStart} does not have the name a-start`); isnot(endLineNames.indexOf("a-start"), -1, `Grid column line ${area.columnEnd} has the name a-start`); todo_isnot(endLineNames.indexOf("a-end"), -1, `Grid column line ${area.columnEnd} has the name a-end`); // Also test that the fourth line has the name a-end. todo_isnot(grid.cols.lines[3].names.indexOf("a-end"), -1, "Grid column line 4 has the line name a-end"); } } // Test the sixth grid wrapper wrapper = document.getElementById("wrapper6"); grid = wrapper.getGridFragments()[0]; // Test that the grid has two explicit lines: [foo-end][foo-start] and a third implicit // line that follows. is(grid.cols.lines.length, 3, "Grid should have three lines."); isnot(grid.cols.lines[0].names.indexOf("foo-end"), -1, "Grid column line 1 has the name 'foo-end'", ); isnot(grid.cols.lines[1].names.indexOf("foo-start"), -1, "Grid column line 2 has the name 'foo-start'", ); is(grid.cols.lines[2].type, "implicit", "Grid column line 3 is implicit"); SimpleTest.finish(); } </script> </head> <body onLoad="runTests();"> <div id="wrapper1" class="wrapper template1"> <div id="boxA" class="box a">A</div> <div id="boxB" class="box b">B</div> <div id="boxC" class="box c">C</div> <div id="boxD" class="box d">D</div> </div> <br/> <div id="wrapper2" class="wrapper template2"> <div id="boxA" class="box a">A</div> </div> <br/> <div id="wrapper3" class="wrapper template3"> <div id="boxC" class="box c">C</div> </div> <div id="wrapper4" class="wrapper template4"> <div id="boxE" class="box e">E</div> </div> <div id="wrapper5" class="wrapper template5"> <div id="boxF" class="box f">F</div> <div id="boxG" class="box g">G</div> </div> <div id="wrapper6" class="wrapper template6"> <div id="boxH" class="box h">H</div> </div> </body> </html>