зеркало из https://github.com/mozilla/gecko-dev.git
391 строка
12 KiB
HTML
391 строка
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script 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: 10px;
|
|
grid-auto-columns: 20px;
|
|
grid-auto-rows: 20px;
|
|
background-color: #f00;
|
|
}
|
|
|
|
.template1 {
|
|
grid-template-columns: 100px 50px 100px;
|
|
grid-template-rows: 50px [areaD-start middle] 50px [areaD-end];
|
|
grid-template-areas: "areaA areaA ....."
|
|
"..... areaC areaC";
|
|
}
|
|
|
|
.template2 {
|
|
grid-template-areas: "..... areaA ......";
|
|
grid-template-columns: [areaA-start] 50px 50px 50px;
|
|
}
|
|
|
|
.template3 {
|
|
grid-template-columns: [areaA-start areaB-end areaC-end areaD-start] 50px [areaA-end areaB-start areaC-start areaD-end];
|
|
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;
|
|
}
|
|
|
|
.template5 {
|
|
grid-template-columns: [a-end] 100px [b];
|
|
}
|
|
|
|
.template6 {
|
|
grid-template-columns: [foo-end] 100px [foo-start];
|
|
}
|
|
|
|
.box {
|
|
background-color: #444;
|
|
color: #fff;
|
|
}
|
|
.a {
|
|
grid-area: areaA;
|
|
}
|
|
.b {
|
|
grid-row: span got-this-name-implicitly / 2;
|
|
grid-column: areaA-end / span 2;
|
|
}
|
|
.c {
|
|
grid-area: areaC;
|
|
}
|
|
.d {
|
|
grid-area: areaD;
|
|
}
|
|
.e {
|
|
grid-column: -7 / 5;
|
|
}
|
|
.f {
|
|
grid-column: a-start / a-end;
|
|
}
|
|
.g {
|
|
grid-column: a-start / 2 a-end;
|
|
}
|
|
.h {
|
|
grid-column: foo-start;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function runTests() {
|
|
// test the first grid wrapper
|
|
let wrapper = document.getElementById("wrapper1");
|
|
let grid = wrapper.getGridFragments()[0];
|
|
|
|
// test column and row line counts
|
|
is(grid.cols.lines.length, 6,
|
|
"Grid.cols.lines property has length that respects implicit expansion."
|
|
);
|
|
is(grid.rows.lines.length, 4,
|
|
"Grid.rows.lines property has length that respects implicit expansion."
|
|
);
|
|
|
|
if ((grid.cols.lines.length == 6) &&
|
|
(grid.rows.lines.length == 4)) {
|
|
// test explicit / implicit lines
|
|
is(grid.cols.lines[0].type, "explicit", "Grid column line 1 is explicit.");
|
|
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 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,
|
|
"Grid row line 1 has the name 'got-this-name-implicitly'."
|
|
);
|
|
|
|
// test that row line 3 gets its explicit name
|
|
isnot(grid.rows.lines[2].names.indexOf("middle"), -1,
|
|
"Grid row line 3 has the name 'middle'."
|
|
);
|
|
|
|
// test the names of the implicit column lines that were created for area 'areaD'
|
|
isnot(grid.cols.lines[4].names.indexOf("areaD-start"), -1,
|
|
"Grid column line 5 has the name 'areaD-start'."
|
|
);
|
|
isnot(grid.cols.lines[5].names.indexOf("areaD-end"), -1,
|
|
"Grid column line 6 has the name 'areaD-end'."
|
|
);
|
|
}
|
|
|
|
// test column and row track counts
|
|
is(grid.cols.tracks.length, 5,
|
|
"Grid.cols.tracks property has length that respects implicit expansion."
|
|
);
|
|
is(grid.rows.tracks.length, 3,
|
|
"Grid.rows.tracks property has length that respects implicit expansion."
|
|
);
|
|
|
|
if ((grid.cols.tracks.length == 5) &&
|
|
(grid.rows.tracks.length == 3)) {
|
|
// test explicit / implicit tracks
|
|
is(grid.cols.tracks[0].type, "explicit", "Grid column track 1 is explicit.");
|
|
is(grid.cols.tracks[3].type, "implicit", "Grid column track 4 is implicit.");
|
|
is(grid.cols.tracks[4].type, "implicit", "Grid column track 5 is implicit.");
|
|
|
|
is(grid.rows.tracks[0].type, "implicit", "Grid row track 1 is implicit.");
|
|
is(grid.rows.tracks[1].type, "explicit", "Grid row track 2 is explicit.");
|
|
is(grid.rows.tracks[2].type, "explicit", "Grid row track 3 is explicit.");
|
|
}
|
|
|
|
// test area count
|
|
is(grid.areas.length, 3,
|
|
"Grid.areas property has length that respects implicit expansion."
|
|
);
|
|
|
|
for (let i = 0; i < grid.areas.length; i++) {
|
|
let area = grid.areas[i];
|
|
if (area.name == "areaD") {
|
|
is(area.type, "implicit", area.name + " is implicit.");
|
|
|
|
// test lines of implicit areas
|
|
is(area.rowStart, 3, area.name + " has start row line of 3.");
|
|
is(area.rowEnd, 4, area.name + " has end row line of 4.");
|
|
is(area.columnStart, 5, area.name + " has start column line of 5.");
|
|
is(area.columnEnd, 6, area.name + " has end column line of 6.");
|
|
} else {
|
|
is(area.type, "explicit", area.name + " is explicit.");
|
|
}
|
|
}
|
|
|
|
|
|
// test the second grid wrapper
|
|
wrapper = document.getElementById("wrapper2");
|
|
grid = wrapper.getGridFragments()[0];
|
|
|
|
// test column and row line counts
|
|
is(grid.cols.lines.length, 4,
|
|
"Grid.cols.lines property doesn't expand due to an explicit line declaration."
|
|
);
|
|
is(grid.rows.lines.length, 2,
|
|
"Grid.rows.lines property has length that respects implicit expansion."
|
|
);
|
|
|
|
// test area count
|
|
is(grid.areas.length, 1,
|
|
"Grid.areas property has length that respects implicit expansion."
|
|
);
|
|
|
|
for (let i = 0; i < grid.areas.length; i++) {
|
|
let area = grid.areas[i];
|
|
if (area.name == "areaA") {
|
|
is(area.type, "implicit", area.name + " is implicit.");
|
|
|
|
// test lines of implicit areas
|
|
is(area.rowStart, 1, area.name + " has start row line of 1.");
|
|
is(area.rowEnd, 2, area.name + " has end row line of 2.");
|
|
is(area.columnStart, 1, area.name + " has start column line of 1.");
|
|
is(area.columnEnd, 3, area.name + " has end column line of 3.");
|
|
}
|
|
}
|
|
|
|
|
|
// test the third grid wrapper
|
|
wrapper = document.getElementById("wrapper3");
|
|
grid = wrapper.getGridFragments()[0];
|
|
|
|
// test column and row line counts
|
|
is(grid.cols.lines.length, 2,
|
|
"Grid.cols.lines property doesn't expand due to an explicit line declaration."
|
|
);
|
|
is(grid.rows.lines.length, 2,
|
|
"Grid.rows.lines property doesn't expand due to an explicit line declaration."
|
|
);
|
|
|
|
if (grid.cols.lines.length == 2 && grid.rows.lines.length == 2) {
|
|
// check that areaC gets only the explicit line names and
|
|
// doesn't get the implicit line names
|
|
is(grid.cols.lines[0].names.indexOf("areaC-start"), -1,
|
|
"Grid row line 1 doesn't have the name 'areaC-start'."
|
|
);
|
|
|
|
isnot(grid.cols.lines[0].names.indexOf("areaC-end"), -1,
|
|
"Grid row line 1 has the name 'areaC-end'."
|
|
);
|
|
|
|
isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
|
|
"Grid row line 2 has the name 'areaC-start'."
|
|
);
|
|
|
|
is(grid.cols.lines[1].names.indexOf("areaC-end"), -1,
|
|
"Grid row line 2 doesn't have the name 'areaC-end'."
|
|
);
|
|
}
|
|
|
|
// test area count
|
|
is(grid.areas.length, 4,
|
|
"Grid.areas property reports 4 areas."
|
|
);
|
|
|
|
for (let i = 0; i < grid.areas.length; i++) {
|
|
let area = grid.areas[i];
|
|
if (area.name == "areaC") {
|
|
// test lines of implicit area
|
|
is(area.rowStart, 1, area.name + " has start row line of 1.");
|
|
is(area.rowEnd, 2, area.name + " has end row line of 2.");
|
|
is(area.columnStart, 1, area.name + " has start column line of 1.");
|
|
is(area.columnEnd, 2, area.name + " has end column line of 2.");
|
|
}
|
|
}
|
|
|
|
// 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,
|
|
];
|
|
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.");
|
|
}
|
|
}
|
|
|
|
// Test the fifth grid wrapper
|
|
wrapper = document.getElementById("wrapper5");
|
|
grid = wrapper.getGridFragments()[0];
|
|
|
|
// Test that lineName-reversed implicit areas have the correct names.
|
|
for (let i = 0; i < grid.areas.length; i++) {
|
|
let area = grid.areas[i];
|
|
// test the resulting start/end lines of the areas has:
|
|
// Start line: [a-end]
|
|
// End Line: [a-start]
|
|
if (area.name == "a") {
|
|
const startLineNames = grid.cols.lines[area.columnStart - 1].names;
|
|
const endLineNames = grid.cols.lines[area.columnEnd - 1].names;
|
|
|
|
isnot(startLineNames.indexOf("a-end"), -1,
|
|
`Grid column line ${area.columnStart} has the name a-end`);
|
|
is(startLineNames.indexOf("a-start"), -1,
|
|
`Grid column line ${area.columnStart} does not have the name a-start`);
|
|
|
|
isnot(endLineNames.indexOf("a-start"), -1,
|
|
`Grid column line ${area.columnEnd} has the name a-start`);
|
|
todo_isnot(endLineNames.indexOf("a-end"), -1,
|
|
`Grid column line ${area.columnEnd} has the name a-end`);
|
|
|
|
// Also test that the fourth line has the name a-end.
|
|
todo_isnot(grid.cols.lines[3].names.indexOf("a-end"), -1,
|
|
"Grid column line 4 has the line name a-end");
|
|
}
|
|
}
|
|
|
|
// Test the sixth grid wrapper
|
|
wrapper = document.getElementById("wrapper6");
|
|
grid = wrapper.getGridFragments()[0];
|
|
|
|
// Test that the grid has two explicit lines: [foo-end][foo-start] and a third implicit
|
|
// line that follows.
|
|
is(grid.cols.lines.length, 3, "Grid should have three lines.");
|
|
|
|
isnot(grid.cols.lines[0].names.indexOf("foo-end"), -1,
|
|
"Grid column line 1 has the name 'foo-end'",
|
|
);
|
|
|
|
isnot(grid.cols.lines[1].names.indexOf("foo-start"), -1,
|
|
"Grid column line 2 has the name 'foo-start'",
|
|
);
|
|
|
|
is(grid.cols.lines[2].type, "implicit", "Grid column line 3 is implicit");
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onLoad="runTests();">
|
|
|
|
<div id="wrapper1" class="wrapper template1">
|
|
<div id="boxA" class="box a">A</div>
|
|
<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="wrapper2" class="wrapper template2">
|
|
<div id="boxA" class="box a">A</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div id="wrapper3" class="wrapper template3">
|
|
<div id="boxC" class="box c">C</div>
|
|
</div>
|
|
|
|
<div id="wrapper4" class="wrapper template4">
|
|
<div id="boxE" class="box e">E</div>
|
|
</div>
|
|
|
|
<div id="wrapper5" class="wrapper template5">
|
|
<div id="boxF" class="box f">F</div>
|
|
<div id="boxG" class="box g">G</div>
|
|
</div>
|
|
<div id="wrapper6" class="wrapper template6">
|
|
<div id="boxH" class="box h">H</div>
|
|
</div>
|
|
</body>
|
|
</html>
|