[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / flex-content-resolution-rows.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <style>
9 .gridMinFlexContent {
10     -webkit-grid-template-columns: 50px;
11     -webkit-grid-template-rows: minmax(1fr, 50px);
12 }
13 .gridMaxFlexContent {
14     -webkit-grid-template-columns: 50px;
15     -webkit-grid-template-rows: minmax(30px, 2fr);
16 }
17 .gridTwoMaxFlexContent {
18     -webkit-grid-template-columns: 50px;
19     -webkit-grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
20 }
21 .gridTwoDoubleMaxFlexContent {
22     -webkit-grid-template-columns: 50px;
23     -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
24 }
25 </style>
26 <script src="../../resources/check-layout.js"></script>
27 <body onload="checkLayout('.grid');">
28
29 <p>Test that resolving auto tracks on grid items works properly.</p>
30
31 <div style="height: 0px">
32     <div class="grid gridMinFlexContent" style="height: 100%">
33         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
34     </div>
35 </div>
36
37 <div style="height: 0px">
38     <div class="grid gridMinFlexContent">
39         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
40     </div>
41 </div>
42
43 <!-- Allow the extra logical space distribution to occur. -->
44 <div style="width: 10px; height: 40px">
45     <div class="grid gridMinFlexContent" style="height: 100%">
46         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
47     </div>
48 </div>
49
50 <div style="width: 10px; height: 40px">
51     <div class="grid gridMinFlexContent">
52         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
53     </div>
54 </div>
55
56 <div style="width: 10px; height: 100px;">
57     <div class="grid gridMinFlexContent">
58         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
59     </div>
60 </div>
61
62
63 <div class="constrainedContainer">
64     <div class="grid gridMaxFlexContent">
65         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
66     </div>
67 </div>
68
69 <!-- Allow the extra logical space distribution to occur. -->
70 <div style="width: 10px; height: 40px">
71     <div class="grid gridMaxFlexContent" style="height: 100%;">
72         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
73     </div>
74 </div>
75
76 <div style="width: 10px; height: 40px">
77     <div class="grid gridMaxFlexContent">
78         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
79     </div>
80 </div>
81
82 <div style="width: 10px; height: 100px;">
83     <div class="grid gridMaxFlexContent" style="height: 100%;">
84         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
85     </div>
86 </div>
87
88 <div style="width: 10px; height: 100px;">
89     <div class="grid gridMaxFlexContent">
90         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
91     </div>
92 </div>
93
94 <div class="constrainedContainer">
95     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
96         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
97         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
98     </div>
99 </div>
100
101 <div class="constrainedContainer">
102     <div class="grid gridTwoMaxFlexContent">
103         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
104         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
105     </div>
106 </div>
107
108 <!-- Allow the extra logical space distribution to occur. -->
109 <div style="width: 10px; height: 60px">
110     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
111         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
112         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
113     </div>
114 </div>
115
116 <div style="width: 10px; height: 60px">
117     <div class="grid gridTwoMaxFlexContent">
118         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
119         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
120     </div>
121 </div>
122
123 <div style="width: 10px; height: 120px;">
124     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
125         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
126         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
127     </div>
128 </div>
129
130 <div style="width: 10px; height: 120px;">
131     <div class="grid gridTwoMaxFlexContent">
132         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
133         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
134     </div>
135 </div>
136
137 <div class="constrainedContainer">
138     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
139         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
140         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
141     </div>
142 </div>
143
144 <div class="constrainedContainer">
145     <div class="grid gridTwoDoubleMaxFlexContent">
146         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
147         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
148     </div>
149 </div>
150
151 <!-- Allow the extra logical space distribution to occur. -->
152 <div style="width: 10px; height: 60px">
153     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
154         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
155         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
156     </div>
157 </div>
158
159 <div style="width: 10px; height: 60px">
160     <div class="grid gridTwoDoubleMaxFlexContent">
161         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
162         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
163     </div>
164 </div>
165
166 <div style="width: 10px; height: 120px;">
167     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
168         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
169         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
170     </div>
171 </div>
172
173 <div style="width: 10px; height: 120px;">
174     <div class="grid gridTwoDoubleMaxFlexContent">
175         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
176         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
177     </div>
178 </div>
179
180 </body>
181 </html>