зеркало из https://github.com/mozilla/gecko-dev.git
144 строки
4.4 KiB
HTML
144 строки
4.4 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;
|
|
width: 600px;
|
|
height: 600px;
|
|
grid-gap: 20px;
|
|
grid-template-columns: 50px 1fr 50px;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
grid-template-areas: "areaA areaA ....."
|
|
"areaB areaC areaC"
|
|
"areaB areaC areaC";
|
|
background-color: #f00;
|
|
}
|
|
.box {
|
|
background-color: #444;
|
|
color: #fff;
|
|
}
|
|
.a {
|
|
grid-area: areaA;
|
|
}
|
|
.b {
|
|
grid-area: areaB;
|
|
}
|
|
.c {
|
|
grid-area: areaC;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function runTests() {
|
|
var wrapper = document.getElementById("wrapper");
|
|
var grid = wrapper.getGridFragments()[0];
|
|
|
|
// test existence of property
|
|
isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");
|
|
|
|
if (typeof(grid.areas) != "undefined") {
|
|
// test that the right number of areas are reported
|
|
is(grid.areas.length, 3, "3 areas are reported.");
|
|
|
|
if (grid.areas.length == 3) {
|
|
// test area names
|
|
is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
|
|
is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
|
|
is(grid.areas[2].name, "areaC", "Area 2 has proper name.");
|
|
|
|
// test area types
|
|
is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
|
|
is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
|
|
is(grid.areas[2].type, "explicit", "Area 2 is explicit.");
|
|
|
|
// test numbers of start and end lines
|
|
is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
|
|
is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
|
|
is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
|
|
is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");
|
|
|
|
is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
|
|
is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
|
|
is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
|
|
is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");
|
|
|
|
is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
|
|
is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
|
|
is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
|
|
is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");
|
|
|
|
// test names of all the row lines
|
|
isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
|
|
"Grid row line 1 has the name 'areaA-start'."
|
|
);
|
|
|
|
isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
|
|
"Grid row line 2 has the name 'areaA-end'."
|
|
);
|
|
isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
|
|
"Grid row line 2 has the name 'areaB-start'."
|
|
);
|
|
isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
|
|
"Grid row line 2 has the name 'areaC-start'."
|
|
);
|
|
|
|
is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
|
|
|
|
isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
|
|
"Grid row line 4 has the name 'areaB-end'."
|
|
);
|
|
isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
|
|
"Grid row line 4 has the name 'areaC-end'."
|
|
);
|
|
|
|
// test names of all the column lines
|
|
isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
|
|
"Grid column line 1 has the name 'areaA-start'."
|
|
);
|
|
isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
|
|
"Grid column line 1 has the name 'areaB-start'."
|
|
);
|
|
|
|
isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
|
|
"Grid column line 2 has the name 'areaB-end'."
|
|
);
|
|
isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
|
|
"Grid column line 2 has the name 'areaC-start'."
|
|
);
|
|
|
|
isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
|
|
"Grid column line 3 has the name 'areaA-end'."
|
|
);
|
|
|
|
isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
|
|
"Grid column line 4 has the name 'areaC-end'."
|
|
);
|
|
}
|
|
}
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onLoad="runTests();">
|
|
|
|
<div id="wrapper" class="wrapper">
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|