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. --> | |
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> | |
Julien - ping for review
2014/10/13 19:38:18
All the tests are using the same items. It would b
svillar
2014/10/14 06:32:01
Yeah, it was easier for me to compute the expected
| |
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 |