Bug 1423378 Part 3: Duplicate repeat auto-fit test into a repeat auto-fill test (with slightly different expected values). draft
authorBrad Werth <bwerth@mozilla.com>
Wed, 20 Dec 2017 10:54:46 -0800
changeset 716568 c0031bff2c962b182930398aa598479da0763df8
parent 716567 98d5583bfd931047d2f4c3399bdc34ac78ef3bc1
child 745056 2eef83ba884b0ecb03752aedf1e0bfd325e81aaa
push id94461
push userbwerth@mozilla.com
push dateFri, 05 Jan 2018 23:21:23 +0000
bugs1423378
milestone59.0a1
Bug 1423378 Part 3: Duplicate repeat auto-fit test into a repeat auto-fill test (with slightly different expected values). MozReview-Commit-ID: AWmXfpRx7zG
dom/grid/test/chrome.ini
dom/grid/test/chrome/test_grid_repeat_auto_fill.html
dom/grid/test/chrome/test_grid_repeat_auto_fit.html
dom/grid/test/chrome/test_grid_repeats.html
--- a/dom/grid/test/chrome.ini
+++ b/dom/grid/test/chrome.ini
@@ -1,8 +1,9 @@
 [chrome/test_grid_areas.html]
 [chrome/test_grid_fragmentation.html]
 [chrome/test_grid_implicit.html]
 [chrome/test_grid_lines.html]
 [chrome/test_grid_line_numbers.html]
 [chrome/test_grid_object.html]
-[chrome/test_grid_repeats.html]
+[chrome/test_grid_repeat_auto_fit.html]
+[chrome/test_grid_repeat_auto_fill.html]
 [chrome/test_grid_tracks.html]
new file mode 100644
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html
@@ -0,0 +1,614 @@
+<!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;
+  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);
+}
+
+.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);
+
+  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>
rename from dom/grid/test/chrome/test_grid_repeats.html
rename to dom/grid/test/chrome/test_grid_repeat_auto_fit.html