summaryrefslogtreecommitdiffstats
path: root/dom/grid/test/chrome/test_grid_implicit.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /dom/grid/test/chrome/test_grid_implicit.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'dom/grid/test/chrome/test_grid_implicit.html')
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html250
1 files changed, 250 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 000000000..c7782e0e5
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_implicit.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" 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];
+}
+
+.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;
+}
+</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 1 is implicit.");
+ is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit.");
+ is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit.");
+
+ // 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 (var i = 0; i < grid.areas.length; i++) {
+ var 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 (var i = 0; i < grid.areas.length; i++) {
+ var 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 both the explicit line names and the implicit line names
+ isnot(grid.cols.lines[0].names.indexOf("areaC-start"), -1,
+ "Grid row line 1 has 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'."
+ );
+
+ isnot(grid.cols.lines[1].names.indexOf("areaC-end"), -1,
+ "Grid row line 2 has the name 'areaC-end'."
+ );
+ }
+
+ // test area count
+ is(grid.areas.length, 4,
+ "Grid.areas property reports 4 areas."
+ );
+
+ for (var i = 0; i < grid.areas.length; i++) {
+ var 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.");
+ }
+ }
+
+ 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>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-20 19:22:41 +0000