[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-container-percentage-columns.html
1 <!DOCTYPE html>
2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .wrapper {
6     position: relative;
7     clear: both;
8 }
9
10 .grid {
11     font: 10px/1 Ahem;
12 }
13
14 .float {
15     float: left;
16 }
17
18 .abspos {
19     position: absolute;
20 }
21
22 .fixedSize {
23     width: 200px;
24     height: 200px;
25 }
26
27 .oneColumn100 {
28     grid-template-columns: 100%;
29 }
30
31 .oneColumn50 {
32     grid-template-columns: 50%;
33 }
34
35 .twoColumns {
36     grid-template-columns: 50% 100px;
37 }
38 </style>
39 <script src="../../resources/testharness.js"></script>
40 <script src="../../resources/testharnessreport.js"></script>
41 <script src="../../resources/check-layout-th.js"></script>
42 <body onload="checkLayout('.grid')">
43 <div id="log"></div>
44
45 <p>This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.</p>
46
47 <div class="wrapper">
48     <div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10">
49         <div class="firstRowFirstColumn"
50             data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
51             XX X
52         </div>
53     </div>
54 </div>
55
56 <div class="wrapper">
57     <div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10">
58         <div class="firstRowFirstColumn"
59             data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
60             XX X
61         </div>
62     </div>
63 </div>
64
65 <div class="wrapper">
66     <div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10">
67         <div class="firstRowFirstColumn"
68             data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
69             XX X
70         </div>
71     </div>
72 </div>
73
74 <div class="wrapper">
75     <div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10">
76         <div class="firstRowFirstColumn"
77             data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
78             XX X
79         </div>
80     </div>
81 </div>
82
83 <div class="wrapper">
84     <div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20">
85         <div class="firstRowFirstColumn"
86             data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
87             XX X
88         </div>
89     </div>
90 </div>
91
92 <div class="wrapper">
93     <div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20">
94         <div class="firstRowFirstColumn"
95             data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
96             XX X
97         </div>
98     </div>
99 </div>
100
101 <div class="wrapper">
102     <div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20">
103         <div class="firstRowFirstColumn"
104             data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
105             XX X
106         </div>
107     </div>
108 </div>
109
110 <div class="wrapper">
111     <div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20">
112         <div class="firstRowFirstColumn"
113             data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
114             XX X
115         </div>
116     </div>
117 </div>
118
119 <div class="wrapper">
120     <div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20">
121         <div class="firstRowFirstColumn"
122             data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
123             XX X
124         </div>
125     </div>
126 </div>
127
128 <div class="wrapper">
129     <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
130         <div class="firstRowFirstColumn"
131             data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
132             XX X
133         </div>
134     </div>
135 </div>
136
137 <div class="wrapper">
138     <div class="grid float twoColumns" data-expected-width="140" data-expected-height="10">
139         <div class="firstRowFirstColumn"
140             data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
141             XX X
142         </div>
143         <div class="firstRowSecondColumn"
144             data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
145         </div>
146     </div>
147 </div>
148
149 <div class="wrapper">
150     <div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10">
151         <div class="firstRowFirstColumn"
152             data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
153             XX X
154         </div>
155         <div class="firstRowSecondColumn"
156             data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
157         </div>
158     </div>
159 </div>
160
161 <div class="wrapper">
162     <div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10">
163         <div class="firstRowFirstColumn"
164             data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
165             XX X
166         </div>
167         <div class="firstRowSecondColumn"
168             data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
169         </div>
170     </div>
171 </div>
172
173 <div class="wrapper">
174     <div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10">
175         <div class="firstRowFirstColumn"
176             data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
177             XX X
178         </div>
179         <div class="firstRowSecondColumn"
180             data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
181         </div>
182     </div>
183 </div>
184
185 <div class="wrapper">
186     <div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10">
187         <div class="firstRowFirstColumn"
188             data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10">
189             XX X
190         </div>
191         <div class="firstRowSecondColumn"
192             data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">
193         </div>
194     </div>
195 </div>
196
197 <div class="wrapper">
198     <div class="grid float twoColumns" data-expected-width="100" data-expected-height="10">
199         <div class="firstRowFirstColumn"
200             data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
201         </div>
202         <div class="firstRowSecondColumn"
203             data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
204             XX X
205         </div>
206     </div>
207 </div>
208
209 <div class="wrapper">
210     <div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10">
211         <div class="firstRowFirstColumn"
212             data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
213         </div>
214         <div class="firstRowSecondColumn"
215             data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
216             XX X
217         </div>
218     </div>
219 </div>
220
221 <div class="wrapper">
222     <div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10">
223         <div class="firstRowFirstColumn"
224             data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
225         </div>
226         <div class="firstRowSecondColumn"
227             data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
228             XX X
229         </div>
230     </div>
231 </div>
232
233 <div class="wrapper">
234     <div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10">
235         <div class="firstRowFirstColumn"
236             data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
237         </div>
238         <div class="firstRowSecondColumn"
239             data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
240             XX X
241         </div>
242     </div>
243 </div>
244
245 <div class="wrapper">
246     <div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10">
247         <div class="firstRowFirstColumn"
248             data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
249         </div>
250         <div class="firstRowSecondColumn"
251             data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
252             XX X
253         </div>
254     </div>
255 </div>
256
257 </body>