| 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 |
|---|
Chromium Code Reviews
Issue 2589143002:
[css-grid] Isolate intrinsic size computation from layout (Closed)
