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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.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/maximize-tracks-definite-indefinite-height-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-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/width-keyword-classes.css" rel ="stylesheet">
5
6 <style>
7 div.grid > div { font: 10px/1 Ahem; }
8
9 .max-width-35 { max-width: 35px; }
10 .min-width-35 { min-width: 35px; }
11 .min-width-50 { min-width: 50px; }
12 </style>
13
14 <script src="../../resources/check-layout.js"></script>
15
16 <body onload="checkLayout('.grid')">
17
18 <h2>Check the behavior of grids under max-content constraints.</h2>
19 <div class="max-content max-width-35">
20 <div class="grid" data-expected-width="35" data-expected-height="20">
21 <div data-expected-width="35" data-expected-height="20">XX X</div>
22 </div>
23 </div>
24
25 <div class="max-content max-width-min-content">
26 <div class="grid" data-expected-width="20" data-expected-height="20">
27 <div data-expected-width="20" data-expected-height="20">XX X</div>
28 </div>
29 </div>
30
31 <div class="max-content">
32 <div class="grid max-width-35" data-expected-width="35" data-expected-height ="20">
33 <div data-expected-width="35" data-expected-height="20">XX X</div>
34 </div>
35 </div>
36
37 <div class="max-content">
38 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20">
39 <div data-expected-width="20" data-expected-height="20">XX X</div>
40 </div>
41 </div>
42
43 <div class="max-content">
44 <div class="grid" data-expected-width="40" data-expected-height="10">
45 <div data-expected-width="40" data-expected-height="10">XX X</div>
46 </div>
47 </div>
48
49 <div class="max-content">
50 <div class="grid max-width-fill-available" data-expected-width="40" data-exp ected-height="10">
51 <div data-expected-width="40" data-expected-height="10">XX X</div>
52 </div>
53 </div>
54
55 <div class="max-content max-width-fill-available">
56 <div class="grid" data-expected-width="40" data-expected-height="10">
57 <div data-expected-width="40" data-expected-height="10">XX X</div>
58 </div>
59 </div>
60
61 <div class="grid max-content max-width-35" data-expected-width="35" data-expecte d-height="20">
62 <div data-expected-width="35" data-expected-height="20">XX X</div>
63 </div>
64
65 <div class="grid max-content max-width-min-content" data-expected-width="20" dat a-expected-height="20">
66 <div data-expected-width="20" data-expected-height="20">XX X</div>
67 </div>
68
69 <div class="grid max-content" data-expected-width="40" data-expected-height="10" >
70 <div data-expected-width="40" data-expected-height="10">XX X</div>
71 </div>
72
73 <br>
74 <h2>Check the behavior of grids under min-content contstraints.</h2>
75 <div class="min-content min-width-50">
76 <div class="grid" data-expected-width="50" data-expected-height="10">
77 <div data-expected-width="40" data-expected-height="10">XX X</div>
78 </div>
79 <div class="grid min-content" data-expected-width="20" data-expected-height= "20">
80 <div data-expected-width="20" data-expected-height="20">XX X</div>
81 </div>
82 <div class="grid min-content min-width-35" data-expected-width="35" data-exp ected-height="20">
83 <div data-expected-width="35" data-expected-height="20">XX X</div>
84 </div>
85 <div class="grid min-content min-width-fit-content" data-expected-width="40" data-expected-height="10">
86 <div data-expected-width="40" data-expected-height="10">XX X</div>
87 </div>
88 </div>
89
90 <div style="width: 200px;">
91 <div class="grid min-content min-width-fill-available" data-expected-width=" 200" data-expected-height="10">
92 <div data-expected-width="40" data-expected-height="10">XX X</div>
93 </div>
94 </div>
95
96 <div class="grid min-content" data-expected-width="20" data-expected-height="20" >
97 <div data-expected-width="20" data-expected-height="20">XX X</div>
98 </div>
99
100 <div class="grid min-content min-width-min-content" data-expected-width="20" dat a-expected-height="20">
101 <div data-expected-width="20" data-expected-height="20">XX X</div>
102 </div>
103
104 <div class="grid min-content min-width-35" data-expected-width="35" data-expecte d-height="20">
105 <div data-expected-width="35" data-expected-height="20">XX X</div>
106 </div>
107
108 <div class="grid min-content min-width-max-content" data-expected-width="40" dat a-expected-height="10">
109 <div data-expected-width="40" data-expected-height="10">XX X</div>
110 </div>
111
112 <div class="grid min-content min-width-50" data-expected-width="50" data-expecte d-height="10">
113 <div data-expected-width="40" data-expected-height="10">XX X</div>
114 </div>
115
116 <br>
117 <h2>Check the behavior of grids with definite available space.</h2>
118 <div style="width: 100px;">
119 <div class="grid" data-expected-width="100" data-expected-height="10">
120 <div data-expected-width="40" data-expected-height="10">XX X</div>
121 </div>
122 </div>
123
124 <div class="max-width-35" style="width: 100px;">
125 <div class="grid" data-expected-width="35" data-expected-height="20">
126 <div data-expected-width="35" data-expected-height="20">XX X</div>
127 </div>
128 </div>
129
130 <div style="width: 100px;">
131 <div class="grid max-width-35" data-expected-width="35" data-expected-height ="20">
132 <div data-expected-width="35" data-expected-height="20">XX X</div>
133 </div>
134 </div>
135
136 <div class="grid" style="width: 90px;" data-expected-width="90" data-expected-he ight="10">
137 <div data-expected-width="40" data-expected-height="10">XX X</div>
138 </div>
139
140 <div class="grid min-width-50" style="width: 10px;" data-expected-width="50" dat a-expected-height="10">
141 <div data-expected-width="40" data-expected-height="10">XX X</div>
142 </div>
143
144 <div class="min-width-50" style="width: 20px;">
145 <div class="grid" data-expected-width="50" data-expected-height="10">
146 <div data-expected-width="40" data-expected-height="10">XX X</div>
147 </div>
148 </div>
149
150 <div style="width: 100px;">
151 <div class="grid" style="width: 37%;" data-expected-width="37" data-expected -height="20">
152 <div data-expected-width="37" data-expected-height="20">XX X</div>
153 </div>
154 <div class="grid min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
155 <div data-expected-width="40" data-expected-height="10">XX X</div>
156 </div>
157 <div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20">
158 <div data-expected-width="37" data-expected-height="20">XX X</div>
159 </div>
160 </div>
161
162 <br>
163 <h2>Check the behavior of grids with indefinite available space.</h2>
164 <div class="fit-content">
165 <div class="grid" data-expected-width="40" data-expected-height="10">
166 <div data-expected-width="40" data-expected-height="10">XX X</div>
167 </div>
168 <div class="grid min-width-35" data-expected-width="40" data-expected-height ="10">
169 <div data-expected-width="40" data-expected-height="10">XX X</div>
170 </div>
171 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20">
172 <div data-expected-width="20" data-expected-height="20">XX X</div>
173 </div>
174 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10">
175 <div data-expected-width="40" data-expected-height="10">XX X</div>
176 </div>
177 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="10">
178 <div data-expected-width="40" data-expected-height="10">XX X</div>
179 </div>
180 </div>
181
182 <div class="fit-content min-width-50">
183 <div class="grid" data-expected-width="50" data-expected-height="10">
184 <div data-expected-width="40" data-expected-height="10">XX X</div>
185 </div>
186 <div class="grid min-width-35" data-expected-width="50" data-expected-height ="10">
187 <div data-expected-width="40" data-expected-height="10">XX X</div>
188 </div>
189 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20">
190 <div data-expected-width="20" data-expected-height="20">XX X</div>
191 </div>
192 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10">
193 <div data-expected-width="40" data-expected-height="10">XX X</div>
194 </div>
195 <div class="grid fill-available" data-expected-width="50" data-expected-heig ht="10">
196 <div data-expected-width="40" data-expected-height="10">XX X</div>
197 </div>
198 </div>
199
200 <div style="width: 25px;">
201 <div class="grid fit-content" data-expected-width="25" data-expected-height= "20">
202 <div data-expected-width="25" data-expected-height="20">XX X</div>
203 </div>
204 <div class="grid fill-available" data-expected-width="25" data-expected-heig ht="20">
205 <div data-expected-width="25" data-expected-height="20">XX X</div>
206 </div>
207 <div class="grid fit-content min-width-35" data-expected-width="35" data-exp ected-height="20">
208 <div data-expected-width="35" data-expected-height="20">XX X</div>
209 </div>
210 <div class="grid fit-content max-width-min-content" data-expected-width="20" data-expected-height="20">
211 <div data-expected-width="20" data-expected-height="20">XX X</div>
212 </div>
213 </div>
214
215
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698