summaryrefslogtreecommitdiffstats
path: root/dom/grid/test
diff options
context:
space:
mode:
authorwolfbeast <mcwerewolf@wolfbeast.com>2019-12-22 01:23:56 +0100
committerwolfbeast <mcwerewolf@wolfbeast.com>2019-12-22 01:26:49 +0100
commit54091ecab46c93c2e1b2c689e9179a980beaabe6 (patch)
tree5cead66d889007e1b06c5dbb8e3d37b2538d0557 /dom/grid/test
parentc1013e9122456b342d65e4eb4c38a7281d8d83d2 (diff)
parent492624a7106ecbc18994b465ca1dd23fa472bf7e (diff)
downloadUXP-54091ecab46c93c2e1b2c689e9179a980beaabe6.tar
UXP-54091ecab46c93c2e1b2c689e9179a980beaabe6.tar.gz
UXP-54091ecab46c93c2e1b2c689e9179a980beaabe6.tar.lz
UXP-54091ecab46c93c2e1b2c689e9179a980beaabe6.tar.xz
UXP-54091ecab46c93c2e1b2c689e9179a980beaabe6.zip
Forward to new tree structure.
Diffstat (limited to 'dom/grid/test')
-rw-r--r--dom/grid/test/chrome.ini1
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html63
-rw-r--r--dom/grid/test/chrome/test_grid_line_numbers.html101
3 files changed, 162 insertions, 3 deletions
diff --git a/dom/grid/test/chrome.ini b/dom/grid/test/chrome.ini
index 2241cf9eb..169fa9b89 100644
--- a/dom/grid/test/chrome.ini
+++ b/dom/grid/test/chrome.ini
@@ -2,6 +2,7 @@
[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_tracks.html]
diff --git a/dom/grid/test/chrome/test_grid_implicit.html b/dom/grid/test/chrome/test_grid_implicit.html
index c7782e0e5..1f7142658 100644
--- a/dom/grid/test/chrome/test_grid_implicit.html
+++ b/dom/grid/test/chrome/test_grid_implicit.html
@@ -33,6 +33,11 @@ body {
grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
}
+.template4 {
+ grid-template-columns: 100px 50px 100px;
+ grid-template-rows: 50px;
+}
+
.box {
background-color: #444;
color: #fff;
@@ -50,6 +55,9 @@ body {
.d {
grid-area: areaD;
}
+.e {
+ grid-column: -7 / 5;
+}
</style>
<script>
@@ -78,9 +86,12 @@ function runTests() {
is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");
- is(grid.rows.lines[0].type, "implicit", "Grid row line 1 is implicit.");
- is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit.");
- is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit.");
+ is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit.");
+ is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number.");
+ is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit.");
+ is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number.");
+ is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit.");
+ is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number.");
// test that row line 1 gets the name forced on it by placement of item B
todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
@@ -221,6 +232,48 @@ function runTests() {
}
}
+ // test the fourth grid wrapper
+ wrapper = document.getElementById("wrapper4");
+ grid = wrapper.getGridFragments()[0];
+
+ // test column and row line counts
+ is(grid.cols.lines.length, 8,
+ "Grid.cols.lines property expands properly with implicit columns on both sides."
+ );
+ is(grid.rows.lines.length, 2,
+ "Grid.rows.lines property is as expected"
+ );
+
+ if (grid.cols.lines.length == 8) {
+ // check that all the lines get correct implict/explicit type and number
+ let expectedType = [
+ "implicit",
+ "implicit",
+ "implicit",
+ "explicit",
+ "explicit",
+ "explicit",
+ "explicit",
+ "implicit",
+ ];
+ let expectedNumber = [
+ 0,
+ 0,
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ ];
+
+ 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.");
+ }
+ }
+
SimpleTest.finish();
}
</script>
@@ -246,5 +299,9 @@ function runTests() {
<div id="boxC" class="box c">C</div>
</div>
+ <div id="wrapper4" class="wrapper template4">
+ <div id="boxE" class="box e">E</div>
+ </div>
+
</body>
</html>
diff --git a/dom/grid/test/chrome/test_grid_line_numbers.html b/dom/grid/test/chrome/test_grid_line_numbers.html
new file mode 100644
index 000000000..c8e5226b6
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_line_numbers.html
@@ -0,0 +1,101 @@
+<!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;
+ grid-gap: 0px;
+ background-color: #f00;
+}
+.wrapper > div {
+ background-color: #444;
+ color: #fff;
+}
+.repeatColumns {
+ width: 600px;
+ grid-auto-columns: 50px;
+ grid-template-columns: repeat(auto-fit, 100px);
+}
+.repeatRows {
+ height: 600px;
+ 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.");
+ }
+}
+
+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 },
+ ];
+ 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 },
+ ];
+ 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>
+
+<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>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-25 09:30:36 +0000