<!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>