| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 4 <style> |
| 5 .grid { |
| 6 border: 2px solid black; |
| 7 position: relative; |
| 8 min-width: 30px; |
| 9 |
| 10 grid-auto-columns: 20px; |
| 11 |
| 12 padding-top: 10px; |
| 13 margin-bottom: 10px; |
| 14 } |
| 15 |
| 16 .gridAutoFillAndMinContentFixed { grid-template-columns: repeat(auto-fill, 20px)
minmax(min-content, 40px); } |
| 17 |
| 18 .abs { height: 5px; position: absolute; width: 100%; } |
| 19 |
| 20 </style> |
| 21 <!-- Explicitly not using layout-th because it does not allow multiple checkLayo
ut(). --> |
| 22 <script src="../../resources/check-layout.js"></script> |
| 23 <script> |
| 24 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) |
| 25 { |
| 26 var gridElement = document.getElementById(id); |
| 27 gridElement.style.gridTemplateRows = gridTemplateRows; |
| 28 gridElement.style.gridTemplateColumns = gridTemplateColumns; |
| 29 } |
| 30 |
| 31 function setItemSize(id, width, height) |
| 32 { |
| 33 var gridElement = document.getElementById(id); |
| 34 gridElement.style.width = width; |
| 35 gridElement.style.height = height; |
| 36 } |
| 37 |
| 38 function testGridDefinitions(gridItemsData) |
| 39 { |
| 40 var length = gridItemsData.length; |
| 41 for (i = 0; i < length; ++i) { |
| 42 var item = document.getElementById(gridItemsData[i].id); |
| 43 item.setAttribute("data-expected-width", gridItemsData[i].width); |
| 44 item.setAttribute("data-expected-height", gridItemsData[i].height); |
| 45 item.setAttribute("data-offset-x", gridItemsData[i].x); |
| 46 item.setAttribute("data-offset-y", gridItemsData[i].y); |
| 47 } |
| 48 |
| 49 checkLayout(".grid"); |
| 50 } |
| 51 |
| 52 function testChangingGridDefinitions() |
| 53 { |
| 54 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-conten
t, 40px)'); |
| 55 |
| 56 setItemSize('item', '100px', '30px'); |
| 57 testGridDefinitions([ |
| 58 { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, |
| 59 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 60 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 61 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, |
| 62 { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } |
| 63 ]); |
| 64 |
| 65 setItemSize('item', '80px', '30px'); |
| 66 testGridDefinitions([ |
| 67 { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, |
| 68 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 69 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 70 { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, |
| 71 { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } |
| 72 ]); |
| 73 |
| 74 setItemSize('item', '15px', '30px'); |
| 75 testGridDefinitions([ |
| 76 { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, |
| 77 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 78 { 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' }, |
| 79 { 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' }, |
| 80 { 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' } |
| 81 ]); |
| 82 |
| 83 setItemSize('item', '120px', '30px'); |
| 84 testGridDefinitions([ |
| 85 { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, |
| 86 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 87 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 88 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, |
| 89 { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } |
| 90 ]); |
| 91 |
| 92 var grid = document.getElementById('grid1'); |
| 93 grid.className = grid.className.replace('max-content', 'min-content'); |
| 94 |
| 95 setItemSize('item', '100px', '30px'); |
| 96 testGridDefinitions([ |
| 97 { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, |
| 98 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 99 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 100 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, |
| 101 { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } |
| 102 ]); |
| 103 |
| 104 setItemSize('item', '80px', '30px'); |
| 105 testGridDefinitions([ |
| 106 { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, |
| 107 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 108 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 109 { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, |
| 110 { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } |
| 111 ]); |
| 112 |
| 113 setItemSize('item', '15px', '30px'); |
| 114 testGridDefinitions([ |
| 115 { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, |
| 116 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 117 { 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' }, |
| 118 { 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' }, |
| 119 { 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' } |
| 120 ]); |
| 121 |
| 122 setItemSize('item', '120px', '30px'); |
| 123 testGridDefinitions([ |
| 124 { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, |
| 125 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, |
| 126 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, |
| 127 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, |
| 128 { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } |
| 129 ]); |
| 130 } |
| 131 |
| 132 window.addEventListener("load", testChangingGridDefinitions, false); |
| 133 </script> |
| 134 |
| 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> |
| 136 <div id="log"></div> |
| 137 |
| 138 <div id="grid1" class="grid max-content"> |
| 139 <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> |
| 141 <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> |
| 143 <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></
div> |
| 144 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2287533002:
[css-grid] Remove a duplicated auto repeat computation for intrinsic sizes (Closed)
