Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css-grid-layout / grid-preferred-logical-widths.html
blobf25408033cfcee0b19872c256028cf21f29b2de2
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel=stylesheet>
5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
6 <style>
8 .grid {
9 font: 10px/1 Ahem;
12 .gridMinContentFixed {
13 grid-template-columns: minmax(min-content, 40px) minmax(min-content, 40px);
14 grid-template-rows: 10px;
17 .gridFixedMinContent {
18 grid-template-columns: minmax(30px, min-content) minmax(30px, min-content);
19 grid-template-rows: 10px;
22 .gridFixedMaxContent {
23 grid-template-columns: minmax(40px, max-content) minmax(40px, max-content);
24 grid-template-rows: 10px;
27 .gridFixedFixed {
28 grid-template-columns: minmax(30px, 40px) minmax(30px, 40px);
29 grid-template-rows: 10px;
32 .gridAutoContent {
33 grid-template-columns: auto auto;
34 grid-template-rows: 10px;
37 .gridFixedFraction {
38 grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
39 grid-template-rows: 10px;
42 .margins {
43 margin: 10px 20px 30px 40px;
46 .dummyContainer { }
48 .minWidth70 {
49 min-width: 70px;
52 .maxWidth20 {
53 max-width: 20px;
56 </style>
57 </head>
58 <script src="../../resources/check-layout.js"></script>
59 <body onload="checkLayout('.dummyContainer')">
60 <body>
61 <p>This test checks that the grid element's preferred logical widths are properly computed with different combinations of minmax().</p>
62 <div class="dummyContainer">
63 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40">
64 <div class="firstRowFirstColumn">XX XX XX</div>
65 <div class="firstRowSecondColumn">XX XX XX</div>
66 </div>
67 </div>
69 <div class="dummyContainer">
70 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80">
71 <div class="firstRowFirstColumn">XX XX XX</div>
72 <div class="firstRowSecondColumn">XX XX XX</div>
73 </div>
74 </div>
76 <div class="dummyContainer">
77 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
78 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
79 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
80 </div>
81 </div>
83 <div class="dummyContainer">
84 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100">
85 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
86 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
87 </div>
88 </div>
90 <div class="dummyContainer">
91 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
92 <div class="firstRowFirstColumn">XX XX XX</div>
93 <div class="firstRowSecondColumn">XX XX XX</div>
94 </div>
95 </div>
97 <div class="dummyContainer">
98 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160">
99 <div class="firstRowFirstColumn">XX XX XX</div>
100 <div class="firstRowSecondColumn">XX XX XX</div>
101 </div>
102 </div>
104 <div class="dummyContainer">
105 <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
106 </div>
108 <div class="dummyContainer">
109 <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
110 </div>
112 <div class="dummyContainer">
113 <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="40">
114 <div class="firstRowFirstColumn">XX XX XX</div>
115 <div class="firstRowSecondColumn">XX XX XX</div>
116 </div>
117 </div>
119 <div class="dummyContainer">
120 <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="160">
121 <div class="firstRowFirstColumn">XX XX XX</div>
122 <div class="firstRowSecondColumn">XX XX XX</div>
123 </div>
124 </div>
126 <div class="dummyContainer">
127 <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
128 </div>
130 <div class="dummyContainer">
131 <div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
132 </div>
133 <!-- Now with margin on one of the grid items. -->
134 <div class="dummyContainer">
135 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100">
136 <div class="firstRowFirstColumn">XX XX XX</div>
137 <div class="firstRowSecondColumn margins">XX XX XX</div>
138 </div>
139 </div>
141 <div class="dummyContainer">
142 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120">
143 <div class="firstRowFirstColumn margins">XX XX XX</div>
144 <div class="firstRowSecondColumn">XX XX XX</div>
145 </div>
146 </div>
148 <div class="dummyContainer">
149 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
150 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
151 <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
152 </div>
153 </div>
155 <div class="dummyContainer">
156 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160">
157 <div class="firstRowFirstColumn margins">XXXXX XXXXX</div>
158 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
159 </div>
160 </div>
162 <div class="dummyContainer">
163 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
164 <div class="firstRowFirstColumn">XX XX XX</div>
165 <div class="firstRowSecondColumn margins">XX XX XX</div>
166 </div>
167 </div>
169 <div class="dummyContainer">
170 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220">
171 <div class="firstRowFirstColumn margins">XX XX XX</div>
172 <div class="firstRowSecondColumn">XX XX XX</div>
173 </div>
174 </div>
176 <!-- Spanning cells -->
177 <div class="dummyContainer">
178 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20">
179 <div class="firstRowBothColumn">XX XX XX</div>
180 </div>
181 </div>
183 <div class="dummyContainer">
184 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80">
185 <div class="firstRowBothColumn">XXXXX XXXXX</div>
186 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
187 </div>
188 </div>
190 <div class="dummyContainer">
191 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80">
192 <div class="firstRowBothColumn">XX XX XX</div>
193 <div class="firstRowBothColumn">XX XX XX</div>
194 </div>
195 </div>
197 <div class="dummyContainer">
198 <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="20">
199 <div class="firstRowFirstColumn">XX XX XX</div>
200 <div class="firstRowBothColumn">XX XX XX</div>
201 </div>
202 </div>
204 <div class="dummyContainer">
205 <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="80">
206 <div class="firstRowBothColumn">XX XX XX</div>
207 <div class="firstRowSecondColumn">XX XX XX</div>
208 </div>
209 </div>
211 <!-- Grids under min-width / max-width constraints -->
212 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
213 <div class="grid gridMinContentFixed minWidth70" data-expected-height="10" data-expected-width="70">
214 <div class="firstRowFirstColumn">XX XX XX</div>
215 <div class="firstRowSecondColumn">XX XX XX</div>
216 </div>
217 </div>
219 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
220 <div class="grid gridMinContentFixed maxWidth20" data-expected-height="10" data-expected-width="20">
221 <div class="firstRowFirstColumn">XX XX XX</div>
222 <div class="firstRowSecondColumn">XX XX XX</div>
223 </div>
224 </div>
226 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
227 <div class="grid gridFixedMinContent minWidth70" data-expected-height="10" data-expected-width="70">
228 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
229 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
230 </div>
231 </div>
233 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
234 <div class="grid gridFixedMinContent maxWidth20" data-expected-height="10" data-expected-width="20">
235 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
236 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
237 </div>
238 </div>
240 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="80">
241 <div class="grid gridFixedMaxContent minWidth70" data-expected-height="10" data-expected-width="80">
242 <div class="firstRowFirstColumn">XX XX XX</div>
243 <div class="firstRowSecondColumn">XX XX XX</div>
244 </div>
245 </div>
247 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
248 <div class="grid gridFixedMaxContent maxWidth20" data-expected-height="10" data-expected-width="20">
249 <div class="firstRowFirstColumn">XX XX XX</div>
250 <div class="firstRowSecondColumn">XX XX XX</div>
251 </div>
252 </div>
254 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
255 <div class="grid gridFixedFixed minWidth70" data-expected-height="10" data-expected-width="70"></div>
256 </div>
258 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
259 <div class="grid gridFixedFixed maxWidth20" data-expected-height="10" data-expected-width="20"></div>
260 </div>
262 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
263 <div class="grid gridAutoContent minWidth70" data-expected-height="10" data-expected-width="70">
264 <div class="firstRowFirstColumn">XX XX XX</div>
265 <div class="firstRowSecondColumn">XX XX XX</div>
266 </div>
267 </div>
269 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
270 <div class="grid gridAutoContent maxWidth20" data-expected-height="10" data-expected-width="20">
271 <div class="firstRowFirstColumn">XX XX XX</div>
272 <div class="firstRowSecondColumn">XX XX XX</div>
273 </div>
274 </div>
276 <div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
277 <div class="grid gridFixedFraction minWidth70" data-expected-height="10" data-expected-width="70"></div>
278 </div>
280 <div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
281 <div class="grid gridFixedFraction maxWidth20" data-expected-height="10" data-expected-width="20"></div>
282 </div>
284 </body>
285 </html>