absolute-positioning-grid-container-containing-block-001.html (15488B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning grid container containing block</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> 6 <meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as containing block."> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <style> 10 11 .grid { 12 grid-template-columns: 50px 100px 150px 200px; 13 grid-template-rows: 50px 100px 150px 200px; 14 width: 500px; 15 height: 500px; 16 border: 5px solid black; 17 margin: 30px; 18 padding: 15px; 19 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 20 position: relative; 21 } 22 23 .absolute { 24 position: absolute; 25 } 26 27 .thirdRowThirdColumnSpanning2Rows { 28 grid-column: 3; 29 grid-row: 3 / span 2; 30 background-color: maroon; 31 } 32 33 .thirdRowThirdColumnSpanning2Rows2Columns { 34 grid-column: 3 / span 2; 35 grid-row: 3 / span 2; 36 background-color: aqua; 37 } 38 39 .endFirstRowEndFirstColumn { 40 background-color: blue; 41 grid-column-end: 2; 42 grid-row-end: 2; 43 } 44 45 .endFirstRowEndSecondColumn { 46 background-color: lime; 47 grid-column-end: 3; 48 grid-row-end: 2; 49 } 50 51 .endSecondRowEndFirstColumn { 52 background-color: purple; 53 grid-column-end: 2; 54 grid-row-end: 3; 55 } 56 57 .endThirdRowEndThirdColumnSpanning2Rows { 58 grid-column-end: 4; 59 grid-row: span 2 / 4; 60 background-color: maroon; 61 } 62 63 .endThirdRowEndThirdColumnSpanning2Rows2Columns { 64 grid-column: span 2 / 4; 65 grid-row: span 2 / 4; 66 background-color: aqua; 67 } 68 69 .onlyThirdRowOnlyThirdColumnSpanning2Rows { 70 grid-column: 3 / 4; 71 grid-row: 3 / 5; 72 background-color: maroon; 73 } 74 75 .onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns { 76 grid-column: 3 / 5; 77 grid-row: 3 / 5; 78 background-color: aqua; 79 } 80 81 .offsetLeft25 { 82 left: 25px; 83 } 84 85 .offsetRight50 { 86 right: 50px; 87 } 88 89 .offsetTop75 { 90 top: 75px; 91 } 92 93 .offsetBottom100 { 94 bottom: 100px; 95 } 96 97 .offsetLeftMinus20 { 98 left: -20px; 99 } 100 101 .offsetRightMinus40 { 102 right: -40px; 103 } 104 105 .offsetTopMinus60 { 106 top: -60px; 107 } 108 109 .offsetBottomMinus80 { 110 bottom: -80px; 111 } 112 113 </style> 114 <script src="/resources/testharness.js"></script> 115 <script src="/resources/testharnessreport.js"></script> 116 <script src="/resources/check-layout-th.js"></script> 117 <script type="text/javascript"> 118 setup({ explicit_done: true }); 119 </script> 120 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 121 122 <div id="log"></div> 123 124 <div class="grid"> 125 <div class="sizedToGridArea absolute autoRowAutoColumn" 126 data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530"> 127 </div> 128 <div class="sizedToGridArea absolute firstRowFirstColumn" 129 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515"> 130 </div> 131 <div class="sizedToGridArea absolute secondRowFirstColumn" 132 data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465"> 133 </div> 134 <div class="sizedToGridArea absolute firstRowSecondColumn" 135 data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515"> 136 </div> 137 <div class="sizedToGridArea absolute secondRowSecondColumn" 138 data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465"> 139 </div> 140 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" 141 data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350"> 142 </div> 143 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns" 144 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350"> 145 </div> 146 </div> 147 148 <div class="grid"> 149 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" 150 data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250"> 151 </div> 152 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns" 153 data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250"> 154 </div> 155 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 156 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165"> 157 </div> 158 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" 159 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165"> 160 </div> 161 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" 162 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65"> 163 </div> 164 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" 165 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65"> 166 </div> 167 </div> 168 169 <div class="grid"> 170 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" 171 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50"> 172 </div> 173 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" 174 data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100"> 175 </div> 176 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" 177 data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50"> 178 </div> 179 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 180 data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100"> 181 </div> 182 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns" 183 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350"> 184 </div> 185 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows" 186 data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350"> 187 </div> 188 </div> 189 190 <div class="grid"> 191 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" 192 data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> 193 </div> 194 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" 195 data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515"> 196 </div> 197 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" 198 data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> 199 </div> 200 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" 201 data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> 202 </div> 203 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" 204 data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465"> 205 </div> 206 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" 207 data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350"> 208 </div> 209 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 210 data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350"> 211 </div> 212 </div> 213 214 <div class="grid"> 215 <div> 216 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" 217 data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> 218 </div> 219 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" 220 data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515"> 221 </div> 222 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" 223 data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> 224 </div> 225 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" 226 data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> 227 </div> 228 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" 229 data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465"> 230 </div> 231 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" 232 data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350"> 233 </div> 234 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 235 data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350"> 236 </div> 237 </div> 238 </div> 239 240 <div class="grid directionRTL"> 241 <div class="sizedToGridArea absolute autoRowAutoColumn" 242 data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530"> 243 </div> 244 <div class="sizedToGridArea absolute firstRowFirstColumn" 245 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="515"> 246 </div> 247 <div class="sizedToGridArea absolute secondRowFirstColumn" 248 data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expected-height="465"> 249 </div> 250 <div class="sizedToGridArea absolute firstRowSecondColumn" 251 data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expected-height="515"> 252 </div> 253 <div class="sizedToGridArea absolute secondRowSecondColumn" 254 data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expected-height="465"> 255 </div> 256 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" 257 data-offset-x="0" data-offset-y="165" data-expected-width="365" data-expected-height="350"> 258 </div> 259 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns" 260 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350"> 261 </div> 262 </div> 263 264 <div class="grid directionRTL"> 265 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" 266 data-offset-x="215" data-offset-y="65" data-expected-width="315" data-expected-height="250"> 267 </div> 268 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns" 269 data-offset-x="215" data-offset-y="65" data-expected-width="250" data-expected-height="250"> 270 </div> 271 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 272 data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="165"> 273 </div> 274 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" 275 data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="165"> 276 </div> 277 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" 278 data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="65"> 279 </div> 280 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" 281 data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="65"> 282 </div> 283 </div> 284 285 <div class="grid directionRTL"> 286 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" 287 data-offset-x="465" data-offset-y="15" data-expected-width="50" data-expected-height="50"> 288 </div> 289 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" 290 data-offset-x="465" data-offset-y="65" data-expected-width="50" data-expected-height="100"> 291 </div> 292 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" 293 data-offset-x="365" data-offset-y="15" data-expected-width="100" data-expected-height="50"> 294 </div> 295 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 296 data-offset-x="365" data-offset-y="65" data-expected-width="100" data-expected-height="100"> 297 </div> 298 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns" 299 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350"> 300 </div> 301 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows" 302 data-offset-x="215" data-offset-y="165" data-expected-width="150" data-expected-height="350"> 303 </div> 304 </div> 305 306 <div class="grid directionRTL"> 307 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" 308 data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> 309 </div> 310 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" 311 data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515"> 312 </div> 313 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" 314 data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> 315 </div> 316 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" 317 data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> 318 </div> 319 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" 320 data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465"> 321 </div> 322 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" 323 data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350"> 324 </div> 325 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 326 data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350"> 327 </div> 328 </div> 329 330 <div class="grid directionRTL"> 331 <div> 332 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" 333 data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> 334 </div> 335 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" 336 data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515"> 337 </div> 338 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" 339 data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> 340 </div> 341 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" 342 data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> 343 </div> 344 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" 345 data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465"> 346 </div> 347 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" 348 data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350"> 349 </div> 350 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 351 data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350"> 352 </div> 353 </div> 354 </div> 355 356 </body>