Chromium Code Reviews Chromium Code Reviews
Issue 826893003:
[CSS Grid Layout] Remove stack from grid-auto-flow syntax (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@remove-stack| OLD | NEW |
|---|---|
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <style> | 5 <style> |
| 6 .gridAutoFlowDense { | |
| 7 grid-auto-flow: dense; | |
| 8 } | |
| 6 .gridAutoFlowColumnDense { | 9 .gridAutoFlowColumnDense { |
| 7 grid-auto-flow: column dense; | 10 grid-auto-flow: column dense; |
| 8 } | 11 } |
| 9 .gridAutoFlowRowDense { | 12 .gridAutoFlowRowDense { |
| 10 grid-auto-flow: row dense; | 13 grid-auto-flow: row dense; |
| 11 } | 14 } |
| 12 .gridAutoFlowDenseColumn { | 15 .gridAutoFlowDenseColumn { |
| 13 grid-auto-flow: dense column; | 16 grid-auto-flow: dense column; |
| 14 } | 17 } |
| 15 .gridAutoFlowDenseRow { | 18 .gridAutoFlowDenseRow { |
| 16 grid-auto-flow: dense row; | 19 grid-auto-flow: dense row; |
| 17 } | 20 } |
| 18 .gridAutoFlowStackColumn { | |
| 19 grid-auto-flow: stack column; | |
| 20 } | |
| 21 .gridAutoFlowStackRow { | |
| 22 grid-auto-flow: stack row; | |
| 23 } | |
| 24 .gridAutoFlowColumnStack { | |
| 25 grid-auto-flow: column stack; | |
| 26 } | |
| 27 .gridAutoFlowRowStack { | |
| 28 grid-auto-flow: row stack; | |
| 29 } | |
| 30 .gridAutoFlowInherit { | 21 .gridAutoFlowInherit { |
| 31 grid-auto-flow: inherit; | 22 grid-auto-flow: inherit; |
| 32 } | 23 } |
| 33 /* Bad values. */ | 24 /* Bad values. */ |
| 34 .gridAutoFlowNone { | 25 .gridAutoFlowNone { |
| 35 grid-auto-flow: none; | 26 grid-auto-flow: none; |
| 36 } | 27 } |
| 37 .gridAutoFlowRows { | 28 .gridAutoFlowRows { |
| 38 grid-auto-flow: rows; | 29 grid-auto-flow: rows; |
| 39 } | 30 } |
| 40 .gridAutoFlowColumns { | 31 .gridAutoFlowColumns { |
| 41 grid-auto-flow: columns; | 32 grid-auto-flow: columns; |
| 42 } | 33 } |
| 43 .gridAutoFlowDense { | |
| 44 grid-auto-flow: dense; | |
| 45 } | |
| 46 .gridAutoFlowColumnFoo { | 34 .gridAutoFlowColumnFoo { |
| 47 grid-auto-flow: column foo; | 35 grid-auto-flow: column foo; |
| 48 } | 36 } |
| 49 .gridAutoFlowColumnColumn { | 37 .gridAutoFlowColumnColumn { |
| 50 grid-auto-flow: column column; | 38 grid-auto-flow: column column; |
| 51 } | 39 } |
| 52 .gridAutoFlowDenseColumnStack { | |
| 53 grid-auto-flow: dense column stack; | |
| 54 } | |
| 55 .gridAutoFlowDenseRowStack { | |
| 56 grid-auto-flow: dense row stack; | |
| 57 } | |
| 58 .gridAutoFlowStackRowRow { | |
| 59 grid-auto-flow: stack row row; | |
|
Julien - ping for review
2015/01/05 13:11:34
We could keep some of these tests to make sure the
Manuel Rego
2015/01/08 12:50:28
Sure, I'll keep some of them.
| |
| 60 } | |
| 61 </style> | 40 </style> |
| 62 <script src="../../resources/js-test.js"></script> | 41 <script src="../../resources/js-test.js"></script> |
| 63 </head> | 42 </head> |
| 64 <body> | 43 <body> |
| 65 <div class="grid" id="gridInitial"></div> | 44 <div class="grid" id="gridInitial"></div> |
| 66 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> | 45 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> |
| 67 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> | 46 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> |
| 47 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
| 68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | 48 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> |
| 69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | 49 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> |
| 70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | 50 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> |
| 71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | 51 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> |
| 72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | |
| 73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | |
| 74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | |
| 75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | |
| 76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | |
| 77 <div class="grid gridAutoFlowColumnSparse"> | 52 <div class="grid gridAutoFlowColumnSparse"> |
| 78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 53 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
| 79 </div> | 54 </div> |
| 80 <div class="grid gridAutoFlowColumnSparse"> | 55 <div class="grid gridAutoFlowColumnSparse"> |
| 81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> | 56 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> |
| 82 </div> | 57 </div> |
| 83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | 58 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> |
| 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 59 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
| 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 60 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
| 86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
| 87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | 61 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> |
| 88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | 62 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> |
| 89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div> | |
| 90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div > | |
| 91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | |
| 92 <script src="resources/grid-definitions-parsing-utils.js"></script> | 63 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 93 <script> | 64 <script> |
| 94 description('Test that setting and getting grid-auto-flow works as expected' ); | 65 description('Test that setting and getting grid-auto-flow works as expected' ); |
| 95 | 66 |
| 96 debug("Test getting grid-auto-flow set through CSS"); | 67 debug("Test getting grid-auto-flow set through CSS"); |
| 97 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column"); | 68 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column"); |
| 98 checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row"); | 69 checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row"); |
| 70 checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense"); | |
| 99 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense"); | 71 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense"); |
| 100 checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense"); | 72 checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense"); |
| 101 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense"); | 73 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense"); |
| 102 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense"); | 74 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense"); |
| 103 checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "stack row"); | |
| 104 checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "stack column"); | |
| 105 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "stack row"); | |
| 106 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "stack column"); | |
| 107 checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "stack row"); | |
| 108 checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column"); | 75 checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column"); |
| 109 checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row"); | 76 checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row"); |
| 110 | 77 |
| 111 debug(""); | 78 debug(""); |
| 112 debug("Test getting grid-auto-flow bad values set through CSS"); | 79 debug("Test getting grid-auto-flow bad values set through CSS"); |
| 113 checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row"); | 80 checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row"); |
| 114 checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row"); | 81 checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row"); |
| 115 checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row"); | 82 checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row"); |
| 116 checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row"); | |
| 117 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row"); | 83 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row"); |
| 118 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row"); | 84 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row"); |
| 119 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row"); | |
| 120 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row"); | |
| 121 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row"); | |
| 122 | 85 |
| 123 debug(""); | 86 debug(""); |
| 124 debug("Test the initial value"); | 87 debug("Test the initial value"); |
| 125 checkGridAutoFlowSetJSValue("", "", "row"); | 88 checkGridAutoFlowSetJSValue("", "", "row"); |
| 126 | 89 |
| 127 debug("Test getting and setting grid-auto-flow through JS"); | 90 debug("Test getting and setting grid-auto-flow through JS"); |
| 128 checkGridAutoFlowSetJSValue("column", "column", "column"); | 91 checkGridAutoFlowSetJSValue("column", "column", "column"); |
| 129 checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense"); | 92 checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense"); |
| 130 checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense"); | 93 checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense"); |
| 131 checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense"); | 94 checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense"); |
| 132 checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense"); | 95 checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense"); |
| 133 checkGridAutoFlowSetJSValue("row", "row", "row"); | 96 checkGridAutoFlowSetJSValue("row", "row", "row"); |
| 134 checkGridAutoFlowSetJSValue("stack", "stack", "stack row"); | |
| 135 checkGridAutoFlowSetJSValue("stack column", "stack column", "stack column"); | |
| 136 checkGridAutoFlowSetJSValue("stack row", "stack row", "stack row"); | |
| 137 checkGridAutoFlowSetJSValue("column stack", "column stack", "stack column"); | |
| 138 checkGridAutoFlowSetJSValue("row stack", "row stack", "stack row"); | |
| 139 | 97 |
| 140 debug(""); | 98 debug(""); |
| 141 debug("Test getting and setting bad values for grid-auto-flow through JS"); | 99 debug("Test getting and setting bad values for grid-auto-flow through JS"); |
| 142 checkGridAutoFlowSetJSValue("noone", "", "row"); | 100 checkGridAutoFlowSetJSValue("noone", "", "row"); |
| 143 checkGridAutoFlowSetJSValue("dense", "", "row"); | 101 checkGridAutoFlowSetJSValue("dense row dense", "", "row"); |
| 144 checkGridAutoFlowSetJSValue("column column", "", "row"); | 102 checkGridAutoFlowSetJSValue("column column", "", "row"); |
| 145 checkGridAutoFlowSetJSValue("dense column stack", "", "row"); | |
| 146 checkGridAutoFlowSetJSValue("dense row stack", "", "row"); | |
| 147 checkGridAutoFlowSetJSValue("stack row row", "", "row"); | |
| 148 | 103 |
| 149 debug(""); | 104 debug(""); |
| 150 debug("Test setting grid-auto-flow to 'initial' through JS"); | 105 debug("Test setting grid-auto-flow to 'initial' through JS"); |
| 151 // Reusing the value so that we can check that it is set back to its initial value. | 106 // Reusing the value so that we can check that it is set back to its initial value. |
| 152 checkGridAutoFlowSetJSValue("initial", "initial", "row"); | 107 checkGridAutoFlowSetJSValue("initial", "initial", "row"); |
| 153 </script> | 108 </script> |
| 154 </body> | 109 </body> |
| 155 </html> | 110 </html> |
| OLD | NEW |
