| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <!-- | 2 <!-- |
| 3 Any copyright is dedicated to the Public Domain. | 3 Any copyright is dedicated to the Public Domain. |
| 4 http://creativecommons.org/publicdomain/zero/1.0/ | 4 http://creativecommons.org/publicdomain/zero/1.0/ |
| 5 --> | 5 --> |
| 6 <html><head> | 6 <html><head> |
| 7 <meta charset="utf-8"> | 7 <meta charset="utf-8"> |
| 8 <title>Reference: repeat(auto-fill/auto-fit)</title> | 8 <title>Reference: repeat(auto-fill/auto-fit)</title> |
| 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh
ow_bug.cgi?id=1118820"> | 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh
ow_bug.cgi?id=1118820"> |
| 10 <style type="text/css"> | 10 <style type="text/css"> |
| (...skipping 18 matching lines...) Expand all Loading... |
| 29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } | 29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } |
| 30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } | 30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } |
| 31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} | 31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} |
| 32 .r01 a {grid-row-end:auto; } | 32 .r01 a {grid-row-end:auto; } |
| 33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } | 33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } |
| 34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e];
} | 34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e];
} |
| 35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } | 35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } |
| 36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]
; } | 36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]
; } |
| 37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } | 37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } |
| 38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } | 38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } |
| 39 /* This is a bug in the original Mozilla tests, auto is not allowed in <auto-tra
ck-list> */ | 39 .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; } |
| 40 /* .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f];
} */ | |
| 41 .ra { grid-template-rows: none; } | |
| 42 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid-
gap:0; padding-bottom:4px;} | 40 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid-
gap:0; padding-bottom:4px;} |
| 43 | 41 |
| 44 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } | 42 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } |
| 45 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } | 43 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } |
| 46 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } | 44 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } |
| 47 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0
;} | 45 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0
;} |
| 48 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f];
} | 46 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f];
} |
| 49 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f];
grid-gap:0; } | 47 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f];
grid-gap:0; } |
| 50 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f];
grid-gap:0; padding-bottom:4px;} | 48 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f];
grid-gap:0; padding-bottom:4px;} |
| 51 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f];
} | 49 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f];
} |
| 52 | 50 |
| 53 .w100 { height: 100px; } | 51 .w100 { height: 100px; } |
| 54 .w3 { height: 3px; } | 52 .w3 { height: 3px; } |
| 55 .w20 { height: 20px; } | 53 .w20 { height: 20px; } |
| 56 .w50 { height: 50px; } | 54 .w50 { height: 50px; } |
| 57 .w80 { height: 80px; } | 55 .w80 { height: 80px; } |
| 58 .mw100 { min-height: 100px; } | 56 .mw100 { min-height: 100px; } |
| 59 .mw3 { height: 3px; } | 57 .mw3 { height: 3px; } |
| 60 .mw20 { height: 20px; } | 58 .mw20 { height: 20px; } |
| 61 .mw50 { min-height: 50px; } | 59 .mw50 { min-height: 50px; } |
| (...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 232 | 230 |
| 233 <div class="grid w r30" style="min-height:0"><a></a><b></b></div> | 231 <div class="grid w r30" style="min-height:0"><a></a><b></b></div> |
| 234 <div class="grid w r30" style="height:0"><a></a><b></b></div> | 232 <div class="grid w r30" style="height:0"><a></a><b></b></div> |
| 235 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div> | 233 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div> |
| 236 <div class="grid w r30" style="max-height:0"><a></a><b></b></div> | 234 <div class="grid w r30" style="max-height:0"><a></a><b></b></div> |
| 237 <div class="grid w r003"><a></a><b></b></div> | 235 <div class="grid w r003"><a></a><b></b></div> |
| 238 | 236 |
| 239 | 237 |
| 240 </fill> | 238 </fill> |
| 241 | 239 |
| 242 <!-- <fit> | 240 <!-- The original 005 test from Mozilla had also tests for auto-fit. They were m
oved to part-2 as it |
| 243 | 241 is not possible to fit all the contents in the viewport without scroll (req
uired by reftests). --> |
| 244 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 245 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 246 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 247 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 248 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 249 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 250 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 251 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 252 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 253 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 254 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 255 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 256 | |
| 257 <br clear="all"> | |
| 258 <br clear="all"> | |
| 259 | |
| 260 <div class="grid r01 w w20"><a></a><b></b></div> | |
| 261 <div class="grid r01 w w3"><a></a><b></b></div> | |
| 262 <div class="grid r01 w xw20"><a></a><b></b></div> | |
| 263 <div class="grid r01 w xw3"><a></a><b></b></div> | |
| 264 <div class="grid r01 w mw20"><a></a><b></b></div> | |
| 265 <div class="grid r01 w mw3"><a></a><b></b></div> | |
| 266 <div class="grid r01 w w20 xw3"><a></a><b></b></div> | |
| 267 <div class="grid r01 w w3 mw20"><a></a><b></b></div> | |
| 268 <div class="grid r01 w w3 mw3"><a></a><b></b></div> | |
| 269 <div class="grid r01 w xw20"><a></a><b></b></div> | |
| 270 <div class="grid r01 w xw3 mw20"><a></a><b></b></div> | |
| 271 <div class="grid r01 w mw20"><a></a><b></b></div> | |
| 272 | |
| 273 <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x><
/x></div> | |
| 274 <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x><
/div> | |
| 275 <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><
b></b><x></x></div> | |
| 276 <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x><
/x></div> | |
| 277 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> | |
| 278 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> | |
| 279 | |
| 280 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> | |
| 281 <div class="grid w r01" style="height:0"><a></a><b></b></div> | |
| 282 <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div> | |
| 283 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> | |
| 284 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> | |
| 285 <div class="grid w r0a"><a></a><b></b></div> | |
| 286 | |
| 287 <br clear="all"> | |
| 288 <br clear="all"> | |
| 289 | |
| 290 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 291 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 292 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 293 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 294 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 295 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 296 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 297 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 298 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 299 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 300 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 301 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 302 | |
| 303 <br clear="all"> | |
| 304 <br clear="all"> | |
| 305 | |
| 306 <div class="grid r02 w w20"><a></a><b></b></div> | |
| 307 <div class="grid r02 w w3"><a></a><b></b></div> | |
| 308 <div class="grid r02 w xw20"><a></a><b></b></div> | |
| 309 <div class="grid r02 w xw3"><a></a><b></b></div> | |
| 310 <div class="grid r02 w mw20"><a></a><b></b></div> | |
| 311 <div class="grid r02 w mw3"><a></a><b></b></div> | |
| 312 <div class="grid r02 w w20 xw3"><a></a><b></b></div> | |
| 313 <div class="grid r02 w w3 mw20"><a></a><b></b></div> | |
| 314 <div class="grid r02 w w3 mw3"><a></a><b></b></div> | |
| 315 <div class="grid r02 w xw20"><a></a><b></b></div> | |
| 316 <div class="grid r02 w xw3 mw20"><a></a><b></b></div> | |
| 317 <div class="grid r02 w mw20"><a></a><b></b></div> | |
| 318 | |
| 319 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x><
/x></div> | |
| 320 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x><
/div> | |
| 321 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><
b></b><x></x></div> | |
| 322 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x><
/x></div> | |
| 323 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> | |
| 324 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> | |
| 325 | |
| 326 <div class="grid w r02" style="min-height:0"><a></a><b></b></div> | |
| 327 <div class="grid w r02" style="height:0"><a></a><b></b></div> | |
| 328 <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div> | |
| 329 <div class="grid w r02" style="max-height:0"><a></a><b></b></div> | |
| 330 <div class="grid w r02"><a></a><b></b></div> | |
| 331 | |
| 332 | |
| 333 <br clear="all"> | |
| 334 <br clear="all"> | |
| 335 | |
| 336 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 337 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 338 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 339 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 340 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 341 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 342 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 343 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 344 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 345 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 346 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 347 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> | |
| 348 | |
| 349 <br clear="all"> | |
| 350 <br clear="all"> | |
| 351 | |
| 352 <div class="grid r03 w w20"><a></a><b></b></div> | |
| 353 <div class="grid r03 w w3"><a></a><b></b></div> | |
| 354 <div class="grid r03 w xw20"><a></a><b></b></div> | |
| 355 <div class="grid r03 w xw3"><a></a><b></b></div> | |
| 356 <div class="grid r03 w mw20"><a></a><b></b></div> | |
| 357 <div class="grid r03 w mw3"><a></a><b></b></div> | |
| 358 <div class="grid r03 w w20 xw3"><a></a><b></b></div> | |
| 359 <div class="grid r03 w w3 mw20"><a></a><b></b></div> | |
| 360 <div class="grid r03 w w3 mw3"><a></a><b></b></div> | |
| 361 <div class="grid r03 w xw20"><a></a><b></b></div> | |
| 362 <div class="grid r03 w xw3 mw20"><a></a><b></b></div> | |
| 363 <div class="grid r03 w mw20"><a></a><b></b></div> | |
| 364 | |
| 365 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x
></x></div> | |
| 366 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x
></div> | |
| 367 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a
><b></b><x></x></div> | |
| 368 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x
></x></div> | |
| 369 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> | |
| 370 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> | |
| 371 | |
| 372 <div class="grid w r003" style="min-height:0"><a></a><b></b></div> | |
| 373 <div class="grid w r03" style="height:0"><a></a><b></b></div> | |
| 374 <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div> | |
| 375 <div class="grid w r03" style="max-height:0"><a></a><b></b></div> | |
| 376 <div class="grid w r003"><a></a><b></b></div> | |
| 377 | |
| 378 | |
| 379 | |
| 380 </fit> --> | |
| 381 | |
| 382 | 242 |
| 383 </body> | 243 </body> |
| 384 </html> | 244 </html> |
| OLD | NEW |