grid-positioned-items-content-alignment-rtl-001.html (14819B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items content alignment RTL</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 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties"> 7 <meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment in RTL."> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <link rel="stylesheet" href="../../support/alignment.css"> 10 <style> 11 12 .grid { 13 grid-template-columns: 100px 50px; 14 grid-template-rows: 70px 30px; 15 width: 400px; 16 height: 200px; 17 margin: 5px; 18 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 19 position: relative; 20 } 21 22 .grid > div { 23 position: absolute; 24 width: 100%; 25 height: 100%; 26 background-color: lime; 27 } 28 29 .offsets { 30 left: 0; 31 top: 0; 32 } 33 34 </style> 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="/resources/check-layout-th.js"></script> 38 39 <body onload="checkLayout('.grid')"> 40 41 <div id="log"></div> 42 43 <div class="grid directionRTL contentStart"> 44 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 45 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 46 </div> 47 </div> 48 49 <div class="grid directionRTL contentStart"> 50 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 51 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 52 </div> 53 </div> 54 55 <div class="grid directionRTL contentCenter"> 56 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 57 data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70"> 58 </div> 59 </div> 60 61 <div class="grid directionRTL contentCenter"> 62 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 63 data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70"> 64 </div> 65 </div> 66 67 <div class="grid directionRTL contentEnd"> 68 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 69 data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70"> 70 </div> 71 </div> 72 73 <div class="grid directionRTL contentEnd"> 74 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 75 data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70"> 76 </div> 77 </div> 78 79 <div class="grid directionRTL contentSpaceBetween"> 80 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 81 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 82 </div> 83 </div> 84 85 <div class="grid directionRTL contentSpaceBetween"> 86 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 87 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 88 </div> 89 </div> 90 91 <div class="grid directionRTL contentSpaceAround"> 92 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 93 data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70"> 94 </div> 95 </div> 96 97 <div class="grid directionRTL contentSpaceAround"> 98 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 99 data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70"> 100 </div> 101 </div> 102 103 <div class="grid directionRTL contentSpaceEvenly"> 104 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" 105 data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70"> 106 </div> 107 </div> 108 109 <div class="grid directionRTL contentSpaceEvenly"> 110 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" 111 data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70"> 112 </div> 113 </div> 114 115 <div class="grid directionRTL contentStart"> 116 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 117 data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30"> 118 </div> 119 </div> 120 121 <div class="grid directionRTL contentStart"> 122 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 123 data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30"> 124 </div> 125 </div> 126 127 <div class="grid directionRTL contentCenter"> 128 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 129 data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30"> 130 </div> 131 </div> 132 133 <div class="grid directionRTL contentCenter"> 134 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 135 data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30"> 136 </div> 137 </div> 138 139 <div class="grid directionRTL contentEnd"> 140 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 141 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 142 </div> 143 </div> 144 145 <div class="grid directionRTL contentEnd"> 146 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 147 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 148 </div> 149 </div> 150 151 <div class="grid directionRTL contentSpaceBetween"> 152 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 153 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 154 </div> 155 </div> 156 157 <div class="grid directionRTL contentSpaceBetween"> 158 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 159 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 160 </div> 161 </div> 162 163 <div class="grid directionRTL contentSpaceAround"> 164 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 165 data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30"> 166 </div> 167 </div> 168 169 <div class="grid directionRTL contentSpaceAround"> 170 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 171 data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30"> 172 </div> 173 </div> 174 175 <div class="grid directionRTL contentSpaceEvenly"> 176 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" 177 data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30"> 178 </div> 179 </div> 180 181 <div class="grid directionRTL contentSpaceEvenly"> 182 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" 183 data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30"> 184 </div> 185 </div> 186 187 <div class="grid directionRTL contentStart"> 188 <div style="grid-column: auto / 2; grid-row: auto / 2;" 189 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 190 </div> 191 </div> 192 193 <div class="grid directionRTL contentStart"> 194 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 195 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 196 </div> 197 </div> 198 199 <div class="grid directionRTL contentCenter"> 200 <div style="grid-column: auto / 2; grid-row: auto / 2;" 201 data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120"> 202 </div> 203 </div> 204 205 <div class="grid directionRTL contentCenter"> 206 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 207 data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120"> 208 </div> 209 </div> 210 211 <div class="grid directionRTL contentEnd"> 212 <div style="grid-column: auto / 2; grid-row: auto / 2;" 213 data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170"> 214 </div> 215 </div> 216 217 <div class="grid directionRTL contentEnd"> 218 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 219 data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170"> 220 </div> 221 </div> 222 223 <div class="grid directionRTL contentSpaceBetween"> 224 <div style="grid-column: auto / 2; grid-row: auto / 2;" 225 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 226 </div> 227 </div> 228 229 <div class="grid directionRTL contentSpaceBetween"> 230 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 231 data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> 232 </div> 233 </div> 234 235 <div class="grid directionRTL contentSpaceAround"> 236 <div style="grid-column: auto / 2; grid-row: auto / 2;" 237 data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95"> 238 </div> 239 </div> 240 241 <div class="grid directionRTL contentSpaceAround"> 242 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 243 data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95"> 244 </div> 245 </div> 246 247 <div class="grid directionRTL contentSpaceEvenly"> 248 <div style="grid-column: auto / 2; grid-row: auto / 2;" 249 data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103"> 250 </div> 251 </div> 252 253 <div class="grid directionRTL contentSpaceEvenly"> 254 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" 255 data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103"> 256 </div> 257 </div> 258 259 <div class="grid directionRTL contentStart"> 260 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 261 data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130"> 262 </div> 263 </div> 264 265 <div class="grid directionRTL contentStart"> 266 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 267 data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130"> 268 </div> 269 </div> 270 271 <div class="grid directionRTL contentCenter"> 272 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 273 data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80"> 274 </div> 275 </div> 276 277 <div class="grid directionRTL contentCenter"> 278 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 279 data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80"> 280 </div> 281 </div> 282 283 <div class="grid directionRTL contentEnd"> 284 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 285 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 286 </div> 287 </div> 288 289 <div class="grid directionRTL contentEnd"> 290 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 291 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 292 </div> 293 </div> 294 295 <div class="grid directionRTL contentSpaceBetween"> 296 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 297 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 298 </div> 299 </div> 300 301 <div class="grid directionRTL contentSpaceBetween"> 302 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 303 data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> 304 </div> 305 </div> 306 307 <div class="grid directionRTL contentSpaceAround"> 308 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 309 data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55"> 310 </div> 311 </div> 312 313 <div class="grid directionRTL contentSpaceAround"> 314 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 315 data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55"> 316 </div> 317 </div> 318 319 <div class="grid directionRTL contentSpaceEvenly"> 320 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" 321 data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63"> 322 </div> 323 </div> 324 325 <div class="grid directionRTL contentSpaceEvenly"> 326 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" 327 data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63"> 328 </div> 329 </div> 330 331 <div class="grid directionRTL contentStart"> 332 <div style="grid-column: auto / auto; grid-row: auto / auto;" 333 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 334 </div> 335 </div> 336 337 <div class="grid directionRTL contentStart"> 338 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 339 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 340 </div> 341 </div> 342 343 <div class="grid directionRTL contentCenter"> 344 <div style="grid-column: auto / auto; grid-row: auto / auto;" 345 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 346 </div> 347 </div> 348 349 <div class="grid directionRTL contentCenter"> 350 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 351 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 352 </div> 353 </div> 354 355 <div class="grid directionRTL contentEnd"> 356 <div style="grid-column: auto / auto; grid-row: auto / auto;" 357 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 358 </div> 359 </div> 360 361 <div class="grid directionRTL contentEnd"> 362 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 363 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 364 </div> 365 </div> 366 367 <div class="grid directionRTL contentSpaceBetween"> 368 <div style="grid-column: auto / auto; grid-row: auto / auto;" 369 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 370 </div> 371 </div> 372 373 <div class="grid directionRTL contentSpaceBetween"> 374 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 375 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 376 </div> 377 </div> 378 379 <div class="grid directionRTL contentSpaceAround"> 380 <div style="grid-column: auto / auto; grid-row: auto / auto;" 381 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 382 </div> 383 </div> 384 385 <div class="grid directionRTL contentSpaceAround"> 386 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 387 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 388 </div> 389 </div> 390 391 <div class="grid directionRTL contentSpaceEvenly"> 392 <div style="grid-column: auto / auto; grid-row: auto / auto;" 393 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 394 </div> 395 </div> 396 397 <div class="grid directionRTL contentSpaceEvenly"> 398 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" 399 data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> 400 </div> 401 </div> 402 403 </body>