grid-auto-flow-get-set.html | Explore in Territory

<!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;
}
.gridAutoFlowStackRow {
    grid-auto-flow: stack row;
}
.gridAutoFlowColumnStack {
    grid-auto-flow: column stack;
}
.gridAutoFlowDenseColumnDense {
    grid-auto-flow: dense column dense;
}
.gridAutoFlowDenseRowStack {
    grid-auto-flow: dense row stack;
}
</style>
<script src="../../resources/js-test.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 gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div>
<div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div>
<div class="grid gridAutoFlowDenseColumnDense" id="gridAutoFlowDenseColumnDense"></div>
<div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></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", "dense");
    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
    checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "dense");
    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "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("gridAutoFlowStackRow", "row");
    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "row");
    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnDense", "row");
    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row");

    debug("");
    debug("Test the initial value");
    checkGridAutoFlowSetJSValue("", "", "row");

    debug("Test getting and setting grid-auto-flow through JS");
    checkGridAutoFlowSetJSValue("column", "column", "column");
    checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
    checkGridAutoFlowSetJSValue("row dense", "dense", "dense");
    checkGridAutoFlowSetJSValue("dense column", "column dense", "column dense");
    checkGridAutoFlowSetJSValue("dense row", "dense", "dense");
    checkGridAutoFlowSetJSValue("row", "row", "row");

    debug("");
    debug("Test getting and setting bad values for grid-auto-flow through JS");
    checkGridAutoFlowSetJSValue("noone", "", "row");
    checkGridAutoFlowSetJSValue("dense row dense", "", "row");
    checkGridAutoFlowSetJSValue("column column", "", "row");
    checkGridAutoFlowSetJSValue("stack row", "", "row");
    checkGridAutoFlowSetJSValue("column stack", "", "row");
    checkGridAutoFlowSetJSValue("dense column dense", "", "row");
    checkGridAutoFlowSetJSValue("dense row stack", "", "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>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-auto-flow-get-set.html
