Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /dom/grid/test/chrome
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
7 files changed, 1110 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>
diff --git a/dom/grid/test/chrome/test_grid_fragmentation.html b/dom/grid/test/chrome/test_grid_fragmentation.html
new file mode 100644
index 000000000..cec03b12c
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_fragmentation.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-001-ref.html">
+
+  <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 type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+	var wrapper = document.getElementById("wrapper");
+	var fragments = wrapper.getGridFragments();
+	
+	// test fragments of the grid
+	is(fragments.length, 2, "Grid is split into two fragments.");
+	
+	if (fragments.length == 2) {
+		var grid0 = fragments[0];
+		var grid1 = fragments[1];
+	
+		// test that both fragments have one row track and two lines
+		is(grid0.rows.tracks.length, 1, "Fragment 0 has one row track.");
+		is(grid0.rows.lines.length, 2, "Fragment 0 has two row lines.");
+		is(grid1.rows.tracks.length, 1, "Fragment 1 has one row track.");
+		is(grid1.rows.lines.length, 2, "Fragment 1 has two row lines.");
+	}
+	
+	SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div id="wrapper" class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
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>
diff --git a/dom/grid/test/chrome/test_grid_lines.html b/dom/grid/test/chrome/test_grid_lines.html
new file mode 100644
index 000000000..3f98f3ca0
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_lines.html
@@ -0,0 +1,117 @@
+<!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: 400px;
+	grid-gap: 10px;
+	grid-template-columns: 50px [first] repeat(3, [divider] 100px) [last];
+	grid-template-rows: [top1] repeat(1, [top2] 50px) [bot];
+	background-color: #f00;
+}
+.box {
+	background-color: #444;
+	color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+	var wrapper = document.getElementById("wrapper");
+	var grid = wrapper.getGridFragments()[0];
+	
+	// test property existence
+	isnot(typeof(grid.cols.lines), "undefined", "Grid.cols.lines property exists.");
+	
+	if (typeof(grid.cols.lines) != "undefined") {
+		// test column line count
+		is(grid.cols.lines.length, 5,
+			"Grid.cols.lines property has length that matches grid-template-columns."
+		);
+	
+		if (grid.cols.lines.length == 5) {
+			// test column line position
+			is(grid.cols.lines[1].start, 50, "Grid column line 2 position is as expected.");
+
+			// test column line width
+			is(grid.cols.lines[1].breadth, 10, "Grid column line 2 width is as expected.");
+
+			// test column line number
+			is(grid.cols.lines[3].number, 4, "Grid column line 4 number is as expected.");
+
+			// test column line names
+			is(grid.cols.lines[0].names.length, 0, "Grid column line 1 has no names.");
+			
+			is(grid.cols.lines[1].names.length, 2, "Grid column line 2 has 2 names.");
+			isnot(grid.cols.lines[1].names.indexOf("first"), -1,
+				"Grid column line 2 has the name 'first'."
+			);
+			isnot(grid.cols.lines[1].names.indexOf("divider"), -1,
+				"Grid column line 2 has the name 'divider'."
+			);
+			
+			is(grid.cols.lines[4].names.length, 1, "Grid column line 5 has 1 name.");
+			isnot(grid.cols.lines[4].names.indexOf("last"), -1,
+				"Grid column line 5 has the name 'last'."
+			);
+		}
+	}
+	
+	// test property existence
+	isnot(typeof(grid.rows.lines), "undefined", "Grid.rows.lines property exists.");
+	
+	if (typeof(grid.rows.lines) != "undefined") {
+		// test column line count
+		is(grid.rows.lines.length, 3,
+			"Grid.rows.lines property has length that matches grid-template-rows."
+		);
+	
+		if (grid.rows.lines.length == 3) {
+			// test row line names
+			is(grid.rows.lines[0].names.length, 2, "Grid row line 1 has 2 names.");
+			isnot(grid.rows.lines[0].names.indexOf("top1"), -1,
+				"Grid row line 1 has the name 'top1'."
+			);
+			isnot(grid.rows.lines[0].names.indexOf("top2"), -1,
+				"Grid row line 1 has the name 'top2'."
+			);
+			
+			is(grid.rows.lines[1].names.length, 1, "Grid row line 2 has 1 name.");
+			isnot(grid.rows.lines[1].names.indexOf("bot"), -1,
+				"Grid row line 2 has the name 'bot'."
+			);
+			
+			is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
+		}
+	}
+	
+	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 class="box d">D</div>
+		<div class="box e">E</div>
+		<div class="box f">F</div>
+		<div class="box g">G</div>
+		<div class="box h">H</div>
+	</div>
+	
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_object.html b/dom/grid/test/chrome/test_grid_object.html
new file mode 100644
index 000000000..b68152b61
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_object.html
@@ -0,0 +1,69 @@
+<!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: 400px;
+	grid-gap: 10px;
+	grid-template-columns: 100px 1fr 1fr 100px;
+	background-color: #f00;
+}
+.box {
+	background-color: #444;
+	color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+	var wrapper = document.getElementById("wrapper");
+	var boxA = document.getElementById("boxA");
+	
+	// test function existence
+	is(typeof(wrapper.getGridFragments), "function",
+		"getGridFragments function exists."
+	);
+	
+	// test that display:grid elements have grids and display:block elements don't	
+	is(boxA.getGridFragments().length, 0, "No grid on display:block styled objects.");
+	is(wrapper.getGridFragments().length, 1,
+		"One grid on an un-fragmented display:grid styled object."
+	);
+	
+	if (wrapper.getGridFragments().length == 1) {
+		var grid = wrapper.getGridFragments()[0];
+		
+		isnot(typeof(grid.cols), "undefined", "Grid.cols property exists.");
+		isnot(typeof(grid.rows), "undefined", "Grid.rows property exists.");
+	}
+	
+	SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+	<div id="wrapper" class="wrapper">
+		<div id="boxA" class="box a">A</div>
+		<div class="box b">B</div>
+		<div class="box c">C</div>
+		<div class="box d">D</div>
+		<div class="box e">E</div>
+		<div class="box f">F</div>
+		<div class="box g">G</div>
+		<div class="box h">H</div>
+	</div>
+	
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_repeats.html b/dom/grid/test/chrome/test_grid_repeats.html
new file mode 100644
index 000000000..34ae7da4e
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_repeats.html
@@ -0,0 +1,358 @@
+<!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;
+	grid-gap: 0px;
+	background-color: #f00;
+}
+.grid1 {
+	grid-template-columns: 50px 0px repeat(auto-fit, 100px);
+}
+.grid2 {
+	grid-template-columns: 50px 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
+}
+.grid3 {
+	grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid4 {
+	grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px);
+}
+.grid5 {
+	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid6 {
+	grid-template-columns: [first] 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid7 {
+	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
+}
+.grid8 {
+	grid-template-columns: [real-before] repeat(auto-fit, [before] 1000px [after]) [real-after];
+}
+.grid9 {
+	grid-template-columns: [real-before] repeat(auto-fit, 100px [after]) [real-after];
+}
+.grid10 {
+	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px) [real-after];
+}
+.box {
+	background-color: #444;
+	color: #fff;
+}
+.a {
+	grid-column: auto;
+}
+.b {
+	grid-column: 4;
+}
+.c {
+	grid-column: 6;
+}
+.d {
+	grid-column: 7;
+}
+.e {
+	grid-column: 5;
+}
+
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, grid, expectedValues) {
+	for (let i = 0; i < grid.cols.lines.length; i++) {
+		is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
+		is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
+		is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
+		is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
+	}
+}
+
+function runTests() {
+	let wrapper = document.getElementById("wrapper1");
+	let grid = wrapper.getGridFragments()[0];
+
+	// test auto-fit count
+	is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fit columns.");
+
+	// test resolved value of grid-template-columns
+	let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+	is(templateColumnsText, "50px 0px 0px 100px 0px 0px 0px",
+		"Resolved value of grid-template-columns reports removed auto-fits as '0px'.");
+
+	// test starts, breadths, and states
+	let expectedValues = [
+		{ "start": 0,
+		  "breadth": 50,
+		  "state": "static" },
+		{ "start": 50,
+		  "breadth": 0,
+		  "state": "static" },
+		{ "start": 50,
+		  "breadth": 0,
+		  "state": "removed" },
+		{ "start": 50,
+		  "breadth": 100,
+		  "state": "repeat" },
+		{ "start": 150,
+		  "breadth": 0,
+		  "state": "removed" },
+		{ "start": 150,
+		  "breadth": 0,
+		  "state": "removed" },
+		{ "start": 150,
+		  "breadth": 0,
+		  "state": "removed" },
+	];
+	for (let i = 0; i < grid.cols.tracks.length; i++) {
+		is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start.");
+		is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth.");
+		is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state.");
+	}
+
+
+	wrapper = document.getElementById("wrapper2");
+	grid = wrapper.getGridFragments()[0];
+
+	// test auto-fit count
+	is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fit columns.");
+
+	// test resolved value of grid-template-columns
+	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+	is(templateColumnsText, "50px 0px [real-before before] 0px [after before] 100px [after before] 0px [after before] 100px [after before] 0px [after real-after] 0px [final]",
+		"Resolved value of grid-template-columns reports lines for removed tracks.");
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "" },
+		{ "start": 50,
+		  "names": "" },
+		{ "start": 50,
+		  "names": "real-before,before" },
+		{ "start": 50,
+		  "names": "after,before" },
+		{ "start": 150,
+		  "names": "after,before" },
+		{ "start": 150,
+		  "names": "after,before" },
+		{ "start": 250,
+		  "names": "after,before" },
+		{ "start": 250,
+		  "names": "after,real-after" },
+		{ "start": 250,
+		  "names": "final" },
+	];
+	testLines("wrapper2", grid, expectedValues);
+
+
+	wrapper = document.getElementById("wrapper3");
+	grid = wrapper.getGridFragments()[0];
+
+	// test resolved value of grid-template-columns
+	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+	is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 0px [after before] 100px [after before] 100px [after real-after]",
+		"Resolved value of grid-template-columns reports lines for removed tracks.");
+
+
+	wrapper = document.getElementById("wrapper4");
+	grid = wrapper.getGridFragments()[0];
+
+	// test auto-fill count of tracks
+	is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns.");
+
+	if (grid.cols.tracks.length == 10) {
+		// test for static and repeat
+		is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static.");
+		is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat.");
+	}
+
+
+	wrapper = document.getElementById("wrapper5");
+	grid = wrapper.getGridFragments()[0];
+
+	// test resolved value of grid-template-columns
+	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+	is(templateColumnsText, "[real-before before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after real-after]", "Resolved value of grid-template-columns no longer lists 'none' when all auto-fit tracks are empty.");
+
+
+	wrapper = document.getElementById("wrapper6");
+	grid = wrapper.getGridFragments()[0];
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "first" },
+		{ "start": 0,
+		  "names": "real-before,before" },
+		{ "start": 0,
+		  "names": "after,before" },
+		{ "start": 0,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,real-after" },
+	];
+	testLines("wrapper6", grid, expectedValues);
+
+
+	wrapper = document.getElementById("wrapper7");
+	grid = wrapper.getGridFragments()[0];
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "real-before,before" },
+		{ "start": 0,
+		  "names": "after,before" },
+		{ "start": 0,
+		  "names": "after,before" },
+		{ "start": 0,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,before" },
+		{ "start": 100,
+		  "names": "after,real-after" },
+		{ "start": 100,
+		  "names": "final" },
+	];
+	testLines("wrapper7", grid, expectedValues);
+
+
+	wrapper = document.getElementById("wrapper8");
+	grid = wrapper.getGridFragments()[0];
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "real-before,before" },
+		{ "start": 0,
+		  "names": "after,real-after" },
+	];
+	testLines("wrapper8", grid, expectedValues);
+
+
+	wrapper = document.getElementById("wrapper9");
+	grid = wrapper.getGridFragments()[0];
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "real-before" },
+		{ "start": 0,
+		  "names": "after" },
+		{ "start": 0,
+		  "names": "after" },
+		{ "start": 0,
+		  "names": "after" },
+		{ "start": 100,
+		  "names": "after" },
+		{ "start": 200,
+		  "names": "after" },
+		{ "start": 200,
+		  "names": "after,real-after" },
+	];
+	testLines("wrapper9", grid, expectedValues);
+
+
+	wrapper = document.getElementById("wrapper10");
+	grid = wrapper.getGridFragments()[0];
+
+	// test starts and names
+	expectedValues = [
+		{ "start": 0,
+		  "names": "real-before,before" },
+		{ "start": 0,
+		  "names": "before" },
+		{ "start": 0,
+		  "names": "before" },
+		{ "start": 0,
+		  "names": "before" },
+		{ "start": 100,
+		  "names": "before" },
+		{ "start": 200,
+		  "names": "before" },
+		{ "start": 200,
+		  "names": "real-after" },
+	];
+	testLines("wrapper10", grid, expectedValues);
+
+	SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+	<div id="wrapper1" class="wrapper grid1">
+		<div id="boxB" class="box b">B</div>
+	</div>
+
+	<br/>
+	<div id="wrapper2" class="wrapper grid2">
+		<div id="boxB" class="box b">B</div>
+		<div id="boxC" class="box c">C</div>
+	</div>
+
+	<br/>
+	<div id="wrapper3" class="wrapper grid3">
+		<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="wrapper4" class="wrapper grid4">
+		<div id="boxA" class="box a">A</div>
+	</div>
+
+	<br/>
+	<div id="wrapper5" class="wrapper grid5">
+	</div>
+
+	<br/>
+	<div id="wrapper6" class="wrapper grid6">
+		<div id="boxB" class="box b">B</div>
+	</div>
+
+	<br/>
+	<div id="wrapper7" class="wrapper grid7">
+		<div id="boxB" class="box b">B</div>
+	</div>
+
+	<br/>
+	<div id="wrapper8" class="wrapper grid8">
+	</div>
+
+	<br/>
+	<div id="wrapper9" class="wrapper grid9">
+		<div id="boxB" class="box b">B</div>
+		<div id="boxE" class="box e">E</div>
+	</div>
+
+	<br/>
+	<div id="wrapper10" class="wrapper grid10">
+		<div id="boxB" class="box b">B</div>
+		<div id="boxE" class="box e">E</div>
+	</div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_tracks.html b/dom/grid/test/chrome/test_grid_tracks.html
new file mode 100644
index 000000000..9b58cd50d
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_tracks.html
@@ -0,0 +1,85 @@
+<!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: 400px;
+	grid-gap: 10px;
+	grid-template-columns: 100px 1fr 1fr 100px;
+	background-color: #f00;
+}
+.box {
+	background-color: #444;
+	color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+	var wrapper = document.getElementById("wrapper");
+	var grid = wrapper.getGridFragments()[0];
+	var boxA = document.getElementById("boxA");
+	var boxB = document.getElementById("boxB");
+	
+	// test property existence
+	isnot(typeof(grid.cols.tracks), "undefined", "Grid.cols.tracks property exists.");
+	isnot(typeof(grid.rows.tracks), "undefined", "Grid.rows.tracks property exists.");
+	
+	if ((typeof(grid.cols.tracks) != "undefined") &&
+		(typeof(grid.rows.tracks) != "undefined")) {
+		// test column and row track counts
+		is(grid.cols.tracks.length, 4,
+			"Grid.cols.tracks property has length that matches grid-template-columns."
+		);
+		is(grid.rows.tracks.length, 2,
+			"Grid.rows.tracks property has length that matches content."
+		);
+	
+		if((grid.cols.tracks.length == 4) &&
+		   (grid.rows.tracks.length == 2)) {
+			// test column track position
+			is(grid.cols.tracks[1].start, 110, "Grid column track 2 position is as expected.");
+	
+			// test column track width
+			is(grid.cols.tracks[0].breadth, boxA.offsetWidth,
+				"Grid column track width (fixed size) matches item width."
+			);
+			is(grid.cols.tracks[1].breadth, boxB.offsetWidth,
+				"Grid column track width (flexible size) matches item width."
+			);
+			is(grid.cols.tracks[1].breadth, grid.cols.tracks[2].breadth,
+				"Grid column track widths with equal proportion flexible size actually are same size."
+			);
+		}
+	}
+	
+	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 class="box c">C</div>
+		<div class="box d">D</div>
+		<div class="box e">E</div>
+		<div class="box f">F</div>
+		<div class="box g">G</div>
+		<div class="box h">H</div>
+	</div>
+	
+</body>
+</html>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /dom/grid/test/chrome
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip