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