<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
#gridWithNone {
grid: none;
}
.gridWithTemplate {
grid: 10px / 15px;
}
.gridWithInherit {
grid: inherit;
}
#gridColumnsAndAutoFlow {
grid: auto-flow / 10px;
}
#gridWithAutoFlowAndAutoRows {
grid: auto-flow 10px / none;
}
#gridWithAutoFlowColumnDense {
grid: none / auto-flow dense;
}
#gridWithAutoFlowDenseRow {
grid: auto-flow dense / none;
}
#gridWithAutoFlowAndAutoRowsAndColumns {
grid: auto-flow 10px / 20px;
}
#gridWithAutoFlowAndMultipleAutoTracks {
grid: auto-flow 20px 10px / 100px 50px;
}
#gridWithRowsAndAutoFlow {
grid: 10px / auto-flow;
}
#gridWithRowsNoneAndAutoFlowAndAutoColumn {
grid: none / auto-flow 10px;
}
#gridWithRowsAndAutoFlowDenseColumn {
grid: 10px / auto-flow dense;
}
#gridWithColumnsAndDenseAutoFlow {
grid: dense auto-flow / 10px;
}
#gridWithRowsAndAutoFlowAndAutoColumns {
grid: 20px / auto-flow 10px;
}
#gridWithRowsAndAutoFlowAndMultipleAutoTracks {
grid: 100px 50px / auto-flow 20px 10px;
}
/* Bad values. */
#gridWithMisplacedAutoColumn {
grid: 10px / 20px auto-flow;
}
#gridWithMisplacedNone1 {
grid: auto-flow 10px / none 20px;
}
#gridWithMisplacedNone2 {
grid: 10px / 20px none;
}
#gridWithMisplacedDense {
grid: dense 10px / auto-flow 20px;
}
#gridWithDuplicatedDense {
grid: dense auto-flow dense / 10px;
}
#gridWithOnlyDense {
grid: dense / 10px;
}
#gridWithoutColumnInfo {
grid: auto-flow dense 10px;
}
#gridWithTwoAutoFlow {
grid: auto-flow / auto-flow 20px;
}
#gridWithImplicitAndNoExplicit {
grid: column 20px / 10px;
}
#gridWithExtraIdBeforeAutoFlowColumn {
grid: 10px / a auto-flow 20px;
}
#gridWithExtraIdBeforeAutoFlowRow {
grid: a auto-flow 10px / 20px;
}
#gridWithExtraIdBeforeAutoColumn {
grid: 10px / auto-flow a 20px;
}
#gridWithExtraIdAfterAutoColumn {
grid: 10px / auto-flow 20px a;
}
#gridWithExtraIdBeforeAutoRow {
grid: auto-flow a 20px / 10px;
}
#gridWithExtraIdAfterAutoRow {
grid: auto-flow 20px a / 10px;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid" id="gridWithNone"></div>
<div class="grid gridWithTemplate" id="gridWithTemplate"></div>
<div class="grid gridWithTemplate">
<div class="grid gridWithInherit" id="gridInherit"></div>
</div>
<div class="grid" class="gridWithTemplate">
<div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
</div>
<div class="grid" id="gridColumnsAndAutoFlow"></div>
<div class="grid" id="gridWithAutoFlowAndAutoRows"></div>
<div class="grid" id="gridWithAutoFlowColumnDense"></div>
<div class="grid" id="gridWithAutoFlowDenseRow"></div>
<div class="grid" id="gridWithAutoFlowAndAutoRowsAndColumns"></div>
<div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
<div class="grid" id="gridWithRowsAndAutoFlow"></div>
<div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div>
<div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></div>
<div class="grid" id="gridWithColumnsAndDenseAutoFlow"></div>
<div class="grid" id="gridWithRowsAndAutoFlowAndAutoColumns"></div>
<div class="grid" id="gridWithRowsAndAutoFlowAndMultipleAutoTracks"></div>
<div class="grid" id="gridWithMisplacedAutoColumn"></div>
<div class="grid" id="gridWithMisplacedNone1"></div>
<div class="grid" id="gridWithMisplacedNone2"></div>
<div class="grid" id="gridWithMisplacedDense"></div>
<div class="grid" id="gridWithDuplicatedDense"></div>
<div class="grid" id="gridWithOnlyDense"></div>
<div class="grid" id="gridWithoutColumnInfo"></div>
<div class="grid" id="gridWithTwoAutoFlow"></div>
<div class="grid" id="gridWithImplicitAndNoExplicit"></div>
<div class="grid" id="gridWithExtraIdBeforeAutoFlowColumn"></div>
<div class="grid" id="gridWithExtraIdBeforeAutoFlowRow"></div>
<div class="grid" id="gridWithExtraIdBeforeAutoColumn"></div>
<div class="grid" id="gridWithExtraIdAfterAutoColumn"></div>
<div class="grid" id="gridWithExtraIdBeforeAutoRow"></div>
<div class="grid" id="gridWithExtraIdAfterAutoRow"></div>
<script src="resources/grid-shorthand-parsing-utils.js"></script>
<script>
description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
debug("Test getting the longhand values when shorthand is set through CSS.");
testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridColumnsAndAutoFlow"), "10px", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRows"), "none", "none", "none", "row", "auto", "10px");
testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "dense", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRowsAndColumns"), "20px", "none", "none", "row", "auto", "10px");
testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultipleAutoTracks"), "100px 50px", "none", "none", "row", "auto", "20px 10px");
testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlow"), "none", "10px", "none", "column", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithRowsNoneAndAutoFlowAndAutoColumn"), "none", "none", "none", "column", "10px", "auto");
testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowDenseColumn"), "none", "10px", "none", "column dense", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithColumnsAndDenseAutoFlow"), "10px", "none", "none", "dense", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndAutoColumns"), "none", "20px", "none", "column", "10px", "auto");
testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAndMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "auto");
debug("");
debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedAutoColumn"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithDuplicatedDense"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithOnlyDense"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithoutColumnInfo"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithTwoAutoFlow"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithImplicitAndNoExplicit"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowColumn"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoFlowRow"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoColumn"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoColumn"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAutoRow"), "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoRow"), "none", "none", "none", "row", "auto", "auto");
debug("");
debug("Test getting and setting 'grid' shorthand through JS");
testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "row", "auto", "auto");
testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto");
testGridDefinitionsSetJSValues("auto-flow dense 20px / none", "none", "none", "none", "dense", "auto", "20px", "none", "none", "none", "dense", "auto", "20px");
testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "none", "20px", "none", "column", "10px", "auto");
testGridDefinitionsSetJSValues("none / auto-flow dense 20px", "none", "none", "none", "column dense", "20px", "auto", "none", "none", "none", "column dense", "20px", "auto");
testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "none", "10px", "none", "column", "20px", "auto");
debug("");
debug("Test the initial value");
var element = document.createElement("div");
document.body.appendChild(element);
testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "auto");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
debug("");
debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "none", "column", "20px", "auto", "none", "10px", "none", "column", "20px", "auto");
testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "row", "auto", "auto");
testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "none", "column", "10px", "auto", "none", "20px", "none", "column", "10px", "auto");
testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "row", "auto", "auto");
debug("");
debug("Test the inherit value does not affect gutter properties (grid-*-gap)");
document.body.style.gridRowGap = "100px";
document.body.style.gridColumnGap = "20px";
var anotherElement = document.createElement("div");
document.body.appendChild(anotherElement);
shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "normal");
shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "normal");
anotherElement.style.grid = "inherit";
shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "normal");
shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "normal");
</script>
</body>
</html>
Codebase Browser
chromium