grid-change-intrinsic-size-with-auto-repeat-tracks-001.html (6672B)
1 <!DOCTYPE html> 2 <title>CSS Grid: auto-repeat tracks and intrinsic sizes.</title> 3 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/> 5 <meta name="assert" content="Test ensure that grids properly recompute the number of auto repeat tracks when the min|max-content contributions of grid items changed."/> 6 <link rel="issue" href="https://crbug.com/621517"/> 7 <link rel="issue" href="https://crbug.com/633474"/> 8 <link href="/css/support/grid.css" rel="stylesheet"/> 9 <link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> 10 <style> 11 .grid { 12 border: 2px solid black; 13 position: relative; 14 min-width: 30px; 15 16 grid-auto-columns: 20px; 17 18 padding-top: 10px; 19 margin-bottom: 10px; 20 } 21 22 .abs { height: 5px; position: absolute; width: 100%; } 23 24 </style> 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="/resources/check-layout-th.js"></script> 28 <script> 29 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) 30 { 31 var gridElement = document.getElementById(id); 32 gridElement.style.gridTemplateRows = gridTemplateRows; 33 gridElement.style.gridTemplateColumns = gridTemplateColumns; 34 } 35 36 function setItemSize(id, width, height) 37 { 38 var gridElement = document.getElementById(id); 39 gridElement.style.width = width; 40 gridElement.style.height = height; 41 } 42 43 function testGridDefinitions(gridItemsData) 44 { 45 var length = gridItemsData.length; 46 for (i = 0; i < length; ++i) { 47 var item = document.getElementById(gridItemsData[i].id); 48 item.setAttribute("data-expected-width", gridItemsData[i].width); 49 item.setAttribute("data-expected-height", gridItemsData[i].height); 50 item.setAttribute("data-offset-x", gridItemsData[i].x); 51 item.setAttribute("data-offset-y", gridItemsData[i].y); 52 } 53 54 checkLayout(".grid", false); 55 } 56 57 function testChangingGridDefinitions() 58 { 59 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-content, 40px)'); 60 61 setItemSize('item', '100px', '30px'); 62 testGridDefinitions([ 63 { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, 64 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 65 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 66 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, 67 { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } 68 ]); 69 70 setItemSize('item', '80px', '30px'); 71 testGridDefinitions([ 72 { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, 73 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 74 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 75 { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, 76 { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } 77 ]); 78 79 setItemSize('item', '15px', '30px'); 80 testGridDefinitions([ 81 { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, 82 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 83 { 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' }, 84 { 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' }, 85 { 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' } 86 ]); 87 88 setItemSize('item', '120px', '30px'); 89 testGridDefinitions([ 90 { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, 91 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 92 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 93 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, 94 { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } 95 ]); 96 97 var grid = document.getElementById('grid1'); 98 grid.className = grid.className.replace('max-content', 'min-content'); 99 100 setItemSize('item', '100px', '30px'); 101 testGridDefinitions([ 102 { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, 103 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 104 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 105 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, 106 { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } 107 ]); 108 109 setItemSize('item', '80px', '30px'); 110 testGridDefinitions([ 111 { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, 112 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 113 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 114 { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, 115 { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } 116 ]); 117 118 setItemSize('item', '15px', '30px'); 119 testGridDefinitions([ 120 { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, 121 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 122 { 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' }, 123 { 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' }, 124 { 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' } 125 ]); 126 127 setItemSize('item', '120px', '30px'); 128 testGridDefinitions([ 129 { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, 130 { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, 131 { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, 132 { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, 133 { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } 134 ]); 135 136 done(); 137 } 138 139 window.addEventListener("load", testChangingGridDefinitions, false); 140 </script> 141 142 <div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div> 143 <div id="log"></div> 144 145 <div id="grid1" class="grid max-content"> 146 <div id="item" style="grid-column: 1 / -1; background: cyan;"></div> 147 <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div> 148 <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div> 149 <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div> 150 <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div> 151 </div>