Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(285)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html

Issue 1317643005: [css-grid] Fix track sizing algo w/ size restrictions and intrinsic sizes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing. Removed unused params Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
5
6 <style>
7 .grid {
8 grid-template-rows: minmax(0px, 100px);
9 width: 40px;
10
11 align-items: start;
12 justify-items: start;
13 }
14
15 .max-height-35 { max-height: 35px; }
16 .max-height-50 { max-height: 50px; }
17 .min-height-35 { min-height: 35px; }
18 .min-height-50 { min-height: 50px; }
19 </style>
20
21 <script src="../../resources/check-layout.js"></script>
22
23 <body onload="checkLayout('.grid')">
24
25 <h2>Check the behavior of grids under max-content constraints.</h2>
26 <div class="max-content max-height-35">
27 <div class="grid" data-expected-width="40" data-expected-height="100">
28 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX XXX</div>
29 </div>
30 </div>
31
32 <div class="max-content max-height-min-content">
33 <div class="grid" data-expected-width="40" data-expected-height="100">
34 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX X</div>
35 </div>
36 </div>
37
38 <div class="max-height-min-content">
39 <div class="grid" data-expected-width="40" data-expected-height="100">
40 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>
41 </div>
42 </div>
43
44 <div class="max-content max-height-fill-available">
45 <div class="grid" data-expected-width="40" data-expected-height="100">
46 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXX X XXX</div>
47 </div>
48 </div>
49
50 <div class="max-content">
51 <div class="grid" data-expected-width="40" data-expected-height="100">
52 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XXX XX</div>
53 </div>
54 </div>
55
56 <div class="grid max-content max-height-35" data-expected-width="40" data-expect ed-height="35">
57 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XXX XX XXX</div>
58 </div>
59
60 <div class="grid max-content max-height-min-content" data-expected-width="40" da ta-expected-height="0">
61 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX X</div>
62 </div>
63
64 <div class="grid max-height-min-content" data-expected-width="40" data-expected- height="0">
65 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>
66 </div>
67
68 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">
69 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXX X XXX</div>
70 </div>
71
72 <div class="grid max-content" data-expected-width="40" data-expected-height="100 ">
73 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXX XX</div>
74 </div>
75
76 <br>
77 <h2>Check the behavior of grids under min-content contstraints.</h2>
78 <div class="min-content">
79 <div class="grid" data-expected-width="40" data-expected-height="100">
80 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XX XX</div>
81 </div>
82 </div>
83
84 <div class="min-content min-height-50">
85 <div class="grid" data-expected-width="40" data-expected-height="100">
86 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
87 </div>
88 </div>
89
90 <div class="min-content min-height-fit-content">
91 <div class="grid" data-expected-width="40" data-expected-height="100">
92 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XXXX</div>
93 </div>
94 </div>
95
96 <div style="height: 200px;">
97 <div class="min-content min-height-fill-available">
98 <div class="grid" data-expected-width="40" data-expected-height="100">
99 <div class="sizedToGridArea" data-expected-width="40" data-expected- height="100">XX XXXX XXXX XXX</div>
100 </div>
101 </div>
102 </div>
103
104 <div class="min-content min-height-min-content">
105 <div class="grid" data-expected-width="40" data-expected-height="100">
106 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>
107 </div>
108 </div>
109
110 <div class="min-content min-height-35">
111 <div class="grid" data-expected-width="40" data-expected-height="100">
112 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XX</div>
113 </div>
114 </div>
115
116 <div class="min-content min-height-max-content">
117 <div class="grid" data-expected-width="40" data-expected-height="100">
118 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXX X</div>
119 </div>
120 </div>
121
122 <div class="min-content min-height-50">
123 <div class="grid" data-expected-width="40" data-expected-height="100">
124 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XXXX XXXX XXXX</div>
125 </div>
126 </div>
127
128 <div class="min-content max-height-50">
129 <div class="grid" data-expected-width="40" data-expected-height="100">
130 <div class="sizedToGridArea min-height-fill-available" data-expected-wid th="40" data-expected-height="100">XXXX X X XXXX</div>
131 </div>
132 </div>
133
134 <div class="grid min-content" data-expected-width="40" data-expected-height="0">
135 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XX XX</div>
136 </div>
137
138 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">
139 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX X</div>
140 </div>
141
142 <div class="grid min-content min-height-fit-content" data-expected-width="40" da ta-expected-height="100">
143 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXXX</div>
144 </div>
145
146 <div style="height: 200px;">
147 <div class="grid min-content min-height-fill-available" data-expected-width= "40" data-expected-height="200">
148 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXXX XXXX XXX</div>
149 </div>
150 </div>
151
152 <div class="grid min-content min-height-min-content" data-expected-width="40" da ta-expected-height="0">
153 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>
154 </div>
155
156 <div class="grid min-content min-height-35" data-expected-width="40" data-expect ed-height="35">
157 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>
158 </div>
159
160 <div class="grid min-content min-height-max-content" data-expected-width="40" da ta-expected-height="100">
161 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">X XXX X</div>
162 </div>
163
164 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">
165 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XXXX XXXX XXXX XXXX</div>
166 </div>
167
168 <div class="grid min-content max-height-50" data-expected-width="40" data-expect ed-height="0">
169 <div class="sizedToGridArea min-height-fill-available" data-expected-width=" 40" data-expected-height="50">XXXX X X XXXX</div>
170 </div>
171
172 <br>
173 <h2>Check the behavior of grids with definite available space.</h2>
174 <div class="grid" style="height: 100px;" data-expected-width="40" data-expected- height="100">
175 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div>
176 </div>
177
178 <div class="grid max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
179 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>
180 </div>
181
182 <div class="grid min-height-50" style="height: 10px;" data-expected-width="40" d ata-expected-height="50">
183 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXXX</div>
184 </div>
185
186 <div class="grid min-height-50" style="height: 20px; data-expected-width="40" da ta-expected-height="50">
187 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXX XX XXX XX XXX</div>
188 </div>
189
190 <div style="height: 100px;">
191 <div class="grid" style="height: 37%;" data-expected-width="40" data-expecte d-height="37">
192 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">X X X X</div>
193 </div>
194 <div class="grid min-height-50" style="height: 37%;" data-expected-width="40 " data-expected-height="50">
195 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="50">XX XX XX</div>
196 </div>
197 <div class="grid min-height-35" style="height: 37%;" data-expected-width="40 " data-expected-height="37">
198 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">XXXX</div>
199 </div>
200 </div>
201
202 <br>
203 <h2>Check the behavior of grids with indefinite available space.</h2>
204 <div class="fit-content">
205 <div class="grid" data-expected-width="40" data-expected-height="100">
206 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>
207 </div>
208 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">
209 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXXX X</div>
210 </div>
211 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">
212 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX XX XX</div>
213 </div>
214 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">
215 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
216 </div>
217 </div>
218
219 <div class="fit-content" style="height: 125px;">
220 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="125">
221 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
222 </div>
223 </div>
224
225 <div class="fit-content min-height-50">
226 <div class="grid" data-expected-width="40" data-expected-height="100">
227 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XX X XXX</div>
228 </div>
229 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">
230 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX X X</div>
231 </div>
232 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">
233 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">X XXX XX</div>
234 </div>
235 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">
236 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX X</div>
237 </div>
238 </div>
239
240 <div class="fit-content min-height-50" style="height: 75px;">
241 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="75">
242 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="75">XX X</div>
243 </div>
244 </div>
245
246 <div style="height: 25px;">
247 <div class="grid fit-content" data-expected-width="40" data-expected-height= "25">
248 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div>
249 </div>
250 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="25">
251 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div>
252 </div>
253 <div class="grid fit-content min-height-35" data-expected-width="40" data-ex pected-height="35">
254 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="35">XX X</div>
255 </div>
256 <div class="grid fit-content max-height-min-content" data-expected-width="40 " data-expected-height="0">
257 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX X</div>
258 </div>
259 </div>
260
261 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698