Chromium Code Reviews Chromium Code Reviews
Issue 333563003:
[CSS Grid Layout] Update grid-auto-flow to the new syntax (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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 .gridAutoFlowColumnDense { | |
| 7 grid-auto-flow: column dense; | |
| 8 } | |
| 9 .gridAutoFlowRowDense { | |
| 10 grid-auto-flow: row dense; | |
| 11 } | |
| 12 .gridAutoFlowDenseColumn { | |
| 13 grid-auto-flow: dense column; | |
| 14 } | |
| 15 .gridAutoFlowDenseRow { | |
| 16 grid-auto-flow: dense row; | |
| 17 } | |
| 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 /* Bad values. */ | |
| 6 .gridAutoFlowInherit { | 31 .gridAutoFlowInherit { |
| 7 grid-auto-flow: inherit; | 32 grid-auto-flow: inherit; |
|
Julien - ping for review
2014/06/27 17:44:53
Inherit is always a valid keyword for CSS properti
Manuel Rego
2014/06/27 22:43:51
Ok, thanks for the clarification. Changed it to al
| |
| 8 } | 33 } |
| 9 /* Bad values. */ | 34 .gridAutoFlowNone { |
| 35 grid-auto-flow: none; | |
| 36 } | |
| 10 .gridAutoFlowRows { | 37 .gridAutoFlowRows { |
| 11 grid-auto-flow: rows; | 38 grid-auto-flow: rows; |
| 12 } | 39 } |
| 13 .gridAutoFlowColumns { | 40 .gridAutoFlowColumns { |
| 14 grid-auto-flow: columns; | 41 grid-auto-flow: columns; |
| 15 } | 42 } |
| 43 .gridAutoFlowDense { | |
| 44 grid-auto-flow: dense; | |
| 45 } | |
| 46 .gridAutoFlowColumnColumn { | |
| 47 grid-auto-flow: column column; | |
| 48 } | |
| 49 .gridAutoFlowDenseColumnStack { | |
| 50 grid-auto-flow: dense column stack; | |
| 51 } | |
| 52 .gridAutoFlowDenseRowStack { | |
| 53 grid-auto-flow: dense row stack; | |
| 54 } | |
| 55 .gridAutoFlowStackRowRow { | |
| 56 grid-auto-flow: stack row row; | |
| 57 } | |
| 16 </style> | 58 </style> |
| 17 <script src="../../resources/js-test.js"></script> | 59 <script src="../../resources/js-test.js"></script> |
| 18 </head> | 60 </head> |
| 19 <body> | 61 <body> |
| 20 <div class="grid" id="gridInitial"></div> | 62 <div class="grid" id="gridInitial"></div> |
| 21 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | |
| 22 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> | 63 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> |
| 23 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> | 64 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> |
| 65 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | |
| 66 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | |
| 67 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | |
| 68 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | |
| 69 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | |
| 70 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | |
| 71 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | |
| 72 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | |
| 73 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | |
| 24 <div class="grid gridAutoFlowColumn"> | 74 <div class="grid gridAutoFlowColumn"> |
| 25 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 75 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
| 26 </div> | 76 </div> |
| 27 <div class="grid gridAutoFlowColumn"> | 77 <div class="grid gridAutoFlowColumn"> |
| 28 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> | 78 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> |
| 29 </div> | 79 </div> |
| 80 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | |
| 30 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 81 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
| 31 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 82 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
| 83 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
| 84 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | |
| 85 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div> | |
| 86 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div > | |
| 87 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | |
| 32 <script> | 88 <script> |
| 33 description('Test that setting and getting grid-auto-flow works as expected' ); | 89 description('Test that setting and getting grid-auto-flow works as expected' ); |
| 34 | 90 |
| 35 debug("Test getting auto-flow set through CSS"); | 91 debug("Test getting auto-flow set through CSS"); |
| 36 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); | |
| 37 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'none'"); | |
| 38 | |
| 39 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); | 92 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); |
| 40 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'"); | 93 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'"); |
| 41 | 94 |
| 42 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); | 95 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); |
| 43 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'"); | 96 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'"); |
| 44 | 97 |
| 98 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen se"); | |
| 99 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); | |
| 100 | |
| 101 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); | |
| 102 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue ('grid-auto-flow')", "'row dense'"); | |
| 103 | |
| 104 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu mn"); | |
| 105 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); | |
| 106 | |
| 107 var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow"); | |
| 108 shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue ('grid-auto-flow')", "'row dense'"); | |
| 109 | |
| 110 var gridAutoFlowStack = document.getElementById("gridAutoFlowStack"); | |
| 111 shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('g rid-auto-flow')", "'stack row'"); | |
| 112 | |
| 113 var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColu mn"); | |
| 114 shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyVa lue('grid-auto-flow')", "'stack column'"); | |
| 115 | |
| 116 var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow"); | |
| 117 shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue ('grid-auto-flow')", "'stack row'"); | |
| 118 | |
| 119 var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnSta ck"); | |
| 120 shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyVa lue('grid-auto-flow')", "'stack column'"); | |
| 121 | |
| 122 var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack"); | |
| 123 shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue ('grid-auto-flow')", "'stack row'"); | |
| 124 | |
| 125 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); | |
| 126 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'row'"); | |
| 127 | |
| 45 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); | 128 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); |
| 46 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'none'"); | 129 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'row'"); |
| 47 | 130 |
| 48 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); | 131 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); |
| 49 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'none'"); | 132 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'row'"); |
| 133 | |
| 134 var gridAutoFlowDense = document.getElementById("gridAutoFlowDense"); | |
| 135 shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('g rid-auto-flow')", "'row'"); | |
| 136 | |
| 137 var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnCo lumn"); | |
| 138 shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyV alue('grid-auto-flow')", "'row'"); | |
| 139 | |
| 140 var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDens eColumnStack"); | |
| 141 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPrope rtyValue('grid-auto-flow')", "'row'"); | |
| 142 | |
| 143 var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRo wStack"); | |
| 144 shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getProperty Value('grid-auto-flow')", "'row'"); | |
| 145 | |
| 146 var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowR ow"); | |
| 147 shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyVa lue('grid-auto-flow')", "'row'"); | |
| 50 | 148 |
| 51 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); | 149 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); |
| 52 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'"); | 150 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'row'"); |
| 53 | 151 |
| 54 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ; | 152 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ; |
| 55 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'none'"); | 153 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'row'"); |
| 56 | 154 |
| 57 debug(""); | 155 debug(""); |
| 58 debug("Test the initial value"); | 156 debug("Test the initial value"); |
| 59 element = document.createElement("div"); | 157 element = document.createElement("div"); |
| 60 document.body.appendChild(element); | 158 document.body.appendChild(element); |
| 61 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); | 159 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
| 62 | 160 |
| 63 debug(""); | 161 debug(""); |
| 64 debug("Test getting and setting grid-auto-flow through JS"); | 162 debug("Test getting and setting grid-auto-flow through JS"); |
| 65 element.style.gridAutoFlow = "column"; | 163 element.style.gridAutoFlow = "column"; |
| 66 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); | 164 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); |
| 67 | 165 element.style.gridAutoFlow = "column dense"; |
| 166 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'"); | |
| 167 element.style.gridAutoFlow = "row dense"; | |
| 168 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'"); | |
| 169 element.style.gridAutoFlow = "dense column"; | |
| 170 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'"); | |
| 171 element.style.gridAutoFlow = "dense row"; | |
| 172 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'"); | |
| 173 element.style.gridAutoFlow = "row"; | |
| 174 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 175 element.style.gridAutoFlow = "stack"; | |
| 176 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
| 177 element.style.gridAutoFlow = "stack column"; | |
| 178 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'"); | |
| 179 element.style.gridAutoFlow = "stack row"; | |
| 180 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
| 181 element.style.gridAutoFlow = "column stack"; | |
| 182 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'"); | |
| 183 element.style.gridAutoFlow = "row stack"; | |
| 184 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
| 185 | |
| 186 debug(""); | |
| 187 debug("Test getting and setting bad values for grid-auto-flow through JS"); | |
| 68 element = document.createElement("div"); | 188 element = document.createElement("div"); |
| 69 document.body.appendChild(element); | 189 document.body.appendChild(element); |
| 70 element.style.gridAutoFlow = "row"; | |
| 71 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 72 | |
| 73 debug(""); | |
| 74 debug("Test getting and setting bad values for grid-auto-flow through JS"); | |
| 75 element.style.gridAutoFlow = "noone"; | 190 element.style.gridAutoFlow = "noone"; |
| 76 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | 191 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
| 192 element.style.gridAutoFlow = "dense"; | |
| 193 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 194 element.style.gridAutoFlow = "column column"; | |
| 195 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 196 element.style.gridAutoFlow = "dense column stack"; | |
| 197 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 198 element.style.gridAutoFlow = "dense row stack"; | |
| 199 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 200 element.style.gridAutoFlow = "stack row row"; | |
| 201 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
| 77 | 202 |
| 78 debug(""); | 203 debug(""); |
| 79 debug("Test setting grid-auto-flow to 'initial' through JS"); | 204 debug("Test setting grid-auto-flow to 'initial' through JS"); |
| 80 // Reusing the value so that we can check that it is set back to its initial value. | 205 // Reusing the value so that we can check that it is set back to its initial value. |
| 81 element.style.gridAutoFlow = "initial"; | 206 element.style.gridAutoFlow = "initial"; |
| 82 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); | 207 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
| 83 </script> | 208 </script> |
| 84 </body> | 209 </body> |
| 85 </html> | 210 </html> |
| OLD | NEW |
