[CSS Grid Layout] Support sparse in auto-placement algorithm
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-auto-placement-definite-span.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .grid {
6     -webkit-grid-auto-rows: 50px;
7     -webkit-grid-auto-columns: 100px;
8 }
9
10 .autoRowFirstColumnSpanning2 {
11     background-color: maroon;
12     -webkit-grid-column: 1 / span 2;
13     -webkit-grid-row: auto;
14 }
15
16 .autoRowSecondColumnSpanning2 {
17     background-color: olive;
18     -webkit-grid-column: 2 / span 2;
19     -webkit-grid-row: auto;
20 }
21
22 .autoRowFirstColumnSpanning3 {
23     background-color: teal;
24     -webkit-grid-column: 1 / span 3;
25     -webkit-grid-row: auto;
26 }
27
28 .firstRowSpanning2AutoColumn {
29     background-color: maroon;
30     -webkit-grid-column: auto;
31     -webkit-grid-row: 1 / span 2;
32     height: 100%;
33 }
34
35 .secondRowSpanning2AutoColumn {
36     background-color: olive;
37     -webkit-grid-column: auto;
38     -webkit-grid-row: 2 / span 2;
39     height: 100%;
40 }
41
42 .firstRowSpanning3AutoColumn {
43     background-color: teal;
44     -webkit-grid-column: auto;
45     -webkit-grid-row: 1 / span 3;
46     height: 100%;
47 }
48 </style>
49 <script src="../../resources/check-layout.js"></script>
50 <body onload="checkLayout('.grid');">
51
52 <p>Thist test checks that span is supported in auto-placement for definite positions.</p>
53
54 <div style="position: relative">
55     <div class="grid gridAutoFlowRow">
56         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
57         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
58         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
59         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
60     </div>
61 </div>
62
63 <div style="position: relative">
64     <div class="grid gridAutoFlowRowDense">
65         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
66         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
67         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
68         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
69         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
70     </div>
71 </div>
72
73 <div style="position: relative">
74     <div class="grid gridAutoFlowRow">
75         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
76         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
77         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
78         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
79         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
80     </div>
81 </div>
82
83 <div style="position: relative">
84     <div class="grid gridAutoFlowRowDense">
85         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
86         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
87         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
88         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
89         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
90     </div>
91 </div>
92
93 <div style="position: relative">
94     <div class="grid gridAutoFlowColumn">
95         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
96         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
97         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
98         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
99     </div>
100 </div>
101
102 <div style="position: relative">
103     <div class="grid gridAutoFlowColumnDense">
104         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
105         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
106         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
107         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
108         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
109     </div>
110 </div>
111
112 <div style="position: relative">
113     <div class="grid gridAutoFlowColumn">
114         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
115         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
116         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
117         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
118         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
119     </div>
120 </div>
121
122 <div style="position: relative">
123     <div class="grid gridAutoFlowColumnDense">
124         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
125         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
126         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
127         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
128         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
129     </div>
130 </div>
131
132 </body>
133 </html>