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 |