grid-inline-template-columns-rows-resolved-values-001.tentative.html (14020B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4475"> 7 <meta name="flags" content="ahem dom"> 8 <meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks in an inline grid."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="support/testing-utils.js"></script> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 .inline-grid { 15 display: inline-grid; 16 width: 800px; 17 height: 600px; 18 font: 10px/1 Ahem; 19 justify-content: start; 20 align-content: start; 21 position: relative; 22 } 23 24 .fifthColumn { 25 grid-column: 5; 26 } 27 28 .fourthRow { 29 grid-row: 4; 30 } 31 32 .gridAutoFlowColumn { 33 grid-auto-flow: column; 34 } 35 </style> 36 <div id="log"></div> 37 38 <div id="grid" class="inline-grid"> 39 <div>FIRST ITEM</div> 40 <div>SECOND ITEM</div> 41 <div>THIRD<br />ITEM</div> 42 </div> 43 44 <div id="gridItemsPositions" class="inline-grid"> 45 <div class="fifthColumn">FIRST ITEM</div> 46 <div class="fourthRow">SECOND ITEM</div> 47 <div>THIRD<br />ITEM</div> 48 </div> 49 50 <div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn"> 51 <div>FIRST ITEM</div> 52 <div>SECOND ITEM</div> 53 <div>THIRD<br />ITEM</div> 54 </div> 55 56 <div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn"> 57 <div class="fifthColumn">FIRST ITEM</div> 58 <div class="fourthRow">SECOND ITEM</div> 59 <div>THIRD<br />ITEM</div> 60 </div> 61 62 <script> 63 function testSizeAndPositionOfItems(gridId, expectedItemData) { 64 let grid = document.getElementById(gridId); 65 assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount"); 66 let props = ["offsetWidth", "offsetTop", "offsetHeight"]; 67 for (let i = 0; i < expectedItemData.length; ++i) 68 for (let prop of props) 69 assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop); 70 } 71 72 function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) { 73 TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue); 74 test(function() { 75 testSizeAndPositionOfItems(gridId, expectedItemData); 76 }, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); 77 } 78 79 setup({explicit_done: true}); 80 document.fonts.ready.then(()=> { 81 // Valid values. 82 testGrid("grid", "", "", "none", "none", [ 83 {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, 84 {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10}, 85 {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20}, 86 ]); 87 testGrid("grid", "auto auto", "", "100px 110px", "none", [ 88 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, 89 {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, 90 {offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20}, 91 ]); 92 testGrid("grid", "60px", "", "60px", "none", [ 93 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, 94 {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, 95 {offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20}, 96 ]); 97 testGrid("grid", "100px 60px", "", "100px 60px", "none", [ 98 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 99 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, 100 {offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20}, 101 ]); 102 testGrid("grid", "", "50px", "none", "50px", [ 103 {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, 104 {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10}, 105 {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, 106 ]); 107 testGrid("grid", "", "50px 30px", "none", "50px 30px", [ 108 {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, 109 {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, 110 {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20}, 111 ]); 112 testGrid("grid", "60px", "50px", "60px", "50px", [ 113 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 114 {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20}, 115 {offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20}, 116 ]); 117 testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [ 118 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 119 {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, 120 {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, 121 ]); 122 testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [ 123 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, 124 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 125 {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20}, 126 ]); 127 testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ 128 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, 129 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 130 {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, 131 ]); 132 133 testGrid("gridItemsPositions", "", "", "none", "none", [ 134 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, 135 {offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10}, 136 {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20}, 137 ]); 138 testGrid("gridItemsPositions", "60px", "", "60px", "none", [ 139 {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, 140 {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, 141 {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, 142 ]); 143 testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [ 144 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, 145 {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, 146 {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, 147 ]); 148 testGrid("gridItemsPositions", "", "60px", "none", "60px", [ 149 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 150 {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10}, 151 {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, 152 ]); 153 testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [ 154 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 155 {offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10}, 156 {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50}, 157 ]); 158 testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [ 159 {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 160 {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, 161 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, 162 ]); 163 testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [ 164 {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 165 {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, 166 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, 167 ]); 168 testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [ 169 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 170 {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, 171 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, 172 ]); 173 testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [ 174 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 175 {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, 176 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, 177 ]); 178 179 testGrid("gridAutoFlowColumn", "", "", "none", "none", [ 180 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 181 {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, 182 {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 183 ]); 184 testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [ 185 {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, 186 {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, 187 {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 188 ]); 189 testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [ 190 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, 191 {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, 192 {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 193 ]); 194 testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [ 195 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 196 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, 197 {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 198 ]); 199 testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [ 200 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, 201 {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, 202 {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, 203 ]); 204 testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [ 205 {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, 206 {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, 207 {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, 208 ]); 209 testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [ 210 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 211 {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, 212 {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, 213 ]); 214 testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [ 215 {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 216 {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, 217 {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, 218 ]); 219 testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [ 220 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, 221 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 222 {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, 223 ]); 224 testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ 225 {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, 226 {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, 227 {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, 228 ]); 229 230 testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [ 231 {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 232 {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, 233 {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 234 ]); 235 testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [ 236 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 237 {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, 238 {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, 239 ]); 240 testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [ 241 {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, 242 {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, 243 {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20}, 244 ]); 245 testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [ 246 {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 247 {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10}, 248 {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, 249 ]); 250 testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [ 251 {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 252 {offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10}, 253 {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, 254 ]); 255 testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [ 256 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 257 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, 258 {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, 259 ]); 260 testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [ 261 {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 262 {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, 263 {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, 264 ]); 265 testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [ 266 {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 267 {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, 268 {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, 269 ]); 270 testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [ 271 {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, 272 {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, 273 {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, 274 ]); 275 done(); 276 }); 277 </script>