grid-change-auto-repeat-tracks.html (7073B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> 6 <meta name="assert" content="This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items."> 7 8 <link href="/css/support/grid.css" rel="stylesheet"> 9 <style> 10 .grid { 11 grid-auto-rows: 25px; 12 grid-auto-columns: 25px; 13 margin-bottom: 10px; 14 } 15 .fixedWidth { 16 width: 50px; 17 grid-auto-flow: row; 18 grid-template-columns: repeat(auto-fill, 25px); 19 } 20 .fixedHeight { 21 width: 100px; 22 height: 50px; 23 grid-auto-flow: column; 24 grid-template-rows: repeat(auto-fill, 25px); 25 } 26 #i1-1, #i2-1 { 27 grid-row: auto; 28 grid-column: 1; 29 background-color: orange; 30 } 31 #i1-2, #i2-2 { 32 grid-row: 1; 33 grid-column: auto; 34 background-color: green; 35 } 36 #i1-3, #i2-3 { 37 grid-row: auto; 38 grid-column: auto; 39 background-color: blue; 40 } 41 </style> 42 43 <div id="log"></div> 44 45 <div style="position: relative"> 46 <div id="grid1" class="grid fixedWidth"> 47 <div id="i1-1"></div> 48 <div id="i1-2"></div> 49 <div id="i1-3"></div> 50 </div> 51 </div> 52 <div style="position: relative"> 53 <div id="grid2" class="grid fixedHeight"> 54 <div id="i2-1"></div> 55 <div id="i2-2"></div> 56 <div id="i2-3"></div> 57 </div> 58 </div> 59 60 <script src="/resources/testharness.js"></script> 61 <script src="/resources/testharnessreport.js"></script> 62 <script src="/resources/check-layout-th.js"></script> 63 <script> 64 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) { 65 let gridElement = document.getElementById(id); 66 gridElement.style.gridTemplateRows = gridTemplateRows; 67 gridElement.style.gridTemplateColumns = gridTemplateColumns; 68 } 69 70 function setGridSize(id, width, height) { 71 let gridElement = document.getElementById(id); 72 gridElement.style.width = width; 73 gridElement.style.height = height; 74 } 75 76 function setGridItemPlacement(id, gridRow, gridColumn) { 77 let gridItem = document.getElementById(id); 78 gridItem.style.gridRow = gridRow; 79 gridItem.style.gridColumn = gridColumn; 80 } 81 82 function testGridDefinitions(...gridItemDataList) { 83 for (let gridItemData of gridItemDataList) { 84 let gridItem = document.getElementById(gridItemData.id); 85 gridItem.setAttribute("data-expected-width", gridItemData.width); 86 gridItem.setAttribute("data-expected-height", gridItemData.height); 87 gridItem.setAttribute("data-offset-x", gridItemData.x); 88 gridItem.setAttribute("data-offset-y", gridItemData.y); 89 } 90 checkLayout(".grid", false); 91 } 92 93 // Test changing the number of auto-repeat tracks. 94 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)'); 95 setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none'); 96 testGridDefinitions( 97 { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' }, 98 { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' }, 99 { id: 'i1-3', width: '25', height: '25', x: '25', y: '25' }, 100 { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' }, 101 { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' }, 102 { id: 'i2-3', width: '25', height: '25', x: '25', y: '25' }); 103 104 setGridTemplate('grid1', 'none', 'none'); 105 setGridTemplate('grid2', 'none', 'none'); 106 testGridDefinitions( 107 { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' }, 108 { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' }, 109 { id: 'i1-3', width: '25', height: '25', x: '0', y: '50' }, 110 { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' }, 111 { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' }, 112 { id: 'i2-3', width: '25', height: '25', x: '50', y: '0' }); 113 114 setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)'); 115 setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none'); 116 testGridDefinitions( 117 { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' }, 118 { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' }, 119 { id: 'i1-3', width: '20', height: '25', x: '5', y: '25' }, 120 { id: 'i2-1', width: '25', height: '20', x: '0', y: '0' }, 121 { id: 'i2-2', width: '25', height: '20', x: '25', y: '0' }, 122 { id: 'i2-3', width: '25', height: '20', x: '25', y: '20' }); 123 124 setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)'); 125 setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none'); 126 testGridDefinitions( 127 { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' }, 128 { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' }, 129 { id: 'i1-3', width: '22', height: '25', x: '5', y: '25' }, 130 { id: 'i2-1', width: '25', height: '18', x: '0', y: '0' }, 131 { id: 'i2-2', width: '25', height: '18', x: '25', y: '0' }, 132 { id: 'i2-3', width: '25', height: '18', x: '25', y: '18' }); 133 134 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)'); 135 setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none'); 136 testGridDefinitions( 137 { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, 138 { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, 139 { id: 'i1-3', width: '45', height: '25', x: '0', y: '50' }, 140 { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, 141 { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, 142 { id: 'i2-3', width: '25', height: '45', x: '50', y: '0' }); 143 144 // Test changing the size of the grid. 145 setGridSize('grid1', '100px', 'auto'); 146 setGridSize('grid2', '100px', '100px'); 147 testGridDefinitions( 148 { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, 149 { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, 150 { id: 'i1-3', width: '45', height: '25', x: '45', y: '25' }, 151 { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, 152 { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, 153 { id: 'i2-3', width: '25', height: '45', x: '25', y: '45' }); 154 155 // Move the third item so that there is an empty track between it and the others. 156 setGridItemPlacement('i1-3', 'auto', '3'); 157 setGridItemPlacement('i2-3', '3', 'auto'); 158 testGridDefinitions( 159 { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, 160 { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, 161 { id: 'i1-3', width: '25', height: '25', x: '90', y: '25' }, 162 { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, 163 { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, 164 { id: 'i2-3', width: '25', height: '25', x: '25', y: '90' }); 165 166 // Set the same templates, but using auto-fit instead of auto-fill. The empty track should collapse. 167 setGridTemplate('grid1', 'none', 'repeat(auto-fit, 45px)'); 168 setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none'); 169 testGridDefinitions( 170 { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, 171 { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, 172 { id: 'i1-3', width: '25', height: '25', x: '45', y: '25' }, 173 { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, 174 { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, 175 { id: 'i2-3', width: '25', height: '25', x: '25', y: '45' }); 176 177 done(); 178 </script>