third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html - Issue 2057113002: [css-grid] Allow percentage values for column and row gutters

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

Issue 2057113002: [css-grid] Allow percentage values for column and row gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Grid gaps don't support unitless quirk. 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-gutters-as-percentage.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.h » ('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 <link href="resources/grid.css" rel="stylesheet">	4 <link href="resources/grid.css" rel="stylesheet">

5 <style>	5 <style>

6 .gridGap { grid-gap: 20px 15px; }	6 .gridGap { grid-gap: 20px 15px; }

7 .gridSimpleGap { grid-gap: 25px; }	7 .gridSimpleGap { grid-gap: 25px; }
	Manuel Rego 2016/07/01 06:45:57 I'd add some cases here (for the grid-gap shorthan I'd add some cases here (for the grid-gap shorthand) using percentages too.
8 .gridColumnGap { grid-column-gap: 2vw; }	8 .gridColumnGap { grid-column-gap: 2vw; }

9 .gridRowGap { grid-row-gap: 2em; }	9 .gridRowGap { grid-row-gap: 2em; }

10 .gridRowColumnGaps {	10 .gridRowColumnGaps {

11 grid-row-gap: 12px;	11 grid-row-gap: 12px;

12 grid-column-gap: 1rem;	12 grid-column-gap: 1rem;

13 }	13 }

	14 .gridRowColumnPercentGaps {

	15 grid-row-gap: 10%;

	16 grid-column-gap: 15%;

	17 }

14 .gridRowColumnInheritGaps {	18 .gridRowColumnInheritGaps {

15 grid-row-gap: inherit;	19 grid-row-gap: inherit;

16 grid-column-gap: inherit;	20 grid-column-gap: inherit;

17 }	21 }

18 .gridRowColumnInitialGaps {	22 .gridRowColumnInitialGaps {

19 grid-row-gap: initial;	23 grid-row-gap: initial;

20 grid-column-gap: initial;	24 grid-column-gap: initial;

21 }	25 }

22 .gridCalcGaps {	26 .gridCalcGaps {

23 grid-row-gap: calc(10px + 3px);	27 grid-row-gap: calc(10px + 3px);

24 grid-column-gap: calc(2px + 1vw);	28 grid-column-gap: calc(2px + 1vw);

25 }	29 }

26 .gridInvalidRowGap { grid-row-gap: 10%; }	30 .gridInvalidRowGap { grid-row-gap: -10px; }

27 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }	31 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }

28 .gridInvalidMultipleRowColumnGaps {	32 .gridInvalidMultipleRowColumnGaps {

29 grid-row-gap: 10px 1px;	33 grid-row-gap: 10px 1px;

30 grid-column-gap: 0px 0px 0px;	34 grid-column-gap: 0px 0px 0px;

31 }	35 }

32 .gridInvalidLengthRowColumnGaps {	36 .gridInvalidLengthRowColumnGaps {

33 grid-row-gap: 2dpi;	37 grid-row-gap: 2dpi;

34 grid-column-gap: 3rad;	38 grid-column-gap: 3rad;

35 }	39 }

36 .gridInvalidGridGap { grid-gap: 20px 20px 10px; }	40 .gridInvalidGridGap { grid-gap: 20px 20px 10px; }

37 .gridInvalidNoneGap { grid-gap: none; }	41 .gridInvalidNoneGap { grid-gap: none; }

38 .gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }	42 .gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }

39	43

40 </style>	44 </style>

41 <script src="../../resources/js-test.js"></script>	45 <script src="../../resources/js-test.js"></script>

42 </head>	46 </head>

43 <body>	47 <body>

44	48

45 <div class="grid" id="defaultGrid"></div>	49 <div class="grid" id="defaultGrid"></div>

46 <div class="grid gridGap" id="gridGap"></div>	50 <div class="grid gridGap" id="gridGap"></div>

47 <div class="grid gridSimpleGap" id="gridSimpleGap"></div>	51 <div class="grid gridSimpleGap" id="gridSimpleGap"></div>

48 <div class="grid gridColumnGap" id="gridColumnGap"></div>	52 <div class="grid gridColumnGap" id="gridColumnGap"></div>

49 <div class="grid gridRowGap" id="gridRowGap"></div>	53 <div class="grid gridRowGap" id="gridRowGap"></div>

50 <div class="grid gridCalcGaps" id="gridCalcGaps"></div>	54 <div class="grid gridCalcGaps" id="gridCalcGaps"></div>

51 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>	55 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>

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

52 <div class="grid gridSimpleGap">	57 <div class="grid gridSimpleGap">

53 <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></d iv>	58 <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></d iv>

54 </div>	59 </div>

55 <div class="grid gridSimpleGap">	60 <div class="grid gridSimpleGap">

56 <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></d iv>	61 <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></d iv>

57 </div>	62 </div>

58 <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>	63 <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>

59 <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>	64 <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>

60 <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowCol umnGaps"></div>	65 <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowCol umnGaps"></div>

61 <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>	66 <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>

62 <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>	67 <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>

63 <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></d iv>	68 <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></d iv>

64 <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnG aps"></div>	69 <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnG aps"></div>

65	70

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

67 <script>	72 <script>

68	73

69 description('Test that setting and getting grid-column-gap and grid-row-gap work s as expected');	74 description('Test that setting and getting grid-column-gap and grid-row-gap work s as expected');

70	75

71 debug("Test getting grid-column-gap and grid-row-gap set through CSS");	76 debug("Test getting grid-column-gap and grid-row-gap set through CSS");

72	77

73 testGridGapDefinitionsValues("defaultGrid", "0px", "0px");	78 testGridGapDefinitionsValues("defaultGrid", "0px", "0px");

74 testGridGapDefinitionsValues("gridGap", "20px", "15px");	79 testGridGapDefinitionsValues("gridGap", "20px", "15px");

75 testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px");	80 testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px");

76 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");	81 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");

77 testGridGapDefinitionsValues("gridRowGap", "32px", "0px");	82 testGridGapDefinitionsValues("gridRowGap", "32px", "0px");

78 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");	83 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");

79 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");	84 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");

80 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");	85 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");

	86 testGridGapDefinitionsValues("gridRowColumnPercentGaps", "10%", "15%");

81 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");	87 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");

82 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");	88 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");

83	89

84 debug("");	90 debug("");

85 debug("Test getting wrong values for grid-column-gap and grid-row-gap set throug h CSS");	91 debug("Test getting wrong values for grid-column-gap and grid-row-gap set throug h CSS");

86 testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");	92 testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");

87 testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");	93 testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");

88 testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");	94 testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");

89 testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");	95 testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");

90 testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");	96 testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");

91 testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");	97 testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");

92 testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");	98 testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");

93	99

94 </script>	100 </script>

95 </body>	101 </body>

96 </html>	102 </html>

OLD	NEW