summaryrefslogtreecommitdiffstats
path: root/dom/grid/test/chrome/test_grid_repeats.html
diff options
context:
space:
mode:
Diffstat (limited to 'dom/grid/test/chrome/test_grid_repeats.html')
-rw-r--r--dom/grid/test/chrome/test_grid_repeats.html358
1 files changed, 358 insertions, 0 deletions
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>