diff options
Diffstat (limited to 'dom/grid/test/chrome/test_grid_implicit.html')
| -rw-r--r-- | dom/grid/test/chrome/test_grid_implicit.html | 390 |
1 files changed, 390 insertions, 0 deletions
diff --git a/dom/grid/test/chrome/test_grid_implicit.html b/dom/grid/test/chrome/test_grid_implicit.html new file mode 100644 index 0000000000..82f3284dad --- /dev/null +++ b/dom/grid/test/chrome/test_grid_implicit.html @@ -0,0 +1,390 @@ +<!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> |