blob: 430545dc2457302870614f230752be46a4d0d140 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridAutoFlowDense {
grid-auto-flow: dense;
}
.gridAutoFlowColumnDense {
grid-auto-flow: column dense;
}
.gridAutoFlowRowDense {
grid-auto-flow: row dense;
}
.gridAutoFlowDenseColumn {
grid-auto-flow: dense column;
}
.gridAutoFlowDenseRow {
grid-auto-flow: dense row;
}
.gridAutoFlowInherit {
grid-auto-flow: inherit;
}
/* Bad values. */
.gridAutoFlowNone {
grid-auto-flow: none;
}
.gridAutoFlowRows {
grid-auto-flow: rows;
}
.gridAutoFlowColumns {
grid-auto-flow: columns;
}
.gridAutoFlowColumnFoo {
grid-auto-flow: column foo;
}
.gridAutoFlowColumnColumn {
grid-auto-flow: column column;
}
.gridAutoFlowDenseRowRow {
grid-auto-flow: dense row row;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div class="grid" id="gridInitial"></div>
<div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div>
<div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div>
<div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div>
<div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div>
<div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div>
<div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div>
<div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div>
<div class="grid gridAutoFlowColumnSparse">
<div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
</div>
<div class="grid gridAutoFlowColumnSparse">
<div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div>
</div>
<div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
<div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
<div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
<div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div>
<div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div>
<div class="grid gridAutoFlowDenseRowRow" id="gridAutoFlowDenseRowRow"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-auto-flow works as expected');
debug("Test getting grid-auto-flow set through CSS");
checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense");
checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense");
checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column");
checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
debug("");
debug("Test getting grid-auto-flow bad values set through CSS");
checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row");
checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowRow", "row");
debug("");
debug("Test the initial value");
checkGridAutoFlowSetJSValue("", "", "row");
debug("");
debug("Test getting and setting grid-auto-flow through JS");
checkGridAutoFlowSetJSValue("column", "column", "column");
checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
checkGridAutoFlowSetJSValue("dense", "dense", "row dense");
checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense");
checkGridAutoFlowSetJSValue("dense column", "column dense", "column dense");
checkGridAutoFlowSetJSValue("dense row", "row dense", "row dense");
checkGridAutoFlowSetJSValue("row", "row", "row");
debug("");
debug("Test getting and setting bad values for grid-auto-flow through JS");
checkGridAutoFlowSetJSValue("noone", "", "row");
checkGridAutoFlowSetJSValue("column column", "", "row");
checkGridAutoFlowSetJSValue("dense row row", "", "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.
checkGridAutoFlowSetJSValue("initial", "initial", "row");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>