зеркало из https://github.com/mozilla/gecko-dev.git
115 строки
2.5 KiB
HTML
115 строки
2.5 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: 400px;
|
|
grid-gap: 10px;
|
|
grid-template-columns: 100px 1fr 1fr 100px;
|
|
}
|
|
.oh {
|
|
overflow: hidden;
|
|
}
|
|
.box {
|
|
background-color: #444;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function runTests() {
|
|
// Test 1: elements styled with display:grid
|
|
let idsWithGrid = [
|
|
"gridDiv",
|
|
"gridFieldset",
|
|
"gridButton",
|
|
"gridDivOh",
|
|
"gridFieldsetOh",
|
|
"gridButtonOh",
|
|
];
|
|
|
|
for (let id of idsWithGrid) {
|
|
let wrapper = document.getElementById(id);
|
|
|
|
// test function existence
|
|
is(typeof(wrapper.getGridFragments), "function",
|
|
id + ": getGridFragments function exists."
|
|
);
|
|
|
|
// test that wrapper has one grid
|
|
let gridFragments = wrapper.getGridFragments();
|
|
is(gridFragments.length, 1,
|
|
id + ": one grid on an un-fragmented display:grid styled element."
|
|
);
|
|
|
|
// test that the grid has cols and rows properties
|
|
if (gridFragments.length > 0) {
|
|
let grid = gridFragments[0];
|
|
isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
|
|
isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
|
|
}
|
|
}
|
|
|
|
// Test 2: elements styled without display:grid
|
|
let idsWithoutGrid = [
|
|
"boxA",
|
|
];
|
|
|
|
for (let id of idsWithoutGrid) {
|
|
let wrapper = document.getElementById(id);
|
|
|
|
// test that wrapper has no grid
|
|
let gridFragments = wrapper.getGridFragments();
|
|
is(gridFragments.length, 0,
|
|
id + ": no grid on element."
|
|
);
|
|
}
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onLoad="runTests();">
|
|
|
|
<div id="gridDiv" class="wrapper">
|
|
<div id="boxA" class="box">A</div>
|
|
</div>
|
|
|
|
<fieldset id="gridFieldset" class="wrapper">
|
|
<legend>a fieldset</legend>
|
|
<label for="name">name</label>
|
|
<input id="name">
|
|
</fieldset>
|
|
|
|
<button id="gridButton" class="wrapper">
|
|
<span style="grid-row:2">test</span>
|
|
</button>
|
|
|
|
<div id="gridDivOh" class="wrapper oh">
|
|
<div id="boxAOh" class="box">A</div>
|
|
</div>
|
|
|
|
<fieldset id="gridFieldsetOh" class="wrapper oh">
|
|
<legend>a fieldset</legend>
|
|
<label for="nameOh">name</label>
|
|
<input id="nameOh">
|
|
</fieldset>
|
|
|
|
<button id="gridButtonOh" class="wrapper oh">
|
|
<span style="grid-row:2">test</span>
|
|
</button>
|
|
|
|
</body>
|
|
</html>
|