summaryrefslogtreecommitdiffstats
path: root/dom/grid/test/chrome/test_grid_areas.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_areas.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_areas.html')
-rw-r--r--dom/grid/test/chrome/test_grid_areas.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/dom/grid/test/chrome/test_grid_areas.html b/dom/grid/test/chrome/test_grid_areas.html
new file mode 100644
index 000000000..2f5d8ea44
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_areas.html
@@ -0,0 +1,143 @@
+<!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;
+ width: 600px;
+ height: 600px;
+ grid-gap: 20px;
+ grid-template-columns: 50px 1fr 50px;
+ grid-template-rows: 1fr 1fr 1fr;
+ grid-template-areas: "areaA areaA ....."
+ "areaB areaC areaC"
+ "areaB areaC areaC";
+ background-color: #f00;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+.a {
+ grid-area: areaA;
+}
+.b {
+ grid-area: areaB;
+}
+.c {
+ grid-area: areaC;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var grid = wrapper.getGridFragments()[0];
+
+ // test existence of property
+ isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");
+
+ if (typeof(grid.areas) != "undefined") {
+ // test that the right number of areas are reported
+ is(grid.areas.length, 3, "3 areas are reported.");
+
+ if (grid.areas.length == 3) {
+ // test area names
+ is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
+ is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
+ is(grid.areas[2].name, "areaC", "Area 2 has proper name.");
+
+ // test area types
+ is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
+ is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
+ is(grid.areas[2].type, "explicit", "Area 2 is explicit.");
+
+ // test numbers of start and end lines
+ is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
+ is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
+ is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
+ is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");
+
+ is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
+ is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
+ is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
+ is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");
+
+ is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
+ is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
+ is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
+ is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");
+
+ // test names of all the row lines
+ isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
+ "Grid row line 1 has the name 'areaA-start'."
+ );
+
+ isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
+ "Grid row line 2 has the name 'areaA-end'."
+ );
+ isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
+ "Grid row line 2 has the name 'areaB-start'."
+ );
+ isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
+ "Grid row line 2 has the name 'areaC-start'."
+ );
+
+ is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
+
+ isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
+ "Grid row line 4 has the name 'areaB-end'."
+ );
+ isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
+ "Grid row line 4 has the name 'areaC-end'."
+ );
+
+ // test names of all the column lines
+ isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
+ "Grid column line 1 has the name 'areaA-start'."
+ );
+ isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
+ "Grid column line 1 has the name 'areaB-start'."
+ );
+
+ isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
+ "Grid column line 2 has the name 'areaB-end'."
+ );
+ isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
+ "Grid column line 2 has the name 'areaC-start'."
+ );
+
+ isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
+ "Grid column line 3 has the name 'areaA-end'."
+ );
+
+ isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
+ "Grid column line 4 has the name 'areaC-end'."
+ );
+ }
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper" class="wrapper">
+ <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>
+
+</body>
+</html>