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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html

Issue 1583433002: [css-align] New CSS Value 'normal' for Content Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed layout tests failing. Created 4 years, 10 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/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.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 <html> 1 <html>
2 <head> 2 <head>
3 <link href="resources/grid.css" rel="stylesheet"/> 3 <link href="resources/grid.css" rel="stylesheet"/>
4 <link href="resources/grid-alignment.css" rel="stylesheet"/>
4 <style> 5 <style>
5 .grid { 6 .grid {
6 font: 10px/1 Ahem; 7 font: 10px/1 Ahem;
7 } 8 }
9 .gridWidth300 {
10 width: 300px;
11 }
8 .gridMinContentFixedAndAuto { 12 .gridMinContentFixedAndAuto {
9 grid-template-columns: minmax(min-content, 15px) auto; 13 grid-template-columns: minmax(min-content, 15px) auto;
10 } 14 }
11 .gridMaxContentFixedAndAuto { 15 .gridMaxContentFixedAndAuto {
12 grid-template-columns: minmax(max-content, 15px) auto; 16 grid-template-columns: minmax(max-content, 15px) auto;
13 } 17 }
14 .gridAutoAndAuto { 18 .gridAutoAndAuto {
15 grid-template-columns: auto auto; 19 grid-template-columns: auto auto;
16 } 20 }
17 .gridMinContentAndMinContentFixed { 21 .gridMinContentAndMinContentFixed {
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
51 grid-template-columns: max-content minmax(max-content, 20px) max-content; 55 grid-template-columns: max-content minmax(max-content, 20px) max-content;
52 } 56 }
53 .gridAutoAndMinContentFixedAndMinContent { 57 .gridAutoAndMinContentFixedAndMinContent {
54 grid-template-columns: auto minmax(min-content, 30px) min-content; 58 grid-template-columns: auto minmax(min-content, 30px) min-content;
55 } 59 }
56 60
57 </style> 61 </style>
58 <script src="../../resources/js-test.js"></script> 62 <script src="../../resources/js-test.js"></script>
59 </head> 63 </head>
60 <body> 64 <body>
61 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto"> 65 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinCont entFixedAndAuto">
62 <div class="firstRowBothColumn">XXXX XXXX</div> 66 <div class="firstRowBothColumn">XXXX XXXX</div>
63 </div> 67 </div>
64 68
65 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto"> 69 <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
66 <div class="firstRowBothColumn">XXXX XXXX</div> 70 <div class="firstRowBothColumn">XXXX XXXX</div>
67 </div> 71 </div>
68 72
69 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinConte ntFixed"> 73 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinConte ntFixed">
70 <div class="firstRowBothColumn">XXXX XXXX</div> 74 <div class="firstRowBothColumn">XXXX XXXX</div>
71 </div> 75 </div>
72 76
73 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent"> 77 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent">
74 <div class="firstRowBothColumn">XXXX XXXX</div> 78 <div class="firstRowBothColumn">XXXX XXXX</div>
75 </div> 79 </div>
76 80
77 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMax Content"> 81 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMax Content">
78 <div class="firstRowBothColumn">XXXX XXXX</div> 82 <div class="firstRowBothColumn">XXXX XXXX</div>
79 </div> 83 </div>
80 84
81 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMin Content"> 85 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMin Content">
82 <div class="firstRowBothColumn">XXXX XXXX</div> 86 <div class="firstRowBothColumn">XXXX XXXX</div>
83 </div> 87 </div>
84 88
85 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxConte ntFixed"> 89 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxConte ntFixed">
86 <div class="firstRowBothColumn">XXXX XXXX</div> 90 <div class="firstRowBothColumn">XXXX XXXX</div>
87 </div> 91 </div>
88 92
89 <div class="constrainedContainer"> 93 <div class="constrainedContainer">
90 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto" > 94 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto" >
91 <div class="firstRowBothColumn">XXXX XXXX</div> 95 <div class="firstRowBothColumn">XXXX XXXX</div>
92 </div> 96 </div>
93 </div> 97 </div>
94 98
95 <div class="grid gridAutoMinContent" id="gridAutoMinContent"> 99 <div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent" >
96 <div class="firstRowBothColumn">XXXX XXXX</div> 100 <div class="firstRowBothColumn">XXXX XXXX</div>
97 </div> 101 </div>
98 102
99 <div class="grid gridAutoMaxContent" id="gridAutoMaxContent"> 103 <div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent" >
100 <div class="firstRowBothColumn">XXXX XXXX</div> 104 <div class="firstRowBothColumn">XXXX XXXX</div>
101 </div> 105 </div>
102 106
103 <div class="constrainedContainer"> 107 <div class="constrainedContainer">
104 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed"> 108 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed">
105 <div class="firstRowBothColumn">XXXX XXXX</div> 109 <div class="firstRowBothColumn">XXXX XXXX</div>
106 </div> 110 </div>
107 </div> 111 </div>
108 112
109 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed"> 113 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed">
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after
197 201
198 <div class="constrainedContainer"> 202 <div class="constrainedContainer">
199 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxC ontentFixedUnsortedConstrained"> 203 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxC ontentFixedUnsortedConstrained">
200 <div class="firstRowBothColumn">XXXX XXXX</div> 204 <div class="firstRowBothColumn">XXXX XXXX</div>
201 <div class="firstRowBothColumn">XX XX XX XX</div> 205 <div class="firstRowBothColumn">XX XX XX XX</div>
202 <div class="firstRowSecondColumn">XXXXXXX</div> 206 <div class="firstRowSecondColumn">XXXXXXX</div>
203 </div> 207 </div>
204 </div> 208 </div>
205 209
206 <!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. --> 210 <!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
207 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsor ted"> 211 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinCont entFixedAndAutoUnsorted">
208 <div class="firstRowBothColumn">XXXX XXXX</div> 212 <div class="firstRowBothColumn">XXXX XXXX</div>
209 <div class="firstRowSecondColumn">XXXX XXXX</div> 213 <div class="firstRowSecondColumn">XXXX XXXX</div>
210 </div> 214 </div>
211 215
212 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsorted"> 216 <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorte d">
213 <div class="firstRowBothColumn">XXXX XXXX</div> 217 <div class="firstRowBothColumn">XXXX XXXX</div>
214 <div class="firstRowSecondColumn">XXX</div> 218 <div class="firstRowSecondColumn">XXX</div>
215 </div> 219 </div>
216 220
217 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinConte ntFixedUnsorted"> 221 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinConte ntFixedUnsorted">
218 <div class="firstRowBothColumn">XXXX XXXX</div> 222 <div class="firstRowBothColumn">XXXX XXXX</div>
219 <div class="firstRowBothColumn">XX XX XX XX</div> 223 <div class="firstRowBothColumn">XX XX XX XX</div>
220 <div class="firstRowSecondColumn">XXXX XXXX</div> 224 <div class="firstRowSecondColumn">XXXX XXXX</div>
221 </div> 225 </div>
222 226
(...skipping 12 matching lines...) Expand all
235 <div class="firstRowBothColumn">XXXX XXXX</div> 239 <div class="firstRowBothColumn">XXXX XXXX</div>
236 <div class="firstRowBothColumn">X X</div> 240 <div class="firstRowBothColumn">X X</div>
237 <div class="firstRowSecondColumn">XXXX</div> 241 <div class="firstRowSecondColumn">XXXX</div>
238 </div> 242 </div>
239 243
240 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxConte ntFixedUnsorted"> 244 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxConte ntFixedUnsorted">
241 <div class="firstRowBothColumn">XXXX XXXX</div> 245 <div class="firstRowBothColumn">XXXX XXXX</div>
242 <div class="firstRowSecondColumn">XXXX XXXX</div> 246 <div class="firstRowSecondColumn">XXXX XXXX</div>
243 </div> 247 </div>
244 248
245 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsor ted"> 249 <div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxCont entFixedAndAutoUnsorted">
246 <div class="firstRowBothColumn">XX XX</div> 250 <div class="firstRowBothColumn">XX XX</div>
247 <div class="firstRowSecondColumn">XXXX</div> 251 <div class="firstRowSecondColumn">XXXX</div>
248 <div class="firstRowSecondColumn">XXX XXX</div> 252 <div class="firstRowSecondColumn">XXX XXX</div>
249 </div> 253 </div>
250 254
251 <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsorted"> 255 <div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentU nsorted">
252 <div class="firstRowBothColumn">XX XX XX XX</div> 256 <div class="firstRowBothColumn">XX XX XX XX</div>
253 <div class="firstRowSecondColumn">XXXXXX XXXXXX</div> 257 <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
254 </div> 258 </div>
255 259
256 <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsorted"> 260 <div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentU nsorted">
257 <div class="firstRowBothColumn">XXXX XXXX</div> 261 <div class="firstRowBothColumn">XXXX XXXX</div>
258 <div class="firstRowBothColumn">XXX XXX</div> 262 <div class="firstRowBothColumn">XXX XXX</div>
259 <div class="firstRowSecondColumn">XXXXX</div> 263 <div class="firstRowSecondColumn">XXXXX</div>
260 </div> 264 </div>
261 265
262 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixedUnsorted"> 266 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixedUnsorted">
263 <div class="firstRowBothColumn">XXX XXX</div> 267 <div class="firstRowBothColumn">XXX XXX</div>
264 <div class="firstRowBothColumn">XXXX XXXX</div> 268 <div class="firstRowBothColumn">XXXX XXXX</div>
265 <div class="firstRowSecondColumn">XXXX XXXX</div> 269 <div class="firstRowSecondColumn">XXXX XXXX</div>
266 <div class="firstRowSecondColumn">XX</div> 270 <div class="firstRowSecondColumn">XX</div>
267 </div> 271 </div>
268 272
269 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixedUnsorted"> 273 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixedUnsorted">
270 <div class="firstRowBothColumn">XXXX XXXX</div> 274 <div class="firstRowBothColumn">XXXX XXXX</div>
271 <div class="firstRowBothColumn">XX XX XX XX</div> 275 <div class="firstRowBothColumn">XX XX XX XX</div>
272 <div class="firstRowSecondColumn">XXXXXXX</div> 276 <div class="firstRowSecondColumn">XXXXXXX</div>
273 </div> 277 </div>
274 278
275 <!-- The next four force the grid to grow only a particular subset of tracks abo ve the limits --> 279 <!-- The next four force the grid to grow only a particular subset of tracks abo ve the limits -->
276 <div class="constrainedContainer"> 280 <div class="constrainedContainer">
277 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoA boveLimits"> 281 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMin ContentFixedAndAutoAboveLimits">
278 <div class="firstRowBothColumn">XXXX XXXX</div> 282 <div class="firstRowBothColumn">XXXX XXXX</div>
279 <div class="firstRowBothColumn">XXXXXXXXXXX</div> 283 <div class="firstRowBothColumn">XXXXXXXXXXX</div>
280 </div> 284 </div>
281 </div> 285 </div>
282 286
283 <div class="constrainedContainer"> 287 <div class="constrainedContainer">
284 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoA boveLimits"> 288 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoA boveLimits">
285 <div class="firstRowBothColumn">XXXX XXXX</div> 289 <div class="firstRowBothColumn">XXXX XXXX</div>
286 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> 290 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
287 </div> 291 </div>
(...skipping 12 matching lines...) Expand all
300 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> 304 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
301 </div> 305 </div>
302 </div> 306 </div>
303 307
304 <div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxConte ntAndMaxContentFixedAndMaxContent"> 308 <div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxConte ntAndMaxContentFixedAndMaxContent">
305 <div style="grid-row: 1; grid-column: 1;">X X X</div> 309 <div style="grid-row: 1; grid-column: 1;">X X X</div>
306 <div style="grid-row: 1; grid-column: 3;">X X</div> 310 <div style="grid-row: 1; grid-column: 3;">X X</div>
307 <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div> 311 <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div>
308 </div> 312 </div>
309 313
310 <div class="grid gridAutoAndMinContentFixedAndMinContent" id="gridAutoAndMinCont entFixedAndMinContent"> 314 <div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id ="gridAutoAndMinContentFixedAndMinContent">
311 <div style="grid-row: 1; grid-column: 1;">XX</div> 315 <div style="grid-row: 1; grid-column: 1;">XX</div>
312 <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div> 316 <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div>
313 <div style="grid-row: 1; grid-column: 3;">XXX XXX</div> 317 <div style="grid-row: 1; grid-column: 3;">XXX XXX</div>
314 </div> 318 </div>
315 319
316 <script> 320 <script>
317 function testGridColumnsValues(id, computedColumnValue) 321 function testGridColumnsValues(id, computedColumnValue)
318 { 322 {
319 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue); 323 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue);
320 } 324 }
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
366 debug("Check that only a subset of tracks grow above track limits."); 370 debug("Check that only a subset of tracks grow above track limits.");
367 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px"); 371 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
368 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px"); 372 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px");
369 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6 0px"); 373 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6 0px");
370 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px"); 374 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px");
371 testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px"); 375 testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
372 testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 6 5px"); 376 testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 6 5px");
373 </script> 377 </script>
374 </body> 378 </body>
375 </html> 379 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698