Bug 1423378 Part 3: Duplicate repeat auto-fit test into a repeat auto-fill test (with slightly different expected values). r=mats
authorBrad Werth <bwerth@mozilla.com>
Wed, 20 Dec 2017 10:54:46 -0800
changeset 449895 d97438b671ae346ce54ebfd3b990cc8a9171b2bf
parent 449894 39df8f124f56562ec4d0d8295934c95b5c455441
child 449896 6bf9c25d174c929577ea431248a5d770ef22ecd5
push id8527
push userCallek@gmail.com
push dateThu, 11 Jan 2018 21:05:50 +0000
treeherdermozilla-beta@95342d212a7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1423378
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1423378 Part 3: Duplicate repeat auto-fit test into a repeat auto-fill test (with slightly different expected values). r=mats 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