Bug 1415670 Part 3: Extend Grid tests to check negativeNumber property. r=mats

MozReview-Commit-ID: 9tsjwCPNzmO

--HG--
extra : rebase_source : 39c1c63a28a5126f1fc237a1fb765a0cdd822a0b

dom/grid/test/chrome/test_grid_implicit.html

@@ -267,11 +267,22 @@ function runTests() {
       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.");
     }
   }
 

dom/grid/test/chrome/test_grid_line_numbers.html

@@ -18,12 +18,12 @@ body {
   color: #fff;
 }
 .repeatColumns {
-  width: 600px;
+  width: 400px;
   grid-auto-columns: 50px;
   grid-template-columns: repeat(auto-fit, 100px);
 }
 .repeatRows {
-  height: 600px;
+  height: 400px;
   grid-auto-rows: 50px;
   grid-template-rows: repeat(auto-fit, 100px);
 }
@@ -38,6 +38,7 @@ 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.");
   }
 }
 
@@ -49,32 +50,53 @@ function runTests() {
   grid = document.getElementById("gridWithColumns").getGridFragments()[0];
   lines = grid.cols.lines;
   expectedValues = [
-    { "number": 0 },
-    { "number": 0 },
-    { "number": 1 },
-    { "number": 2 },
-    { "number": 3 },
-    { "number": 4 },
-    { "number": 5 },
-    { "number": 6 },
-    { "number": 7 },
-    { "number": 8 },
+    { "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 },
-    { "number": 0 },
-    { "number": 1 },
-    { "number": 2 },
-    { "number": 3 },
-    { "number": 4 },
-    { "number": 5 },
-    { "number": 6 },
-    { "number": 7 },
-    { "number": 8 },
+    { "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);
 
@@ -86,15 +108,14 @@ function runTests() {
 
 <div id="gridWithColumns" class="wrapper repeatColumns">
 <div style="grid-column: -9">A</div>
-<div style="grid-column: 4">B</div>
-<div style="grid-column: 7">C</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 3 / 2">A</div>
-<div style="grid-row: 4">B</div>
-<div style="grid-row: 5">C</div>
-<div style="grid-row: span 2 / 8">D</div>
+<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>

dom/grid/test/chrome/test_grid_lines.html

@@ -47,8 +47,9 @@ function runTests() {
       // test column line width
       is(grid.cols.lines[1].breadth, 10, "Grid column line 2 width is as expected.");
 
-      // test column line number
-      is(grid.cols.lines[3].number, 4, "Grid column line 4 number is as expected.");
+      // test column line 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.");

dom/grid/test/chrome/test_grid_repeats.html

@@ -12,6 +12,7 @@ body {
   display: grid;
   width: 600px;
   grid-gap: 0px;
+  grid-auto-column: 50px;
   background-color: #f00;
 }
 .grid1 {
@@ -44,6 +45,10 @@ body {
 .grid10 {
   grid-template-columns: [real-before] repeat(auto-fit, [before] 100px) [real-after];
 }
+.grid11 {
+  grid-template-columns: repeat(auto-fit, 100px);
+}
+
 .box {
   background-color: #444;
   color: #fff;
@@ -63,6 +68,9 @@ body {
 .e {
   grid-column: 5;
 }
+.f {
+  grid-column: -9;
+}
 
 </style>
 
@@ -73,16 +81,44 @@ 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.");
+    // '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.");
+    }
   }
 }
 
 function runTests() {
-  let wrapper = document.getElementById("wrapper1");
-  let grid = wrapper.getGridFragments()[0];
+  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.");
@@ -93,7 +129,7 @@ function runTests() {
     "Resolved value of grid-template-columns reports removed auto-fits as '0px'.");
 
   // test starts, breadths, and states
-  let expectedValues = [
+  expectedValues = [
     { "start": 0,
       "breadth": 50,
       "state": "static" },
@@ -296,6 +332,35 @@ function runTests() {
   ];
   testLines("wrapper10", grid, expectedValues);
 
+
+  wrapper = document.getElementById("wrapper11");
+  grid = wrapper.getGridFragments()[0];
+
+  // test line numbers and negativeNumbers
+  expectedValues = [
+    { "number": 0,
+      "negativeNumber": -9 },
+    { "number": 0,
+      "negativeNumber": -8 },
+    { "number": 1,
+      "negativeNumber": -7 },
+    { "number": 2,
+      "negativeNumber": -6 },
+    { "number": 3,
+      "negativeNumber": -5 },
+    { "number": 4,
+      "negativeNumber": -4 },
+    { "number": 5,
+      "negativeNumber": -3 },
+    { "number": 6,
+      "negativeNumber": -2 },
+    { "number": 7,
+      "negativeNumber": -1 },
+    { "number": 8,
+      "negativeNumber": 0 },
+  ];
+  testLines("wrapper11", grid, expectedValues);
+
   SimpleTest.finish();
 }
 </script>
@@ -354,5 +419,12 @@ function runTests() {
     <div id="boxE" class="box e">E</div>
   </div>
 
+  <br/>
+  <div id="wrapper11" class="wrapper grid11">
+    <div id="boxF" class="box f">F</div>
+    <div id="boxB" class="box b">B</div>
+    <div id="boxD" class="box d">D</div>
+  </div>
+
 </body>
 </html>