third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html - Issue 2080643002: [css-grid] Implement repeat(auto-fit)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

Issue 2080643002: [css-grid] Implement repeat(auto-fit) (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Collapse empty tracks (do not drop them) Created 4 years, 5 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

« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML>	1 <!DOCTYPE HTML>

2 <link href="resources/grid.css" rel="stylesheet">	2 <link href="resources/grid.css" rel="stylesheet">

3 <link href="resources/grid-alignment.css" rel="stylesheet">	3 <link href="resources/grid-alignment.css" rel="stylesheet">

4 <style>	4 <style>

5 .grid {	5 .grid {

6 grid-template-columns: 300px 200px 100px;	6 grid-template-columns: 300px 200px 100px;

7 grid-template-rows: 150px 100px 50px;	7 grid-template-rows: 150px 100px 50px;

8 width: 800px;	8 width: 800px;

9 height: 500px;	9 height: 500px;

10 }	10 }

11	11

12 .gaps {	12 .gaps {

13 grid-gap: 10px 20px;	13 grid-gap: 10px 20px;

14 }	14 }

	15

	16 .autoFit {

	17 grid-template-columns: repeat(auto-fit, 75px);

	18 grid-template-rows: 25px;

	19 }

	20

	21 .w300 { width: 300px; }
	Manuel Rego 2016/07/08 11:12:34 Nit: width300 better than w300 Nit: width300 better than w300
	22

	23 .item { background: gray}
	Manuel Rego 2016/07/08 11:12:34 We only have 2 items as maximum, so I guess this i We only have 2 items as maximum, so I guess this is not applied to any of them as below we define the background for the first and last items. svillar 2016/07/11 12:46:18 Acknowledged. Show quoted text On 2016/07/08 11:12:34, Manuel Rego wrote: > We only have 2 items as maximum, so I guess this is not applied to any of them > as below we define the background for the first and last items. Acknowledged.
	24 .item:first-child { background: lime; }

	25 .item:last-child { background: blue; }

15 </style>	26 </style>

16	27

17 <div class="grid contentStart" id="gridContentStart"></div>	28 <div class="grid contentStart" id="gridContentStart"></div>

18 <div class="grid contentCenter" id="gridContentCenter"></div>	29 <div class="grid contentCenter" id="gridContentCenter"></div>

19 <div class="grid contentEnd" id="gridContentEnd"></div>	30 <div class="grid contentEnd" id="gridContentEnd"></div>

20 <div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>	31 <div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>

21 <div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>	32 <div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>

22 <div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>	33 <div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>

23 <div class="grid contentStretch" id="gridContentStretch"></div>	34 <div class="grid contentStretch" id="gridContentStretch"></div>

24	35

25 <div class="grid gaps contentStart" id="gridGapsContentStart"></div>	36 <div class="grid gaps contentStart" id="gridGapsContentStart"></div>

26 <div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>	37 <div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>

27 <div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>	38 <div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>

28 <div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></di v>	39 <div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></di v>

29 <div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>	40 <div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>

30 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>	41 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>

31 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>	42 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>

32	43

	44 <div class="grid gaps w300 autoFit" id="gridAutoFitEmpty"></div>

	45 <div class="grid gaps w300 autoFit" id="gridAutoFitFirstColumnChild"><div class= "item"></div></div>

	46 <div class="grid gaps w300 autoFit" id="gridAutoFitSecondColumnChild"><div class ="item" style="grid-column: 2"></div></div>

	47 <div class="grid gaps w300 autoFit" id="gridAutoFitThirdColumnChild"><div class= "item" style="grid-column: 3"></div></div>

	48 <div class="grid gaps w300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>

	49 <div class="grid gaps w300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">

	50 <div class="item" style="grid-column: 2"></div><div class="item"></div>

	51 </div>

	52 <div class="grid gaps w300 autoFit" id="gridAutoFitTwoAlternatingChildren">

	53 <div class="item"></div><div class="item" style="grid-column: 3"></div>

	54 </div>

	55

33 <script src="../../resources/js-test.js"></script>	56 <script src="../../resources/js-test.js"></script>

34 <script src="resources/grid-definitions-parsing-utils.js"></script>	57 <script src="resources/grid-definitions-parsing-utils.js"></script>

35 <script>	58 <script>

36 description("Test that computed style for grid-template-columns and grid-tem plate-rows works as expected with content alignment and gaps.");	59 description("Test that computed style for grid-template-columns and grid-tem plate-rows works as expected with content alignment and gaps.");

37

38 testGridDefinitionsValues(document.getElementById("gridContentStart"), "300p x 200px 100px", "150px 100px 50px");	60 testGridDefinitionsValues(document.getElementById("gridContentStart"), "300p x 200px 100px", "150px 100px 50px");

39 testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300 px 200px 100px", "150px 100px 50px");	61 testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300 px 200px 100px", "150px 100px 50px");

40 testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");	62 testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");

41 testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween") , "300px 200px 100px", "150px 100px 50px");	63 testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween") , "300px 200px 100px", "150px 100px 50px");

42 testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");	64 testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");

43 testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");	65 testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");

44 testGridDefinitionsValues(document.getElementById("gridContentStretch"), "30 0px 200px 100px", "150px 100px 50px");	66 testGridDefinitionsValues(document.getElementById("gridContentStretch"), "30 0px 200px 100px", "150px 100px 50px");

45	67

46 testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), " 300px 200px 100px", "150px 100px 50px");	68 testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), " 300px 200px 100px", "150px 100px 50px");

47 testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");	69 testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");

48 testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "30 0px 200px 100px", "150px 100px 50px");	70 testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "30 0px 200px 100px", "150px 100px 50px");

49 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetwe en"), "300px 200px 100px", "150px 100px 50px");	71 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetwe en"), "300px 200px 100px", "150px 100px 50px");

50 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAroun d"), "300px 200px 100px", "150px 100px 50px");	72 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAroun d"), "300px 200px 100px", "150px 100px 50px");

51 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenl y"), "300px 200px 100px", "150px 100px 50px");	73 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenl y"), "300px 200px 100px", "150px 100px 50px");

52 testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");	74 testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");

	75

	76 function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {
	Manuel Rego 2016/07/08 11:12:34 Nice method, why not use it for the previous tests Nice method, why not use it for the previous tests too? svillar 2016/07/11 12:46:18 They were already there but I can migrate them if Show quoted text On 2016/07/08 11:12:34, Manuel Rego wrote: > Nice method, why not use it for the previous tests too? They were already there but I can migrate them if you like. Manuel Rego 2016/07/14 09:10:50 Yeah I know but it'd be nice to migrate the old on Show quoted text On 2016/07/11 12:46:18, svillar wrote: > On 2016/07/08 11:12:34, Manuel Rego wrote: > > Nice method, why not use it for the previous tests too? > > They were already there but I can migrate them if you like. Yeah I know but it'd be nice to migrate the old ones.
	77 var element = document.getElementById(id);

	78 var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEn d', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentS tretch'];

	79

	80 for (alignmentClass in alignmentClasses) {

	81 var originalClassName = element.className;

	82 element.className += " " + alignmentClass;

	83 testGridDefinitionsValues(element, expectedColumns, expectedRows);

	84 element.className = originalClassName;

	85 }

	86 }

	87

	88 testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");

	89 testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");

	90 testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");

	91 testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");

	92 testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");

	93 testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75 px 75px", "25px");

	94 testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");

	95

53 </script>	96 </script>

OLD	NEW