third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridAutoFlowDense {
   7     grid-auto-flow: dense;
   8 }
   9 .gridAutoFlowColumnDense {
  10     grid-auto-flow: column dense;
  11 }
  12 .gridAutoFlowRowDense {
  13     grid-auto-flow: row dense;
  14 }
  15 .gridAutoFlowDenseColumn {
  16     grid-auto-flow: dense column;
  17 }
  18 .gridAutoFlowDenseRow {
  19     grid-auto-flow: dense row;
  20 }
  21 .gridAutoFlowInherit {
  22     grid-auto-flow: inherit;
  23 }
  24 /* Bad values. */
  25 .gridAutoFlowNone {
  26     grid-auto-flow: none;
  27 }
  28 .gridAutoFlowRows {
  29     grid-auto-flow: rows;
  30 }
  31 .gridAutoFlowColumns {
  32     grid-auto-flow: columns;
  33 }
  34 .gridAutoFlowColumnFoo {
  35     grid-auto-flow: column foo;
  36 }
  37 .gridAutoFlowColumnColumn {
  38     grid-auto-flow: column column;
  39 }
  40 .gridAutoFlowStackRow {
  41     grid-auto-flow: stack row;
  42 }
  43 .gridAutoFlowColumnStack {
  44     grid-auto-flow: column stack;
  45 }
  46 .gridAutoFlowDenseColumnDense {
  47     grid-auto-flow: dense column dense;
  48 }
  49 .gridAutoFlowDenseRowStack {
  50     grid-auto-flow: dense row stack;
  51 }
  52 </style>
  53 <script src="../../resources/js-test.js"></script>
  54 </head>
  55 <body>
  56 <div class="grid" id="gridInitial"></div>
  57 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div>
  58 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div>
  59 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div>
  60 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div>
  61 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div>
  62 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div>
  63 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div>
  64 <div class="grid gridAutoFlowColumnSparse">
  65     <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
  66 </div>
  67 <div class="grid gridAutoFlowColumnSparse">
  68     <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div>
  69 </div>
  70 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
  71 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
  72 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
  73 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div>
  74 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div>
  75 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div>
  76 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div>
  77 <div class="grid gridAutoFlowDenseColumnDense" id="gridAutoFlowDenseColumnDense"></div>
  78 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div>
  79 <script src="resources/grid-definitions-parsing-utils.js"></script>
  80 <script>
  81     description('Test that setting and getting grid-auto-flow works as expected');
  82
  83     debug("Test getting grid-auto-flow set through CSS");
  84     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
  85     checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
  86     checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense");
  87     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
  88     checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
  89     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
  90     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense");
  91     checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column");
  92     checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
  93
  94     debug("");
  95     debug("Test getting grid-auto-flow bad values set through CSS");
  96     checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
  97     checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
  98     checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
  99     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row");
 100     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row");
 101     checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "row");
 102     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "row");
 103     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnDense", "row");
 104     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row");
 105
 106     debug("");
 107     debug("Test the initial value");
 108     checkGridAutoFlowSetJSValue("", "", "row");
 109
 110     debug("Test getting and setting grid-auto-flow through JS");
 111     checkGridAutoFlowSetJSValue("column", "column", "column");
 112     checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
 113     checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense");
 114     checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense");
 115     checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense");
 116     checkGridAutoFlowSetJSValue("row", "row", "row");
 117
 118     debug("");
 119     debug("Test getting and setting bad values for grid-auto-flow through JS");
 120     checkGridAutoFlowSetJSValue("noone", "", "row");
 121     checkGridAutoFlowSetJSValue("dense row dense", "", "row");
 122     checkGridAutoFlowSetJSValue("column column", "", "row");
 123     checkGridAutoFlowSetJSValue("stack row", "", "row");
 124     checkGridAutoFlowSetJSValue("column stack", "", "row");
 125     checkGridAutoFlowSetJSValue("dense column dense", "", "row");
 126     checkGridAutoFlowSetJSValue("dense row stack", "", "row");
 127
 128     debug("");
 129     debug("Test setting grid-auto-flow to 'initial' through JS");
 130     // Reusing the value so that we can check that it is set back to its initial value.
 131     checkGridAutoFlowSetJSValue("initial", "initial", "row");
 132 </script>
 133 </body>
 134 </html>