| 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 .grid { | 5 .grid { |
| 6 grid-template-columns: 50px 100px; | 6 grid-template-columns: 50px 100px; |
| 7 grid-template-rows: 50px 100px; | 7 grid-template-rows: 50px 100px; |
| 8 } | 8 } |
| 9 | 9 |
| 10 .negativeOrder { | 10 .negativeOrder { |
| 11 order: -1; | 11 order: -1; |
| 12 } | 12 } |
| 13 | 13 |
| 14 .positiveOrder { | 14 .positiveOrder { |
| 15 order: 10; | 15 order: 10; |
| 16 } | 16 } |
| 17 </style> | 17 </style> |
| 18 </head> | 18 </head> |
| 19 <script src="../../resources/check-layout.js"></script> | 19 <script src="../../resources/check-layout.js"></script> |
| 20 <body onload="checkLayout('.grid')"> | 20 <body onload="checkLayout('.grid')"> |
| 21 <p>This test checks that the auto-placement algorithm takes 'order' into acc
ount when placing grid items.</p> | 21 <p>This test checks that the auto-placement algorithm takes 'order' into acc
ount when placing grid items.</p> |
| 22 | 22 |
| 23 <!-- Step 1, grid item with a major-axis position that is not 'auto'. --> | 23 <!-- Step 1, grid item with a major-axis position that is not 'auto'. --> |
| 24 <div style="position: relative"> | 24 <div style="position: relative"> |
| 25 <div class="grid gridAutoFlowRow"> | 25 <div class="grid gridAutoFlowRowDense"> |
| 26 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" d
ata-offset-y="0" data-expected-width="100" data-expected-height="50"></div> | 26 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" d
ata-offset-y="0" data-expected-width="100" data-expected-height="50"></div> |
| 27 <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-o
ffset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"
></div> | 27 <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-o
ffset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"
></div> |
| 28 </div> | 28 </div> |
| 29 </div> | 29 </div> |
| 30 | 30 |
| 31 <div style="position: relative"> | 31 <div style="position: relative"> |
| 32 <div class="grid gridAutoFlowRow"> | 32 <div class="grid gridAutoFlowRowDense"> |
| 33 <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-o
ffset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="5
0"></div> | 33 <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-o
ffset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="5
0"></div> |
| 34 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" da
ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div> | 34 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" da
ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| 35 </div> | 35 </div> |
| 36 </div> | 36 </div> |
| 37 | 37 |
| 38 <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. --> | 38 <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. --> |
| 39 <div style="position: relative"> | 39 <div style="position: relative"> |
| 40 <div class="grid gridAutoFlowColumn"> | 40 <div class="grid gridAutoFlowColumnDense"> |
| 41 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50"
data-offset-y="50" data-expected-width="100" data-expected-height="100"></div> | 41 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50"
data-offset-y="50" data-expected-width="100" data-expected-height="100"></div> |
| 42 <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data-
offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="1
00"></div> | 42 <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data-
offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="1
00"></div> |
| 43 </div> | 43 </div> |
| 44 </div> | 44 </div> |
| 45 | 45 |
| 46 <div style="position: relative"> | 46 <div style="position: relative"> |
| 47 <div class="grid gridAutoFlowColumn"> | 47 <div class="grid gridAutoFlowColumnDense"> |
| 48 <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data-
offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height=
"100"></div> | 48 <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data-
offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height=
"100"></div> |
| 49 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" d
ata-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | 49 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" d
ata-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
| 50 </div> | 50 </div> |
| 51 </div> | 51 </div> |
| 52 | 52 |
| 53 <!-- Step 4.2, both minor and major-axis position are 'auto'. --> | 53 <!-- Step 4.2, both minor and major-axis position are 'auto'. --> |
| 54 <div style="position: relative"> | 54 <div style="position: relative"> |
| 55 <div class="grid gridAutoFlowColumn"> | 55 <div class="grid gridAutoFlowColumnDense"> |
| 56 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" da
ta-expected-width="50" data-expected-height="100"></div> | 56 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" da
ta-expected-width="50" data-expected-height="100"></div> |
| 57 <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-of
fset-y="0" data-expected-width="50" data-expected-height="50"></div> | 57 <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-of
fset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| 58 </div> | 58 </div> |
| 59 </div> | 59 </div> |
| 60 | 60 |
| 61 <div style="position: relative"> | 61 <div style="position: relative"> |
| 62 <div class="grid gridAutoFlowColumn"> | 62 <div class="grid gridAutoFlowColumnDense"> |
| 63 <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-of
fset-y="50" data-expected-width="50" data-expected-height="100"></div> | 63 <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-of
fset-y="50" data-expected-width="50" data-expected-height="100"></div> |
| 64 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" dat
a-expected-width="50" data-expected-height="50"></div> | 64 <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" dat
a-expected-width="50" data-expected-height="50"></div> |
| 65 </div> | 65 </div> |
| 66 </div> | 66 </div> |
| 67 | 67 |
| 68 </body> | 68 </body> |
| 69 </html> | 69 </html> |
| OLD | NEW |