LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html - Issue 60633008: [CSS Grid Layout] Percentages of indefinite sizes should compute to "auto"

Side by Side Diff: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 60633008: [CSS Grid Layout] Percentages of indefinite sizes should compute to "auto" (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 7 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 | « LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/resources/grid.css » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

2 <html>	2 <html>

3 <head>	3 <head>

4 <script>

5 if (window.testRunner)

6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);

7 </script>

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

9 <style>	5 <style>

10 .grid {	6 .grid {

11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */	7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */

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

13 height: 600px;	9 height: 600px;

14 }	10 }

15 .gridItem {	11 .gridItem {

16 grid-column: 1;	12 grid-column: 1;

17 grid-row: 1;	13 grid-row: 1;

(...skipping 23 matching lines...) Expand all Loading...
41 .gridWithPercentageSameStringMultipleTimes {	37 .gridWithPercentageSameStringMultipleTimes {

42 grid-definition-columns: "first" "nav" 10% "nav" 15% "last";	38 grid-definition-columns: "first" "nav" 10% "nav" 15% "last";

43 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last";	39 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last";

44 }	40 }

45 </style>	41 </style>

46 <script src="../../resources/js-test.js"></script>	42 <script src="../../resources/js-test.js"></script>

47 </head>	43 </head>

48 <body>	44 <body>

49 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>	45 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>

50 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>	46 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>

	47 <div class="noSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>

	48 <div class="noSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildr en">

	49 <div class="gridItem"></div>

	50 </div>

51 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>	51 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>

52 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">	52 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">

53 <div class="gridItem"></div>	53 <div class="gridItem"></div>

54 </div>	54 </div>

55 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>	55 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>

56 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>	56 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>

57 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>	57 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>

58	58

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

60 <script>	60 <script>

61 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');	61 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');

62	62

63 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");	63 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");

64 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px");	64 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px");

65 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last");	65 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last");

	66 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px last", "0px last");

	67 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px last", "22px last");

66 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last");	68 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last");

67 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last");	69 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last");

68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");	70 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");

69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");	71 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");

70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last");	72 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last");

71	73

72 debug("");	74 debug("");

73 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");	75 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");

74 testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");	76 testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");

75 testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", " 240px last", "first 55%", "40% last");	77 testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", " 240px last", "first 55%", "40% last");

(...skipping 21 matching lines...) Expand all Loading...
97 element = document.createElement("div");	99 element = document.createElement("div");

98 document.body.appendChild(element);	100 document.body.appendChild(element);

99 element.style.display = "grid";	101 element.style.display = "grid";

100 element.style.gridDefinitionColumns = "'foo' 'bar'";	102 element.style.gridDefinitionColumns = "'foo' 'bar'";

101 element.style.gridDefinitionRows = "'bar' 'foo'";	103 element.style.gridDefinitionRows = "'bar' 'foo'";

102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");	104 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");

103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");	105 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");

104 </script>	106 </script>

105 </body>	107 </body>

106 </html>	108 </html>

OLD	NEW