2 <link href=
"resources/grid.css" rel=
"stylesheet"/>
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; }
35 <script src=
"../../resources/js-test.js"></script>
38 <div class=
"grid gridAuto constrainedContainer" id=
"gridAuto">
39 <div class=
"firstRowFirstColumn minHeight40">XX
<br>XXX
<br>XX
<br>XXX
<br>XXXX
</div>
42 <div class=
"grid gridAuto constrainedContainer" id=
"gridAutoItemSmallerThanMinSize">
43 <div class=
"firstRowFirstColumn minHeight40">XX
</div>
46 <div class=
"grid gridMinMaxAutoAuto constrainedContainer" id=
"gridMinMaxAutoAuto">
47 <div class=
"firstRowFirstColumn minHeight40">XX
<br>XX
</div>
50 <div class=
"grid gridMinMaxAutoMaxContent constrainedContainer" id=
"gridMinMaxAutoMaxContent">
51 <div class=
"firstRowFirstColumn minHeight20 height30"></div>
54 <div class=
"grid gridMinMaxMinContentAuto constrainedContainer" id=
"gridMinMaxMinContentAuto">
55 <div class=
"firstRowFirstColumn minHeight60">X
</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>
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>
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>
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>
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>
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>
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>
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>
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>
122 <div class="constrainedContainer
">
123 <div class="grid gridAuto
" id="gridAutoWithFixedHeightChild
">
124 <div class="firstRowFirstColumn height60
">XXX X</div>
128 <div class="constrainedContainer
">
129 <div class="grid gridAuto height30
" id="gridAutoWithFixedHeightChildAndMinHeight
">
130 <div class="firstRowFirstColumn height60 minHeight40
">XXX X</div>
134 <div class="constrainedContainer
">
135 <div class="grid gridAuto
" id="gridAutoWithFixedHeightChildAndHigherMinHeight
">
136 <div class="firstRowFirstColumn height60 minHeight90
">XXX X</div>
140 <div class="constrainedContainer
">
141 <div class="grid gridAutoAndAuto
" id="gridAutoAndAutoOneSpanningFixedHeight
">
142 <div class="bothRowFirstColumn height50
">XX XXX XX XXX XX XXX</div>
146 <div class="constrainedContainer
">
147 <div class="grid gridAutoAndAuto height30
" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight
">
148 <div class="bothRowFirstColumn height60 minHeight50
">XX XXX XX</div>
152 <div class="constrainedContainer
">
153 <div class="grid gridAutoAndAuto
" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight
">
154 <div class="bothRowFirstColumn height60 minHeight70
">XX XXX XX X XX</div>
158 <div class="constrainedContainer
">
159 <div class="grid gridAuto
" id="gridAutoFixedMinHeightWithBorder
">
160 <div class="firstRowFirstColumn minHeight40 border5
">XXXXXX</div>
164 <div class="constrainedContainer
">
165 <div class="grid gridAuto
" id="gridAutoFixedMinHeightWithPadding
">
166 <div class="firstRowFirstColumn minHeight40 padding8
">XXXXXX</div>
170 <div class="constrainedContainer
">
171 <div class="grid gridAuto
" id="gridAutoFixedMinHeightWithBorderAndPadding
">
172 <div class="firstRowFirstColumn minHeight40 border5 padding8
">XXXXXX</div>
176 <div class="constrainedContainer
">
177 <div class="grid gridAuto
" id="gridAutoAutoMinHeightWithBorder
">
178 <div class="firstRowFirstColumn border5
">XX<br>XXX X</div>
182 <div class="constrainedContainer
">
183 <div class="grid gridAuto
" id="gridAutoAutoMinHeightWithPadding
">
184 <div class="firstRowFirstColumn padding8
">XX<br>XXX X</div>
188 <div class="constrainedContainer
">
189 <div class="grid gridAuto
" id="gridAutoAutoMinHeightWithBorderAndPadding
">
190 <div class="firstRowFirstColumn border5 padding8
">XX<br>XXX X</div>
194 <div class="constrainedContainer
">
195 <div class="grid gridAuto
" id="gridAutoMaxContentMinHeightWithBorder
">
196 <div class="firstRowFirstColumn minHeightMaxContent border5
">XXX X</div>
200 <div class="constrainedContainer
">
201 <div class="grid gridAuto
" id="gridAutoMaxContentMinHeightWithPadding
">
202 <div class="firstRowFirstColumn minHeightMaxContent padding8
">XXX X</div>
206 <div class="constrainedContainer
">
207 <div class="grid gridAuto
" id="gridAutoMaxContentMinHeightWithBorderAndPadding
">
208 <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent
">XXX X</div>
213 function testGridRowsValues(id, computedRowValue)
215 shouldBeEqualToString("window
.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-rows')", computedRowValue);
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
");
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
");
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
");
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
");