Bug 1415670 Part 3: Extend Grid tests to check negativeNumber property.
MozReview-Commit-ID: 9tsjwCPNzmO
--- a/dom/grid/test/chrome/test_grid_implicit.html
+++ b/dom/grid/test/chrome/test_grid_implicit.html
@@ -262,21 +262,32 @@ function runTests() {
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.");
}
}
SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">
--- a/dom/grid/test/chrome/test_grid_line_numbers.html
+++ b/dom/grid/test/chrome/test_grid_line_numbers.html
@@ -13,89 +13,110 @@ body {
grid-gap: 0px;
background-color: #f00;
}
.wrapper > div {
background-color: #444;
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);
}
</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 },
- { "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);
SimpleTest.finish();
}
</script>
</head>
<body onLoad="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>
</html>
--- a/dom/grid/test/chrome/test_grid_lines.html
+++ b/dom/grid/test/chrome/test_grid_lines.html
@@ -42,18 +42,19 @@ function runTests() {
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 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.");
is(grid.cols.lines[1].names.length, 2, "Grid column line 2 has 2 names.");
isnot(grid.cols.lines[1].names.indexOf("first"), -1,
"Grid column line 2 has the name 'first'."
);
--- a/dom/grid/test/chrome/test_grid_repeats.html
+++ b/dom/grid/test/chrome/test_grid_repeats.html
@@ -7,16 +7,17 @@
<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];
}
@@ -39,16 +40,20 @@ body {
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: repeat(auto-fit, 100px);
+}
+
.box {
background-color: #444;
color: #fff;
}
.a {
grid-column: auto;
}
.b {
@@ -58,47 +63,85 @@ body {
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++) {
- 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.");
+ }
+
+ // '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 = 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.");
// 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 = [
+ expectedValues = [
{ "start": 0,
"breadth": 50,
"state": "static" },
{ "start": 50,
"breadth": 0,
"state": "static" },
{ "start": 50,
"breadth": 0,
@@ -239,19 +282,19 @@ function runTests() {
wrapper = document.getElementById("wrapper8");
grid = wrapper.getGridFragments()[0];
// test starts and names
expectedValues = [
{ "start": 0,
- "names": "real-before,before" },
+ "todo_names": "real-before,before" },
{ "start": 0,
- "names": "after,real-after" },
+ "todo_names": "after,real-after" },
];
testLines("wrapper8", grid, expectedValues);
wrapper = document.getElementById("wrapper9");
grid = wrapper.getGridFragments()[0];
// test starts and names