Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <link href="resources/grid.css" rel="stylesheet"/> | 3 <link href="resources/grid.css" rel="stylesheet"/> |
| 4 <style> | 4 <style> |
| 5 .grid { | 5 .grid { |
| 6 font: 10px/1 Ahem; | 6 font: 10px/1 Ahem; |
| 7 } | 7 } |
| 8 .gridMinContentFixedAndAuto { | 8 .gridMinContentFixedAndAuto { |
| 9 grid-template-columns: minmax(min-content, 15px) auto; | 9 grid-template-columns: minmax(min-content, 15px) auto; |
| 10 } | 10 } |
| (...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 91 <div class="constrainedContainer"> | 91 <div class="constrainedContainer"> |
| 92 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed"> | 92 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed"> |
| 93 <div class="firstRowBothColumn">XXXX XXXX</div> | 93 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 94 </div> | 94 </div> |
| 95 </div> | 95 </div> |
| 96 | 96 |
| 97 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed"> | 97 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed"> |
| 98 <div class="firstRowBothColumn">XXXX XXXX</div> | 98 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 99 </div> | 99 </div> |
| 100 | 100 |
| 101 <!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. --> | |
|
Julien - ping for review
2014/09/23 23:17:31
forbidding? for adding or for bidding (like an auc
svillar
2014/09/24 08:33:11
forbidding in the sense of disallowing
| |
| 102 <div class="constrainedContainer"> | |
| 103 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoU nsortedConstrained"> | |
| 104 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 105 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 106 </div> | |
| 107 </div> | |
| 108 | |
| 109 <div class="constrainedContainer"> | |
| 110 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained"> | |
| 111 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 112 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 113 </div> | |
| 114 </div> | |
| 115 | |
| 116 <div class="constrainedContainer"> | |
| 117 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinC ontentFixedUnsortedConstrained"> | |
| 118 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 119 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 120 </div> | |
| 121 </div> | |
| 122 | |
| 123 <div class="constrainedContainer"> | |
| 124 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinConten tUnsortedConstrained"> | |
| 125 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 126 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 127 </div> | |
| 128 </div> | |
| 129 | |
| 130 <div class="constrainedContainer"> | |
| 131 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAn dMaxContentUnsortedConstrained"> | |
| 132 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 133 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 134 </div> | |
| 135 </div> | |
| 136 | |
| 137 <div class="constrainedContainer"> | |
| 138 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAn dMinContentUnsortedConstrained"> | |
| 139 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 140 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 141 </div> | |
| 142 </div> | |
| 143 | |
| 144 <div class="constrainedContainer"> | |
| 145 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxC ontentFixedUnsortedConstrained"> | |
| 146 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 147 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 148 </div> | |
| 149 </div> | |
| 150 | |
| 151 <div class="constrainedContainer"> | |
| 152 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoU nsortedConstrained"> | |
| 153 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 154 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 155 </div> | |
| 156 </div> | |
| 157 | |
| 158 <div class="constrainedContainer"> | |
| 159 <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrain ed"> | |
| 160 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 161 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 162 </div> | |
| 163 </div> | |
| 164 | |
| 165 <div class="constrainedContainer"> | |
| 166 <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrain ed"> | |
| 167 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 168 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 169 </div> | |
| 170 </div> | |
| 171 | |
| 172 <div class="constrainedContainer"> | |
| 173 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinC ontentFixedUnsortedConstrained"> | |
| 174 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 175 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 176 </div> | |
| 177 </div> | |
| 178 | |
| 179 <div class="constrainedContainer"> | |
| 180 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxC ontentFixedUnsortedConstrained"> | |
| 181 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 182 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 183 </div> | |
| 184 </div> | |
| 185 | |
| 186 <!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. --> | |
| 187 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsor ted"> | |
| 188 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 189 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 190 </div> | |
| 191 | |
| 192 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsorted"> | |
| 193 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 194 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 195 </div> | |
| 196 | |
| 197 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinConte ntFixedUnsorted"> | |
| 198 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 199 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 200 </div> | |
| 201 | |
| 202 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUns orted"> | |
| 203 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 204 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 205 </div> | |
| 206 | |
| 207 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMax ContentUnsorted"> | |
| 208 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 209 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 210 </div> | |
| 211 | |
| 212 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMin ContentUnsorted"> | |
| 213 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 214 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 215 </div> | |
| 216 | |
| 217 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxConte ntFixedUnsorted"> | |
| 218 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 219 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 220 </div> | |
| 221 | |
| 222 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsor ted"> | |
| 223 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 224 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 225 </div> | |
| 226 | |
| 227 <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsorted"> | |
| 228 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 229 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 230 </div> | |
| 231 | |
| 232 <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsorted"> | |
| 233 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 234 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 235 </div> | |
| 236 | |
| 237 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixedUnsorted"> | |
| 238 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 239 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 240 </div> | |
| 241 | |
| 242 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixedUnsorted"> | |
| 243 <div class="firstRowBothColumn">XXXX XXXX</div> | |
| 244 <div class="firstRowSecondColumn">XXXX XXXX</div> | |
| 245 </div> | |
| 246 | |
| 101 <script> | 247 <script> |
| 102 function testGridColumnsValues(id, computedColumnValue) | 248 function testGridColumnsValues(id, computedColumnValue) |
| 103 { | 249 { |
| 104 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue); | 250 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue); |
| 105 } | 251 } |
| 106 | 252 |
| 107 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); | 253 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); |
| 108 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); | 254 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); |
| 109 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); | 255 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); |
| 110 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); | 256 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); |
| 111 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); | 257 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); |
| 112 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); | 258 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); |
| 113 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); | 259 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); |
| 114 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); | 260 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); |
| 115 testGridColumnsValues("gridAutoMinContent", "70px 20px"); | 261 testGridColumnsValues("gridAutoMinContent", "70px 20px"); |
| 116 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); | 262 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); |
| 117 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); | 263 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); |
| 118 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); | 264 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); |
| 265 | |
| 266 debug(""); | |
| 267 debug("Check that items are processed by ascending span to compute track brea dths forbidding extra space distribution."); | |
| 268 testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 4 0px"); | |
| 269 testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "0px 40px"); | |
| 270 testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px"); | |
| 271 testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "50px 40px"); | |
| 272 testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 90px"); | |
| 273 testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px"); | |
| 274 testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px"); | |
| 275 testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "50px 40px"); | |
| 276 testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 40px"); | |
| 277 testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px"); | |
| 278 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px"); | |
| 279 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "0px 90px"); | |
| 280 | |
| 281 debug(""); | |
| 282 debug("Check that items are processed by ascending span to compute track brea dths allowing extra space distribution."); | |
| 283 testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px"); | |
| 284 testGridColumnsValues("gridAutoAndAutoUnsorted", "0px 90px"); | |
| 285 testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "10px 40px" ); | |
| 286 testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "50px 40px"); | |
| 287 testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 90px" ); | |
| 288 testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px" ); | |
| 289 testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "10px 90px" ); | |
| 290 testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "50px 90px"); | |
| 291 testGridColumnsValues("gridAutoMinContentUnsorted", "50px 40px"); | |
| 292 testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px"); | |
| 293 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "55px 40px" ); | |
| 294 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "55px 90px" ); | |
| 119 </script> | 295 </script> |
| 120 </body> | 296 </body> |
| 121 </html> | 297 </html> |
| OLD | NEW |