Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css-grid-layout / grid-automatic-minimum-for-auto-rows.html
blobbea9c618e136bcb077c9d848eafa812ff08fdcbe
1 <html>
2 <link href="resources/grid.css" rel="stylesheet"/>
3 <style>
4 .grid { font: 10px/1 Ahem; }
6 .minHeight10 { min-height: 10px; }
7 .minHeight20 { min-height: 20px; }
8 .minHeight30 { min-height: 30px; }
9 .minHeight40 { min-height: 40px; }
10 .minHeight50 { min-height: 50px; }
11 .minHeight60 { min-height: 60px; }
12 .minHeight70 { min-height: 70px; }
13 .minHeight90 { min-height: 90px; }
14 .minHeightMaxContent { min-height: -webkit-max-content; }
16 .height30 { height: 30px; }
17 .height50 { height: 50px; }
18 .height60 { height: 60px; }
20 .border5 { border: 5px solid #abc; }
21 .padding8 { padding: 8px 0px; }
23 /* All these 4 cases are equivalent. We use them interchangeably. */
24 .gridAuto { grid-template-rows: auto; }
25 .gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
26 .gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); }
27 .gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); }
29 /* All these 3 cases are equivalent. We use them interchangeably. */
30 .gridAutoAndAuto { grid-template-rows: auto auto; }
31 .gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
32 .gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
34 </style>
35 <script src="../../resources/js-test.js"></script>
36 <body>
38 <div class="grid gridAuto constrainedContainer" id="gridAuto">
39 <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
40 </div>
42 <div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
43 <div class="firstRowFirstColumn minHeight40">XX</div>
44 </div>
46 <div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
47 <div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
48 </div>
50 <div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
51 <div class="firstRowFirstColumn minHeight20 height30"></div>
52 </div>
54 <div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
55 <div class="firstRowFirstColumn minHeight60">X</div>
56 </div>
58 <div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems">
59 <div class="firstRowFirstColumn minHeight60">X<br>X</div>
60 <div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div>
61 <div class="firstRowAutoColumn minConstrainedContainer height50"></div>
62 </div>
64 <div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight">
65 <div class="firstRowFirstColumn height30">X<br>X</div>
66 <div class="firstRowSecondColumn minHeight50"></div>
67 <div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div>
68 </div>
70 <div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight">
71 <div class="firstRowFirstColumn minHeight30">X<br>X</div>
72 <div class="firstRowSecondColumn height60">XX</div>
73 <div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div>
74 </div>
76 <div class="constrainedContainer">
77 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
78 <div class="firstRowFirstColumn">XX XX</div>
79 <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
80 </div>
81 </div>
83 <div class="constrainedContainer">
84 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
85 <div class="bothRowSecondColumn minHeight60">XX XX XX</div>
86 <div class="firstRowFirstColumn">X X X X</div>
87 <div class="firstRowFirstColumn">XX XX</div>
88 </div>
89 </div>
91 <div class="constrainedContainer">
92 <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
93 <div class="secondRowFirstColumn">X XXX XX</div>
94 <div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
95 </div>
96 </div>
98 <div class="constrainedContainer">
99 <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
100 <div class="bothRowSecondColumn minHeight70">XX XX XX</div>
101 <div class="bothRowFirstColumn">XXXXX X XXXXX</div>
102 </div>
103 </div>
105 <div class="constrainedContainer">
106 <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
107 <div class="secondRowFirstColumn minHeight60">X XXX XX</div>
108 <div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div>
109 <div class="firstRowFirstColumn">XX XX</div>
110 </div>
111 </div>
113 <div class="constrainedContainer">
114 <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
115 <div class="bothRowSecondColumn">XX XX XX XX</div>
116 <div class="firstRowFirstColumn minHeight40">XXX</div>
117 <div class="bothRowFirstColumn minHeight90">X XX XXX</div>
118 <div class="secondRowFirstColumn">X XX X</div>
119 </div>
120 </div>
122 <div class="constrainedContainer">
123 <div class="grid gridAuto" id="gridAutoWithFixedHeightChild">
124 <div class="firstRowFirstColumn height60">XXX X</div>
125 </div>
126 </div>
128 <div class="constrainedContainer">
129 <div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
130 <div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
131 </div>
132 </div>
134 <div class="constrainedContainer">
135 <div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
136 <div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
137 </div>
138 </div>
140 <div class="constrainedContainer">
141 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
142 <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
143 </div>
144 </div>
146 <div class="constrainedContainer">
147 <div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
148 <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
149 </div>
150 </div>
152 <div class="constrainedContainer">
153 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
154 <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
155 </div>
156 </div>
158 <div class="constrainedContainer">
159 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
160 <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
161 </div>
162 </div>
164 <div class="constrainedContainer">
165 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
166 <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
167 </div>
168 </div>
170 <div class="constrainedContainer">
171 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
172 <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
173 </div>
174 </div>
176 <div class="constrainedContainer">
177 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
178 <div class="firstRowFirstColumn border5">XX<br>XXX X</div>
179 </div>
180 </div>
182 <div class="constrainedContainer">
183 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
184 <div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
185 </div>
186 </div>
188 <div class="constrainedContainer">
189 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
190 <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
191 </div>
192 </div>
194 <div class="constrainedContainer">
195 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
196 <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
197 </div>
198 </div>
200 <div class="constrainedContainer">
201 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
202 <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
203 </div>
204 </div>
206 <div class="constrainedContainer">
207 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding">
208 <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div>
209 </div>
210 </div>
212 <script>
213 function testGridRowsValues(id, computedRowValue)
215 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-rows')", computedRowValue);
218 debug("");
219 debug("Check that min-height is honored when sizing auto rows.");
220 testGridRowsValues("gridAuto", "40px");
221 testGridRowsValues("gridAutoItemSmallerThanMinSize", "40px");
222 testGridRowsValues("gridMinMaxAutoAuto", "40px");
223 testGridRowsValues("gridMinMaxAutoMaxContent", "20px");
224 testGridRowsValues("gridMinMaxMinContentAuto", "60px");
225 testGridRowsValues("gridAutoMultipleItems", "60px");
226 testGridRowsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight", "50px");
227 testGridRowsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight", "60px");
229 debug("");
230 debug("Check that min-height is honored when sizing auto rows and spanning grid items.");
231 testGridRowsValues("gridAutoAndAutoOneSpanningOneNonSpannig", "10px 40px");
232 testGridRowsValues("gridAutoAndAutoOneSpanningMultipleNonSpanning", "40px 20px");
233 testGridRowsValues("gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning", "40px 30px");
234 testGridRowsValues("gridAutoAndMinMaxAutoAutoMultipleSpanning", "35px 35px");
235 testGridRowsValues("gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning", "25px 65px");
236 testGridRowsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning", "50px 40px");
238 debug("");
239 debug("Check the interactions between height and min-height and auto tracks.");
240 testGridRowsValues("gridAutoWithFixedHeightChild", "60px");
241 testGridRowsValues("gridAutoWithFixedHeightChildAndMinHeight", "40px");
242 testGridRowsValues("gridAutoWithFixedHeightChildAndHigherMinHeight", "90px");
243 testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeight", "25px 25px");
244 testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndMinHeight", "25px 25px");
245 testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight", "35px 35px");
247 debug("");
248 debug("Check that borders and paddings are considering when computing min sizes.");
249 testGridRowsValues("gridAutoFixedMinHeightWithBorder", "50px");
250 testGridRowsValues("gridAutoFixedMinHeightWithPadding", "56px");
251 testGridRowsValues("gridAutoFixedMinHeightWithBorderAndPadding", "66px");
252 testGridRowsValues("gridAutoAutoMinHeightWithBorder", "40px");
253 testGridRowsValues("gridAutoAutoMinHeightWithPadding", "46px");
254 testGridRowsValues("gridAutoAutoMinHeightWithBorderAndPadding", "56px");
255 testGridRowsValues("gridAutoMaxContentMinHeightWithBorder", "30px");
256 testGridRowsValues("gridAutoMaxContentMinHeightWithPadding", "36px");
257 testGridRowsValues("gridAutoMaxContentMinHeightWithBorderAndPadding", "46px");
259 </script>
260 </body>
261 </html>