LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html - Issue 845313003: [CSS Grid Layout] Tracks growing beyond limits when they should not

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

Issue 845313003: [CSS Grid Layout] Tracks growing beyond limits when they should not (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Bring old-style loops back. Ensure that planned increases are applied. Created 5 years, 11 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

OLD	NEW
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 <style>	4 <style>

5 .grid {	5 .grid {

6 font: 10px/1 Ahem;	6 font: 10px/1 Ahem;

7 }	7 }

8 .gridMinContentFixedAndAuto {	8 .gridMinContentFixedAndAuto {

9 grid-template-columns: minmax(min-content, 15px) auto;	9 grid-template-columns: minmax(min-content, 15px) auto;

10 }	10 }

(...skipping 29 matching lines...) Expand all Loading...
40 }	40 }

41 .gridMaxContentAndMaxContentFixed {	41 .gridMaxContentAndMaxContentFixed {

42 grid-template-columns: max-content minmax(max-content, 35px);	42 grid-template-columns: max-content minmax(max-content, 35px);

43 }	43 }

44 .gridMinContentFixedAndFixedFixedAndAuto {	44 .gridMinContentFixedAndFixedFixedAndAuto {

45 grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;	45 grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;

46 }	46 }

47 .gridAutoAndFixedFixedAndMaxContentFixed {	47 .gridAutoAndFixedFixedAndMaxContentFixed {

48 grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);	48 grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);

49 }	49 }

	50 .gridMaxContentAndMaxContentFixedAndMaxContent {

	51 grid-template-columns: max-content minmax(max-content, 20px) max-content;

	52 }

	53 .gridAutoAndMinContentFixedAndMinContent {

	54 grid-template-columns: auto minmax(min-content, 30px) min-content;

	55 }

50	56

51 </style>	57 </style>

52 <script src="../../resources/js-test.js"></script>	58 <script src="../../resources/js-test.js"></script>

53 </head>	59 </head>

54 <body>	60 <body>

55 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">	61 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">

56 <div class="firstRowBothColumn">XXXX XXXX</div>	62 <div class="firstRowBothColumn">XXXX XXXX</div>

57 </div>	63 </div>

58	64

59 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">	65 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">

(...skipping 228 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
288 </div>	294 </div>

289 </div>	295 </div>

290	296

291 <div class="constrainedContainer">	297 <div class="constrainedContainer">

292 <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFix edFixedAndMaxContentFixed">	298 <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFix edFixedAndMaxContentFixed">

293 <div class="firstRowBothColumn">XXXX XXXX</div>	299 <div class="firstRowBothColumn">XXXX XXXX</div>

294 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>	300 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>

295 </div>	301 </div>

296 </div>	302 </div>

297	303

	304 <div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxConte ntAndMaxContentFixedAndMaxContent">

	305 <div style="grid-row: 1; grid-column: 1;">X X X</div>

	306 <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>

	308 </div>

	309

	310 <div class="grid gridAutoAndMinContentFixedAndMinContent" id="gridAutoAndMinCont entFixedAndMinContent">

	311 <div style="grid-row: 1; grid-column: 1;">XX</div>

	312 <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div>

	313 <div style="grid-row: 1; grid-column: 3;">XXX XXX</div>

	314 </div>

	315

298 <script>	316 <script>

299 function testGridColumnsValues(id, computedColumnValue)	317 function testGridColumnsValues(id, computedColumnValue)

300 {	318 {

301 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue);	319 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue);

302 }	320 }

303	321

304 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");	322 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");

305 testGridColumnsValues("gridAutoAndAuto", "45px 45px");	323 testGridColumnsValues("gridAutoAndAuto", "45px 45px");

306 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");	324 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");

307 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");	325 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");

(...skipping 35 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
343 testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px");	361 testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px");

344 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px" );	362 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px" );

345 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px" );	363 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px" );

346	364

347 debug("");	365 debug("");

348 debug("Check that only a subset of tracks grow above track limits.");	366 debug("Check that only a subset of tracks grow above track limits.");

349 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");	367 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");

350 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "65px 85px");	368 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "65px 85px");

351 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6 0px");	369 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6 0px");

352 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "70px 20px 6 0px");	370 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "70px 20px 6 0px");

	371 testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
	Julien - ping for review 2015/01/23 10:20:12 This result doesn't seem correct. We should spread This result doesn't seem correct. We should spread the extra space over all the columns AFAICT. I don't think this should block the patch but we should follow-up. svillar 2015/01/23 10:39:47 I am not that sure about that. Note that the secon Show quoted text On 2015/01/23 10:20:12, Julien Chaffraix - CET wrote: > This result doesn't seem correct. We should spread the extra space over all the > columns AFAICT. > > I don't think this should block the patch but we should follow-up. I am not that sure about that. Note that the second track has a fixed size growth limit. This means that for growing beyond limits, that track won't be eligible, because for max-content min track functions we should only grow those tracks with max-content max track sizing functions.
	372 testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 6 5px");

353 </script>	373 </script>

354 </body>	374 </body>

355 </html>	375 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')