summaryrefslogtreecommitdiffstats
path: root/dom/grid/test
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--dom/grid/test/chrome.ini11
-rw-r--r--dom/grid/test/chrome/test_grid_areas.html143
-rw-r--r--dom/grid/test/chrome/test_grid_equality.html57
-rw-r--r--dom/grid/test/chrome/test_grid_fragmentation.html86
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html390
-rw-r--r--dom/grid/test/chrome/test_grid_line_numbers.html122
-rw-r--r--dom/grid/test/chrome/test_grid_lines.html104
-rw-r--r--dom/grid/test/chrome/test_grid_object.html114
-rw-r--r--dom/grid/test/chrome/test_grid_repeat_auto_fill.html648
-rw-r--r--dom/grid/test/chrome/test_grid_repeat_auto_fit.html614
-rw-r--r--dom/grid/test/chrome/test_grid_subtree_dirty.html56
-rw-r--r--dom/grid/test/chrome/test_grid_tracks.html85
12 files changed, 2430 insertions, 0 deletions
diff --git a/dom/grid/test/chrome.ini b/dom/grid/test/chrome.ini
new file mode 100644
index 0000000000..6b4dc733b0
--- /dev/null
+++ b/dom/grid/test/chrome.ini
@@ -0,0 +1,11 @@
+[chrome/test_grid_areas.html]
+[chrome/test_grid_equality.html]
+[chrome/test_grid_fragmentation.html]
+[chrome/test_grid_implicit.html]
+[chrome/test_grid_line_numbers.html]
+[chrome/test_grid_lines.html]
+[chrome/test_grid_object.html]
+[chrome/test_grid_repeat_auto_fill.html]
+[chrome/test_grid_repeat_auto_fit.html]
+[chrome/test_grid_subtree_dirty.html]
+[chrome/test_grid_tracks.html]
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..22c7cc53dd
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_areas.html
@@ -0,0 +1,143 @@
+<!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;
+ 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_equality.html b/dom/grid/test/chrome/test_grid_equality.html
new file mode 100644
index 0000000000..741f54d016
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_equality.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+ #grid {
+ display: grid;
+ width: 100px;
+ height: 100px;
+ }
+
+ .cellOriginal {
+ grid-column-end: span 2;
+ }
+
+ .cellChanged {
+ grid-column-end: span 5;
+ }
+</style>
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ const grid = document.getElementById("grid");
+ const cell = document.getElementById("cell");
+
+ const gridA = grid.getGridFragments()[0];
+
+ // Check that grid fragments are equal across reflows.
+ document.documentElement.offsetHeight; // Flush layout.
+ const gridB = grid.getGridFragments()[0];
+ is(gridB, gridA, "Grid fragments should be the same across reflows.");
+
+ // Check that grid fragments are different when styles are different.
+ cell.classList.replace("cellOriginal", "cellChanged");
+ const gridC = grid.getGridFragments()[0];
+ isnot(gridC, gridA, "Grids with different styles should have different fragments.");
+
+ // Check that changing a grid to a matching style results in different fragments.
+ cell.classList.replace("cellChanged", "cellOriginal");
+ const gridD = grid.getGridFragments()[0];
+ isnot(gridD, gridA, "Grids changed to the same styles should have different fragments.");
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+<div id="grid">
+ <div id="cell" class="cellOriginal"></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 0000000000..f9a28ee1a9
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_fragmentation.html
@@ -0,0 +1,86 @@
+<!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 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;
+ -ms-columns: 5;
+ -webkit-columns: 5;
+ columns: 5;
+ -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 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>
diff --git a/dom/grid/test/chrome/test_grid_line_numbers.html b/dom/grid/test/chrome/test_grid_line_numbers.html
new file mode 100644
index 0000000000..b5c5b5e534
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_line_numbers.html
@@ -0,0 +1,122 @@
+<!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: 0px;
+ background-color: #f00;
+}
+.wrapper > div {
+ background-color: #444;
+ color: #fff;
+}
+.repeatColumns {
+ width: 400px;
+ grid-auto-columns: 50px;
+ grid-template-columns: repeat(auto-fit, 100px);
+}
+.repeatRows {
+ height: 400px;
+ grid-auto-rows: 50px;
+ grid-template-rows: repeat(auto-fit, 100px);
+}
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, lines, expectedValues) {
+ is(lines.count, expectedValues.count, elementName + " has expected number of lines.");
+ for (let i = 0; i < lines.length; i++) {
+ is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number.");
+ is(lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line index " + i + " has expected negativeNumber.");
+ }
+}
+
+function runTests() {
+ let grid;
+ let lines;
+ let expectedValues;
+
+ grid = document.getElementById("gridWithColumns").getGridFragments()[0];
+ lines = grid.cols.lines;
+ expectedValues = [
+ { "number": 0,
+ "negativeNumber": -9 },
+ { "number": 0,
+ "negativeNumber": -8 },
+ { "number": 0,
+ "negativeNumber": -7 },
+ { "number": 0,
+ "negativeNumber": -6 },
+ { "number": 1,
+ "negativeNumber": -5 },
+ { "number": 2,
+ "negativeNumber": -4 },
+ { "number": 3,
+ "negativeNumber": -3 },
+ { "number": 4,
+ "negativeNumber": -2 },
+ { "number": 5,
+ "negativeNumber": -1 },
+ { "number": 6,
+ "negativeNumber": 0 },
+ ];
+ testLines("gridWithColumns", lines, expectedValues);
+
+
+ grid = document.getElementById("gridWithRows").getGridFragments()[0];
+ lines = grid.rows.lines;
+ expectedValues = [
+ { "number": 0,
+ "negativeNumber": -9 },
+ { "number": 0,
+ "negativeNumber": -8 },
+ { "number": 0,
+ "negativeNumber": -7 },
+ { "number": 0,
+ "negativeNumber": -6 },
+ { "number": 1,
+ "negativeNumber": -5 },
+ { "number": 2,
+ "negativeNumber": -4 },
+ { "number": 3,
+ "negativeNumber": -3 },
+ { "number": 4,
+ "negativeNumber": -2 },
+ { "number": 5,
+ "negativeNumber": -1 },
+ { "number": 6,
+ "negativeNumber": 0 },
+ ];
+ testLines("gridWithRows", lines, expectedValues);
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div id="gridWithColumns" class="wrapper repeatColumns">
+<div style="grid-column: -9">A</div>
+<div style="grid-column: 2">B</div>
+<div style="grid-column: 5">C</div>
+</div>
+
+<div id="gridWithRows" class="wrapper repeatRows">
+<div style="grid-row: span 4 / 1">A</div>
+<div style="grid-row: 3">B</div>
+<div style="grid-row: 4 / span 2">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 0000000000..c8fa8b6850
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_lines.html
@@ -0,0 +1,104 @@
+<!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;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 50px [first first] repeat(3, [divider] 100px) [last last last last];
+ grid-template-rows: [top1 top2] repeat(1, [top2 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 numbers, positive and negative
+ is(grid.cols.lines[3].number, 4, "Grid column line 4 positive number is as expected.");
+ is(grid.cols.lines[3].negativeNumber, -2, "Grid column line 4 negative 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.");
+ is(grid.cols.lines[1].names + "", "first,divider", "Grid column line 2 has the names 'first,divider'.");
+
+ is(grid.cols.lines[4].names.length, 1, "Grid column line 5 has 1 name.");
+ is(grid.cols.lines[4].names + "", "last", "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.");
+ is(grid.rows.lines[0].names + "", "top1,top2", "Grid row line 1 has the names 'top1,top2'.");
+
+ is(grid.rows.lines[1].names.length, 1, "Grid row line 2 has 1 name.");
+ is(grid.rows.lines[1].names + "", "bot", "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 0000000000..ab8b9abfa0
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_object.html
@@ -0,0 +1,114 @@
+<!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;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 100px 1fr 1fr 100px;
+}
+.oh {
+ overflow: hidden;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ // Test 1: elements styled with display:grid
+ let idsWithGrid = [
+ "gridDiv",
+ "gridFieldset",
+ "gridButton",
+ "gridDivOh",
+ "gridFieldsetOh",
+ "gridButtonOh",
+ ];
+
+ for (let id of idsWithGrid) {
+ let wrapper = document.getElementById(id);
+
+ // test function existence
+ is(typeof(wrapper.getGridFragments), "function",
+ id + ": getGridFragments function exists."
+ );
+
+ // test that wrapper has one grid
+ let gridFragments = wrapper.getGridFragments();
+ is(gridFragments.length, 1,
+ id + ": one grid on an un-fragmented display:grid styled element."
+ );
+
+ // test that the grid has cols and rows properties
+ if (gridFragments.length) {
+ let grid = gridFragments[0];
+ isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
+ isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
+ }
+ }
+
+ // Test 2: elements styled without display:grid
+ let idsWithoutGrid = [
+ "boxA",
+ ];
+
+ for (let id of idsWithoutGrid) {
+ let wrapper = document.getElementById(id);
+
+ // test that wrapper has no grid
+ let gridFragments = wrapper.getGridFragments();
+ is(gridFragments.length, 0,
+ id + ": no grid on element."
+ );
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="gridDiv" class="wrapper">
+ <div id="boxA" class="box">A</div>
+ </div>
+
+ <fieldset id="gridFieldset" class="wrapper">
+ <legend>a fieldset</legend>
+ <label for="name">name</label>
+ <input id="name">
+ </fieldset>
+
+ <button id="gridButton" class="wrapper">
+ <span style="grid-row:2">test</span>
+ </button>
+
+ <div id="gridDivOh" class="wrapper oh">
+ <div id="boxAOh" class="box">A</div>
+ </div>
+
+ <fieldset id="gridFieldsetOh" class="wrapper oh">
+ <legend>a fieldset</legend>
+ <label for="nameOh">name</label>
+ <input id="nameOh">
+ </fieldset>
+
+ <button id="gridButtonOh" class="wrapper oh">
+ <span style="grid-row:2">test</span>
+ </button>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_repeat_auto_fill.html b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html
new file mode 100644
index 0000000000..4a558c434a
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html
@@ -0,0 +1,648 @@
+<!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;
+ width: 600px;
+ grid-gap: 0px;
+ grid-auto-column: 50px;
+ background-color: #f00;
+}
+.grid1 {
+ grid-template-columns: 50px 0px repeat(auto-fill, 100px);
+}
+.grid2 {
+ grid-template-columns: 50px 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after] 0px [final];
+}
+.grid3 {
+ grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
+}
+.grid4 {
+ grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px);
+}
+.grid5 {
+ grid-template-columns: [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
+}
+.grid6 {
+ grid-template-columns: [first] 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after];
+}
+.grid7 {
+ grid-template-columns: [real-before before] repeat(auto-fill, [before] 100px [after]) [after real-after] 0px [final];
+}
+.grid8 {
+ grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after];
+}
+.grid9 {
+ grid-template-columns: [real-before] repeat(auto-fill, 100px [after]) [real-after];
+}
+.grid10 {
+ grid-template-columns: [real-before] repeat(auto-fill, [before] 100px) [real-after];
+}
+.grid11 {
+ grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after];
+}
+.grid12 {
+ grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after] 10px;
+}
+.grid13 {
+ grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) 10px;
+}
+.grid14 {
+ grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) 10px;
+}
+.grid15 {
+ grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px;
+}
+.grid16 {
+ grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px;
+}
+.grid17 {
+ grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px [final];
+}
+.grid18 {
+ grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px [final];
+}
+.grid19 {
+ grid-template-columns: repeat(auto-fill, [before] 1000px);
+}
+.grid20 {
+ grid-column: 4 / -1;
+ grid-template-columns: subgrid repeat(auto-fill, [x]);
+}
+.grid21 {
+ grid-column: 4 / -1;
+ grid-template-columns: subgrid [a] repeat(auto-fill, [x]) [b];
+}
+
+.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;
+}
+.f {
+ grid-column: -9;
+}
+
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, grid, expectedValues) {
+ is(grid.cols.lines.length, expectedValues.length, elementName + " has expected number of lines.");
+
+ for (let i = 0; i < grid.cols.lines.length; i++) {
+ // 'number' is optional.
+ if (typeof(expectedValues[i].number) != "undefined") {
+ is(grid.cols.lines[i].number, expectedValues[i].number, elementName + " line " + (i + 1) + " has expected number.");
+ } else {
+ // If 'number' is omitted, assume that first line is line 1 and increase from there.
+ is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
+ }
+
+ // 'negativeNumber' is optional.
+ if (typeof(expectedValues[i].negativeNumber) != "undefined") {
+ // Check for the supplied number.
+ is(grid.cols.lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line " + (i + 1) + " has expected negativeNumber.");
+ }
+
+ // 'start' is optional.
+ if (typeof(expectedValues[i].start) != "undefined") {
+ is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
+ }
+
+ // 'breadth' is optional.
+ if (typeof(expectedValues[i].breadth) != "undefined") {
+ is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
+ }
+
+ // 'names' is optional.
+ if (typeof(expectedValues[i].names) != "undefined") {
+ is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
+ }
+
+ // 'todo_names' is optional.
+ if (typeof(expectedValues[i].todo_names) != "undefined") {
+ todo_is(grid.cols.lines[i].names + "", expectedValues[i].todo_names, elementName + " line " + (i + 1) + " has expected names.");
+ }
+ }
+}
+
+function runTests() {
+ let wrapper;
+ let grid;
+ let expectedValues;
+
+ wrapper = document.getElementById("wrapper1");
+ grid = wrapper.getGridFragments()[0];
+
+ // test auto-fill count
+ is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fill columns.");
+
+ // test resolved value of grid-template-columns
+ let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "50px 0px 100px 100px 100px 100px 100px",
+ "Resolved value of grid-template-columns is as expected.");
+
+ // test starts, breadths, and states
+ expectedValues = [
+ { "start": 0,
+ "breadth": 50,
+ "state": "static" },
+ { "start": 50,
+ "breadth": 0,
+ "state": "static" },
+ { "start": 50,
+ "breadth": 100,
+ "state": "repeat" },
+ { "start": 150,
+ "breadth": 100,
+ "state": "repeat" },
+ { "start": 250,
+ "breadth": 100,
+ "state": "repeat" },
+ { "start": 350,
+ "breadth": 100,
+ "state": "repeat" },
+ { "start": 450,
+ "breadth": 100,
+ "state": "repeat" },
+ ];
+ 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-fill count
+ is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fill columns.");
+
+ // test resolved value of grid-template-columns
+ templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "50px 0px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after] 0px [final]",
+ "Resolved value of grid-template-columns is as expected.");
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 50,
+ "names": "" },
+ { "start": 50,
+ "names": "real-before,before" },
+ { "start": 150,
+ "names": "after,before" },
+ { "start": 250,
+ "names": "after,before" },
+ { "start": 350,
+ "names": "after,before" },
+ { "start": 450,
+ "names": "after,before" },
+ { "start": 550,
+ "names": "after,real-after" },
+ { "start": 550,
+ "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] 100px [after before] 100px [after before] 100px [after real-after]",
+ "Resolved value of grid-template-columns is as expected.");
+
+
+ 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] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", "Resolved value of grid-template-columns is as expected.");
+
+
+ wrapper = document.getElementById("wrapper6");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "first" },
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 200,
+ "names": "after,before" },
+ { "start": 300,
+ "names": "after,before" },
+ { "start": 400,
+ "names": "after,before" },
+ { "start": 500,
+ "names": "after,before" },
+ { "start": 600,
+ "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": 100,
+ "names": "after,before" },
+ { "start": 200,
+ "names": "after,before" },
+ { "start": 300,
+ "names": "after,before" },
+ { "start": 400,
+ "names": "after,before" },
+ { "start": 500,
+ "names": "after,before" },
+ { "start": 600,
+ "names": "after,real-after" },
+ { "start": 600,
+ "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": 1000,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper8", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper8b");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 1,
+ "names": "real-before,before" },
+ { "number": 2,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper8b", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper9");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before" },
+ { "start": 100,
+ "names": "after" },
+ { "start": 200,
+ "names": "after" },
+ { "start": 300,
+ "names": "after" },
+ { "start": 400,
+ "names": "after" },
+ { "start": 500,
+ "names": "after" },
+ { "start": 600,
+ "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": 100,
+ "names": "before" },
+ { "start": 200,
+ "names": "before" },
+ { "start": 300,
+ "names": "before" },
+ { "start": 400,
+ "names": "before" },
+ { "start": 500,
+ "names": "before" },
+ { "start": 600,
+ "names": "real-after" },
+ ];
+ testLines("wrapper10", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper11");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 1010,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper11", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper12");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 1010,
+ "names": "after,real-after" },
+ { "start": 1020,
+ "names": "" },
+ ];
+ testLines("wrapper12", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper13");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 1010,
+ "names": "after" },
+ { "start": 1020,
+ "names": "" },
+ ];
+ testLines("wrapper13", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper14");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 1000,
+ "names": "after" },
+ { "start": 1010,
+ "names": "" },
+ ];
+ testLines("wrapper14", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper15");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 1000,
+ "names": "after" },
+ { "start": 1010,
+ "names": "" },
+ ];
+ testLines("wrapper15", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper16");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 1000,
+ "names": "after,real-after" },
+ { "start": 1010,
+ "names": "" },
+ ];
+ testLines("wrapper16", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper17");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 1000,
+ "names": "after,real-after" },
+ { "start": 1010,
+ "names": "final" },
+ ];
+ testLines("wrapper17", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper18");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 1000,
+ "names": "after" },
+ { "start": 1010,
+ "names": "final" },
+ ];
+ testLines("wrapper18", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper19");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 1000,
+ "names": "" },
+ ];
+ testLines("wrapper19", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper20");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "names": "x" },
+ { "names": "x" },
+ { "names": "x" },
+ { "names": "x" },
+ ];
+ testLines("wrapper20", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper21");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "names": "a" },
+ { "names": "x" },
+ { "names": "x" },
+ { "names": "b" },
+ ];
+ testLines("wrapper21", 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="wrapper8b" class="wrapper grid8">
+ <div id="boxF" class="box f">F</div>
+ </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 id="wrapper20" class="wrapper grid20"><x style="grid-column:x">x</x></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 id="wrapper21" class="wrapper grid21"><x style="grid-column:y">y</x></div>
+ </div>
+
+ <br/>
+ <div id="wrapper11" class="wrapper grid11">
+ </div>
+
+ <br/>
+ <div id="wrapper12" class="wrapper grid12">
+ </div>
+
+ <br/>
+ <div id="wrapper13" class="wrapper grid13">
+ </div>
+
+ <br/>
+ <div id="wrapper14" class="wrapper grid14">
+ </div>
+
+ <br/>
+ <div id="wrapper15" class="wrapper grid15">
+ </div>
+
+ <br/>
+ <div id="wrapper16" class="wrapper grid16">
+ </div>
+
+ <br/>
+ <div id="wrapper17" class="wrapper grid17">
+ </div>
+
+ <br/>
+ <div id="wrapper18" class="wrapper grid18">
+ </div>
+
+ <br/>
+ <div id="wrapper19" class="wrapper grid19">
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_repeat_auto_fit.html b/dom/grid/test/chrome/test_grid_repeat_auto_fit.html
new file mode 100644
index 0000000000..6643521d43
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_repeat_auto_fit.html
@@ -0,0 +1,614 @@
+<!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;
+ width: 600px;
+ grid-gap: 0px;
+ grid-auto-column: 50px;
+ 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 before] repeat(auto-fit, [before] 100px [after]) [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];
+}
+.grid11 {
+ grid-template-columns: 10px [real-before] repeat(auto-fit, [before] 1000px [after]) [real-after];
+}
+.grid12 {
+ grid-template-columns: 10px [real-before] repeat(auto-fit, [before] 1000px [after]) [real-after] 10px;
+}
+.grid13 {
+ grid-template-columns: 10px [real-before] repeat(auto-fit, [before] 1000px [after]) 10px;
+}
+.grid14 {
+ grid-template-columns: [real-before] repeat(auto-fit, [before] 1000px [after]) 10px;
+}
+.grid15 {
+ grid-template-columns: repeat(auto-fit, [before] 1000px [after]) 10px;
+}
+.grid16 {
+ grid-template-columns: repeat(auto-fit, [before] 1000px [after]) [real-after] 10px;
+}
+.grid17 {
+ grid-template-columns: repeat(auto-fit, [before] 1000px [after]) [real-after] 10px [final];
+}
+.grid18 {
+ grid-template-columns: repeat(auto-fit, [before] 1000px [after]) 10px [final];
+}
+.grid19 {
+ grid-template-columns: repeat(auto-fit, [before] 1000px);
+}
+
+.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;
+}
+.f {
+ grid-column: -9;
+}
+
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, grid, expectedValues) {
+ is(grid.cols.lines.length, expectedValues.length, elementName + " has expected number of lines.");
+
+ for (let i = 0; i < grid.cols.lines.length; i++) {
+ // 'number' is optional.
+ if (typeof(expectedValues[i].number) != "undefined") {
+ is(grid.cols.lines[i].number, expectedValues[i].number, elementName + " line " + (i + 1) + " has expected number.");
+ } else {
+ // If 'number' is omitted, assume that first line is line 1 and increase from there.
+ is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
+ }
+
+ // 'negativeNumber' is optional.
+ if (typeof(expectedValues[i].negativeNumber) != "undefined") {
+ // Check for the supplied number.
+ is(grid.cols.lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line " + (i + 1) + " has expected negativeNumber.");
+ }
+
+ // 'start' is optional.
+ if (typeof(expectedValues[i].start) != "undefined") {
+ is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
+ }
+
+ // 'breadth' is optional.
+ if (typeof(expectedValues[i].breadth) != "undefined") {
+ is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
+ }
+
+ // 'names' is optional.
+ if (typeof(expectedValues[i].names) != "undefined") {
+ is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
+ }
+
+ // 'todo_names' is optional.
+ if (typeof(expectedValues[i].todo_names) != "undefined") {
+ todo_is(grid.cols.lines[i].names + "", expectedValues[i].todo_names, elementName + " line " + (i + 1) + " has expected names.");
+ }
+ }
+}
+
+function runTests() {
+ let wrapper;
+ let grid;
+ let expectedValues;
+
+ wrapper = document.getElementById("wrapper1");
+ 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
+ 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("wrapper8b");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 1,
+ "names": "real-before,before" },
+ { "number": 2,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper8b", 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);
+
+ wrapper = document.getElementById("wrapper11");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 10,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper11", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper12");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 10,
+ "names": "after,real-after" },
+ { "start": 20,
+ "names": "" },
+ ];
+ testLines("wrapper12", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper13");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 10,
+ "names": "real-before,before" },
+ { "start": 10,
+ "names": "after" },
+ { "start": 20,
+ "names": "" },
+ ];
+ testLines("wrapper13", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper14");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 10,
+ "names": "" },
+ ];
+ testLines("wrapper14", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper15");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 10,
+ "names": "" },
+ ];
+ testLines("wrapper15", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper16");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "after,real-after" },
+ { "start": 10,
+ "names": "" },
+ ];
+ testLines("wrapper16", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper17");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "after,real-after" },
+ { "start": 10,
+ "names": "final" },
+ ];
+ testLines("wrapper17", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper18");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 10,
+ "names": "final" },
+ ];
+ testLines("wrapper18", grid, expectedValues);
+
+ wrapper = document.getElementById("wrapper19");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "" },
+ ];
+ testLines("wrapper19", 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="wrapper8b" class="wrapper grid8">
+ <div id="boxF" class="box f">F</div>
+ </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>
+
+ <br/>
+ <div id="wrapper11" class="wrapper grid11">
+ </div>
+
+ <br/>
+ <div id="wrapper12" class="wrapper grid12">
+ </div>
+
+ <br/>
+ <div id="wrapper13" class="wrapper grid13">
+ </div>
+
+ <br/>
+ <div id="wrapper14" class="wrapper grid14">
+ </div>
+
+ <br/>
+ <div id="wrapper15" class="wrapper grid15">
+ </div>
+
+ <br/>
+ <div id="wrapper16" class="wrapper grid16">
+ </div>
+
+ <br/>
+ <div id="wrapper17" class="wrapper grid17">
+ </div>
+
+ <br/>
+ <div id="wrapper18" class="wrapper grid18">
+ </div>
+
+ <br/>
+ <div id="wrapper19" class="wrapper grid19">
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_subtree_dirty.html b/dom/grid/test/chrome/test_grid_subtree_dirty.html
new file mode 100644
index 0000000000..4baa94872e
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_subtree_dirty.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+ #grid {
+ display: grid;
+ width: 100px;
+ height: 100px;
+ }
+
+ #initiallyHidden {
+ display: none;
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+</style>
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ const grid = document.getElementById("grid");
+ const initiallyHidden = document.getElementById("initiallyHidden");
+ document.documentElement.offsetHeight; // Flush layout to be sure we have grid-item sizes cached
+
+ grid.getGridFragments(); // This marks the grid and its descendants as dirty
+
+ document.documentElement.offsetHeight; // Flush layout again. In buggy builds, this layout will fail to reflow/clear-dirty-bits on the grid item.
+
+ initiallyHidden.style.display = "block"; // This should trigger a reflow.
+ let height = getComputedStyle(initiallyHidden).height;
+ is(height, "100px", "initiallyHidden element should get a reflow and arrive at the expected height after we toggle its display");
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+ <div id="grid">
+ <div>
+ <div>
+ <div>
+ <div id="initiallyHidden">
+ PASS
+ </div>
+ </div>
+ </div>
+ </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 0000000000..39697ef799
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_tracks.html
@@ -0,0 +1,85 @@
+<!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;
+ 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-30 17:05:01 +0000