OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 | 5 |
6 .grid { | 6 .grid { |
7 grid-template-columns: 100px 100px 100px 100px; | 7 grid-template-columns: 100px 100px 100px 100px; |
8 grid-template-rows: 50px 50px; | 8 grid-template-rows: 50px 50px; |
9 grid-gap: 25px 50px; | 9 grid-gap: 25px 50px; |
10 width: 800px; | 10 width: 800px; |
(...skipping 21 matching lines...) Expand all Loading... |
32 <script src="../../resources/testharness.js"></script> | 32 <script src="../../resources/testharness.js"></script> |
33 <script src="../../resources/testharnessreport.js"></script> | 33 <script src="../../resources/testharnessreport.js"></script> |
34 <script src="../../resources/check-layout-th.js"></script> | 34 <script src="../../resources/check-layout-th.js"></script> |
35 <body onload="checkLayout('.grid')"> | 35 <body onload="checkLayout('.grid')"> |
36 <div id="log"></div> | 36 <div id="log"></div> |
37 | 37 |
38 <p>This test checks the behavior of the positioned items in a grid container wit
h gaps.</p> | 38 <p>This test checks the behavior of the positioned items in a grid container wit
h gaps.</p> |
39 | 39 |
40 <div class="grid"> | 40 <div class="grid"> |
41 <div style="grid-column: auto / auto; grid-row: auto / auto;" | 41 <div style="grid-column: auto / auto; grid-row: auto / auto;" |
42 data-offset-x="15" data-offset-y="15" data-expected-width="830" data-exp
ected-height="230"> | 42 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
43 </div> | 43 </div> |
44 </div> | 44 </div> |
45 | 45 |
46 <div class="grid"> | 46 <div class="grid"> |
47 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;
" | 47 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;
" |
48 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> | 48 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
49 </div> | 49 </div> |
50 </div> | 50 </div> |
51 | 51 |
52 <div class="grid"> | 52 <div class="grid"> |
(...skipping 135 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
188 </div> | 188 </div> |
189 | 189 |
190 <div class="grid"> | 190 <div class="grid"> |
191 <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;" | 191 <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;" |
192 data-offset-x="315" data-offset-y="140" data-expected-width="515" data-e
xpected-height="90"> | 192 data-offset-x="315" data-offset-y="140" data-expected-width="515" data-e
xpected-height="90"> |
193 </div> | 193 </div> |
194 </div> | 194 </div> |
195 | 195 |
196 <div class="grid"> | 196 <div class="grid"> |
197 <div style="grid-column: 4 / auto; grid-row: 4 / auto;" | 197 <div style="grid-column: 4 / auto; grid-row: 4 / auto;" |
198 data-offset-x="465" data-offset-y="15" data-expected-width="365" data-ex
pected-height="230"> | 198 data-offset-x="465" data-offset-y="0" data-expected-width="365" data-exp
ected-height="230"> |
199 </div> | 199 </div> |
200 </div> | 200 </div> |
201 | 201 |
202 <div class="grid"> | 202 <div class="grid"> |
203 <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;" | 203 <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;" |
204 data-offset-x="465" data-offset-y="0" data-expected-width="365" data-exp
ected-height="230"> | 204 data-offset-x="465" data-offset-y="0" data-expected-width="365" data-exp
ected-height="230"> |
205 </div> | 205 </div> |
206 </div> | 206 </div> |
207 | 207 |
208 <div class="grid"> | 208 <div class="grid"> |
209 <div style="grid-column: 5 / auto; grid-row: 5 / auto;" | 209 <div style="grid-column: 5 / auto; grid-row: 5 / auto;" |
210 data-offset-x="565" data-offset-y="15" data-expected-width="265" data-ex
pected-height="230"> | 210 data-offset-x="565" data-offset-y="0" data-expected-width="265" data-exp
ected-height="230"> |
211 </div> | 211 </div> |
212 </div> | 212 </div> |
213 | 213 |
214 <div class="grid"> | 214 <div class="grid"> |
215 <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;" | 215 <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;" |
216 data-offset-x="565" data-offset-y="0" data-expected-width="265" data-exp
ected-height="230"> | 216 data-offset-x="565" data-offset-y="0" data-expected-width="265" data-exp
ected-height="230"> |
217 </div> | 217 </div> |
218 </div> | 218 </div> |
219 | 219 |
220 <div class="grid"> | 220 <div class="grid"> |
221 <div style="grid-column: 6 / auto; grid-row: 6 / auto;" | 221 <div style="grid-column: 6 / auto; grid-row: 6 / auto;" |
222 data-offset-x="15" data-offset-y="15" data-expected-width="830" data-exp
ected-height="230"> | 222 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
223 </div> | 223 </div> |
224 </div> | 224 </div> |
225 | 225 |
226 <div class="grid"> | 226 <div class="grid"> |
227 <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;" | 227 <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;" |
228 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> | 228 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
229 </div> | 229 </div> |
230 </div> | 230 </div> |
231 | 231 |
232 <div class="grid"> | 232 <div class="grid"> |
233 <div style="grid-column: auto / 1; grid-row: auto / 1;" | 233 <div style="grid-column: auto / 1; grid-row: auto / 1;" |
234 data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expe
cted-height="15"> | 234 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect
ed-height="15"> |
235 </div> | 235 </div> |
236 </div> | 236 </div> |
237 | 237 |
238 <div class="grid"> | 238 <div class="grid"> |
239 <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;" | 239 <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;" |
240 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect
ed-height="15"> | 240 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expect
ed-height="15"> |
241 </div> | 241 </div> |
242 </div> | 242 </div> |
243 | 243 |
244 <div class="grid"> | 244 <div class="grid"> |
245 <div style="grid-column: auto / 2; grid-row: auto / 2;" | 245 <div style="grid-column: auto / 2; grid-row: auto / 2;" |
246 data-offset-x="15" data-offset-y="15" data-expected-width="115" data-exp
ected-height="65"> | 246 data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expec
ted-height="65"> |
247 </div> | 247 </div> |
248 </div> | 248 </div> |
249 | 249 |
250 <div class="grid"> | 250 <div class="grid"> |
251 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" | 251 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" |
252 data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expec
ted-height="65"> | 252 data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expec
ted-height="65"> |
253 </div> | 253 </div> |
254 </div> | 254 </div> |
255 | 255 |
256 <div class="grid"> | 256 <div class="grid"> |
257 <div style="grid-column: auto / 3; grid-row: auto / 3;" | 257 <div style="grid-column: auto / 3; grid-row: auto / 3;" |
258 data-offset-x="15" data-offset-y="15" data-expected-width="265" data-exp
ected-height="140"> | 258 data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expec
ted-height="140"> |
259 </div> | 259 </div> |
260 </div> | 260 </div> |
261 | 261 |
262 <div class="grid"> | 262 <div class="grid"> |
263 <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;" | 263 <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;" |
264 data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expec
ted-height="140"> | 264 data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expec
ted-height="140"> |
265 </div> | 265 </div> |
266 </div> | 266 </div> |
267 | 267 |
268 <div class="grid"> | 268 <div class="grid"> |
269 <div style="grid-column: auto / 4; grid-row: auto / 4;" | 269 <div style="grid-column: auto / 4; grid-row: auto / 4;" |
270 data-offset-x="15" data-offset-y="15" data-expected-width="415" data-exp
ected-height="230"> | 270 data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expec
ted-height="230"> |
271 </div> | 271 </div> |
272 </div> | 272 </div> |
273 | 273 |
274 <div class="grid"> | 274 <div class="grid"> |
275 <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;" | 275 <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;" |
276 data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expec
ted-height="230"> | 276 data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expec
ted-height="230"> |
277 </div> | 277 </div> |
278 </div> | 278 </div> |
279 | 279 |
280 <div class="grid"> | 280 <div class="grid"> |
281 <div style="grid-column: auto / 5; grid-row: auto / 5;" | 281 <div style="grid-column: auto / 5; grid-row: auto / 5;" |
282 data-offset-x="15" data-offset-y="15" data-expected-width="565" data-exp
ected-height="230"> | 282 data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expec
ted-height="230"> |
283 </div> | 283 </div> |
284 </div> | 284 </div> |
285 | 285 |
286 <div class="grid"> | 286 <div class="grid"> |
287 <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;" | 287 <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;" |
288 data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expec
ted-height="230"> | 288 data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expec
ted-height="230"> |
289 </div> | 289 </div> |
290 </div> | 290 </div> |
291 | 291 |
292 <div class="grid"> | 292 <div class="grid"> |
293 <div style="grid-column: auto / 6; grid-row: auto / 6;" | 293 <div style="grid-column: auto / 6; grid-row: auto / 6;" |
294 data-offset-x="15" data-offset-y="15" data-expected-width="830" data-exp
ected-height="230"> | 294 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
295 </div> | 295 </div> |
296 </div> | 296 </div> |
297 | 297 |
298 <div class="grid"> | 298 <div class="grid"> |
299 <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;" | 299 <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;" |
300 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> | 300 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
301 </div> | 301 </div> |
302 </div> | 302 </div> |
303 | 303 |
304 </body> | 304 </body> |
305 </html> | 305 </html> |
OLD | NEW |