third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html - Issue 2589143002: [css-grid] Isolate intrinsic size computation from layout

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html

Issue 2589143002: [css-grid] Isolate intrinsic size computation from layout (Closed)

Patch Set: Created 3 years, 12 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/TestExpectations ('k') | third_party/WebKit/Source/core/layout/LayoutGrid.h » ('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="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">	3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">

4 <style>	4 <style>

5 .grid {	5 .grid {

6 border: 2px solid black;	6 border: 2px solid black;

7 position: relative;	7 position: relative;

8 min-width: 30px;	8 min-width: 30px;

9	9

10 grid-auto-columns: 20px;	10 grid-auto-columns: 20px;

11	11

12 padding-top: 10px;	12 padding-top: 10px;

13 margin-bottom: 10px;	13 margin-bottom: 10px;

14 }	14 }

15	15

16 .gridAutoFillAndMinContentFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-content, 40px); }

17

18 .abs { height: 5px; position: absolute; width: 100%; }	16 .abs { height: 5px; position: absolute; width: 100%; }

19	17

20 </style>	18 </style>

21 <!-- Explicitly not using layout-th because it does not allow multiple checkLayo ut(). -->	19 <!-- Explicitly not using layout-th because it does not allow multiple checkLayo ut(). -->

22 <script src="../../resources/check-layout.js"></script>	20 <script src="../../resources/check-layout.js"></script>

23 <script>	21 <script>

24 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)	22 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)

25 {	23 {

26 var gridElement = document.getElementById(id);	24 var gridElement = document.getElementById(id);

27 gridElement.style.gridTemplateRows = gridTemplateRows;	25 gridElement.style.gridTemplateRows = gridTemplateRows;

(...skipping 107 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
135 <div>This test checks that changing the min\|max-content contributions of grid it ems properly recomputes both track sizes and grid positions in grids with auto r epeat tracks.</div>	133 <div>This test checks that changing the min\|max-content contributions of grid it ems properly recomputes both track sizes and grid positions in grids with auto r epeat tracks.</div>

136 <div id="log"></div>	134 <div id="log"></div>

137	135

138 <div id="grid1" class="grid max-content">	136 <div id="grid1" class="grid max-content">

139 <div id="item" style="grid-column: 1 / -1; background: cyan;"></div>	137 <div id="item" style="grid-column: 1 / -1; background: cyan;"></div>

140 <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></d iv>	138 <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></d iv>

141 <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></d iv>	139 <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></d iv>

142 <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></d iv>	140 <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></d iv>

143 <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></ div>	141 <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></ div>

144 </div>	142 </div>

OLD	NEW