third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html - Issue 2287113004: [css-grid] Implement fit-content track size

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

Issue 2287113004: [css-grid] Implement fit-content track size (Closed)

Patch Set: Patch for landing Created 4 years, 3 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt » ('j') | no next file with comments »
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="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">	4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">

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

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

7 <style>	7 <style>

8 .definite {	8 .definite {

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

10 width: 800px;	10 width: 800px;

(...skipping 73 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
84 grid-template-rows: minmax(calc(20px), 50%);	84 grid-template-rows: minmax(calc(20px), 50%);

85 }	85 }

86 .gridWithCalcComplexInsideMinMax {	86 .gridWithCalcComplexInsideMinMax {

87 grid-template-columns: minmax(10%, calc(50% + 15px));	87 grid-template-columns: minmax(10%, calc(50% + 15px));

88 grid-template-rows: minmax(calc(20px + 10%), 50%);	88 grid-template-rows: minmax(calc(20px + 10%), 50%);

89 }	89 }

90 .gridWithAutoInsideMinMax {	90 .gridWithAutoInsideMinMax {

91 grid-template-columns: minmax(auto, 20px);	91 grid-template-columns: minmax(auto, 20px);

92 grid-template-rows: minmax(max-content, auto);	92 grid-template-rows: minmax(max-content, auto);

93 }	93 }

	94 .gridWithFitContentFunction {

	95 grid-template-columns: fit-content(30%);

	96 grid-template-rows: fit-content(20px):

	97 }

94 </style>	98 </style>

95 <script src="../../resources/js-test.js"></script>	99 <script src="../../resources/js-test.js"></script>

96 </head>	100 </head>

97 <body>	101 <body>

98 <div class="grid definite gridWithNone" id="gridWithNoneElement"></div>	102 <div class="grid definite gridWithNone" id="gridWithNoneElement"></div>

99 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>	103 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>

100 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>	104 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>

101 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></ div>	105 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></ div>

102 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWith Children">	106 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWith Children">

103 <div class="gridItem"></div>	107 <div class="gridItem"></div>

(...skipping 19 matching lines...) Expand all Loading...
123 <div class="gridItem2"></div>	127 <div class="gridItem2"></div>

124 </div>	128 </div>

125 <div class="grid definite gridWithFraction" id="gridWithFractionElement"></div>	129 <div class="grid definite gridWithFraction" id="gridWithFractionElement"></div>

126 <div class="grid definite gridWithCalc" id="gridWithCalcElement"></div>	130 <div class="grid definite gridWithCalc" id="gridWithCalcElement"></div>

127 <div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement">< /div>	131 <div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement">< /div>

128 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax Element"></div>	132 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax Element"></div>

129 <div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcCompl exInsideMinMaxElement"></div>	133 <div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcCompl exInsideMinMaxElement"></div>

130 <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAut oInsideMinMaxElement">	134 <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAut oInsideMinMaxElement">

131 <div class="gridItem"></div>	135 <div class="gridItem"></div>

132 </div>	136 </div>

	137 <div class="grid definite gridWithFitContentFunction contentStart" id="gridWithF itContentFunctionElement">

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

	139 </div>

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

134 <script src="resources/grid-columns-rows-get-set.js"></script>	141 <script src="resources/grid-columns-rows-get-set.js"></script>

135 </body>	142 </body>

136 </html>	143 </html>

OLD	NEW