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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html

Issue 2832503003: [css-flex] Implement the space-evenly content-distribution value (Closed)
Patch Set: Fixed layout tests. Created 3 years, 7 months 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/css3/flexbox/flex-justify-content.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 .flexbox { 4 .flexbox {
5 display: flex; 5 display: flex;
6 background-color: #aaa; 6 background-color: #aaa;
7 position: relative; 7 position: relative;
8 flex-wrap: wrap; 8 flex-wrap: wrap;
9 } 9 }
10 10
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
99 <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> 99 <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
100 </div> 100 </div>
101 101
102 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between"> 102 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
103 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 103 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
104 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 104 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
105 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 105 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
106 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> 106 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
107 </div> 107 </div>
108 108
109 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
110 <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
111 <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
112 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
113 <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
114 </div>
115
109 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around"> 116 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
110 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> 117 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
111 <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> 118 <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
112 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 119 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
113 <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> 120 <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
114 </div> 121 </div>
115 122
116 <div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch"> 123 <div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
117 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> 124 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
118 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> 125 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
(...skipping 26 matching lines...) Expand all
145 </div> 152 </div>
146 153
147 <!-- If we overflow, we should true center. --> 154 <!-- If we overflow, we should true center. -->
148 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 155 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
149 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> 156 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
150 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> 157 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
151 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> 158 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
152 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> 159 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
153 </div> 160 </div>
154 161
162 <!-- If we overflow, we should true center. -->
163 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
164 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
165 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
166 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
167 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
168 </div>
169
155 <!-- Stretch should only grow, not shrink. --> 170 <!-- Stretch should only grow, not shrink. -->
156 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 171 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
157 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 172 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
158 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 173 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
159 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 174 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
160 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 175 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
161 </div> 176 </div>
162 177
163 <!-- 0 lines should not crash. --> 178 <!-- 0 lines should not crash. -->
164 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> 179 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
165 </div> 180 </div>
166 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 181 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
167 </div> 182 </div>
183 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
184 </div>
168 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 185 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
169 </div> 186 </div>
170 187
171 <!-- 1 line should not crash. --> 188 <!-- 1 line should not crash. -->
172 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> 189 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
173 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> 190 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
174 </div> 191 </div>
175 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 192 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
176 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> 193 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
177 </div> 194 </div>
195 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
196 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
197 </div>
178 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 198 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
179 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> 199 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
180 </div> 200 </div>
181 201
182 202
183 <div data-expected-width="120" class="flexbox vertical-rl"> 203 <div data-expected-width="120" class="flexbox vertical-rl">
184 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> 204 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
185 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> 205 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
186 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> 206 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
187 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> 207 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
(...skipping 27 matching lines...) Expand all
215 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> 235 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
216 </div> 236 </div>
217 237
218 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around"> 238 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
219 <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> 239 <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
220 <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> 240 <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
221 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> 241 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
222 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 242 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
223 </div> 243 </div>
224 244
245 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
246 <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
247 <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
248 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
249 <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
250 </div>
251
225 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch"> 252 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
226 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> 253 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
227 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> 254 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
228 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> 255 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
229 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> 256 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
230 </div> 257 </div>
231 258
232 <!-- Negative overflow goes out the right. --> 259 <!-- Negative overflow goes out the right. -->
233 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;"> 260 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
234 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> 261 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
(...skipping 19 matching lines...) Expand all
254 </div> 281 </div>
255 282
256 <!-- If we overflow, we should true center. --> 283 <!-- If we overflow, we should true center. -->
257 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;"> 284 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
258 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> 285 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
259 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> 286 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
260 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> 287 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
261 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> 288 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
262 </div> 289 </div>
263 290
291 <!-- If we overflow, we should true center. -->
292 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
293 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
294 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
295 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
296 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
297 </div>
298
264 <!-- Stretch should only grow, not shrink. --> 299 <!-- Stretch should only grow, not shrink. -->
265 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;"> 300 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
266 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 301 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
267 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> 302 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
268 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> 303 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
269 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> 304 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
270 </div> 305 </div>
271 306
272 <!-- 0 lines should not crash. --> 307 <!-- 0 lines should not crash. -->
273 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> 308 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
274 </div> 309 </div>
275 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> 310 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
276 </div> 311 </div>
312 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
313 </div>
277 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> 314 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
278 </div> 315 </div>
279 316
280 <!-- 1 line should not crash. --> 317 <!-- 1 line should not crash. -->
281 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> 318 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
282 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> 319 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
283 </div> 320 </div>
284 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> 321 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
285 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> 322 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
286 </div> 323 </div>
324 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
325 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
326 </div>
287 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> 327 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
288 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> 328 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
289 </div> 329 </div>
290 </body> 330 </body>
291 </html> 331 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/flexbox/flex-justify-content.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698