blob: 3ba72611f1bdeea4261971543e74b51f9c9c1b64 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridAutoFlowInherit {
grid-auto-flow: inherit;
}
/* Bad values. */
.gridAutoFlowRows {
grid-auto-flow: rows;
}
.gridAutoFlowColumns {
grid-auto-flow: columns;
}
</style>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<div class="grid" id="gridInitial"></div>
<div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
<div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div>
<div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div>
<div class="grid gridAutoFlowColumn">
<div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
</div>
<div class="grid gridAutoFlowColumn">
<div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div>
</div>
<div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
<div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
<script>
description('Test that setting and getting grid-auto-flow works as expected');
debug("Test getting -webkit-auto-flow set through CSS");
var gridAutoFlowNone = document.getElementById("gridAutoFlowNone");
shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('grid-auto-flow')", "'column'");
var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('grid-auto-flow')", "'row'");
var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('grid-auto-flow')", "'column'");
var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit");
shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('grid-auto-flow')", "'none'");
debug("");
debug("Test the initial value");
element = document.createElement("div");
document.body.appendChild(element);
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");
debug("");
debug("Test getting and setting grid-auto-flow through JS");
element.style.gridAutoFlow = "column";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridAutoFlow = "row";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
debug("");
debug("Test getting and setting bad values for grid-auto-flow through JS");
element.style.gridAutoFlow = "noone";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
debug("");
debug("Test setting grid-auto-flow to 'initial' through JS");
// Reusing the value so that we can check that it is set back to its initial value.
element.style.gridAutoFlow = "initial";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");
</script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>