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 0000000000..2f5d8ea442
--- /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>