| <!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", "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("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", "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("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> |
