abs-pos-border-offset-002.html (8835B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"> 6 <meta name="assert" content="This test checks that absolutely positioned elements are offset correctly in a bordered containing block, in different combinations of sideways writing modes and directions." /> 7 <link rel="match" href="abs-pos-border-offset-002-ref.html"> 8 <style> 9 body { margin: 0; } 10 .cb { 11 position: relative; 12 inline-size: 45px; 13 block-size: 40px; 14 background: lightblue; 15 border: solid gray; 16 border-width: 1px 2px 3px 4px; 17 float: left; 18 margin-right: 5px; 19 } 20 .parent { 21 inline-size: 35px; 22 block-size: 30px; 23 background: orange; 24 } 25 .abspos { 26 position: absolute; 27 inline-size: 20px; 28 block-size: 15px; 29 background: pink; 30 } 31 32 .srl { 33 writing-mode: sideways-rl; 34 } 35 .slr { 36 writing-mode: sideways-lr; 37 } 38 .vrl { 39 writing-mode: vertical-rl; 40 } 41 .vlr { 42 writing-mode: vertical-lr; 43 } 44 .htb { 45 writing-mode: horizontal-tb; 46 } 47 48 .ltr { 49 direction: ltr; 50 } 51 .rtl { 52 direction: rtl; 53 } 54 55 .sep { 56 clear: both; 57 display: block; 58 height: 5px; 59 } 60 </style> 61 <body> 62 <div class="cb htb ltr"> 63 <div class="parent slr ltr"> 64 <div class="abspos"></div> 65 </div> 66 </div> 67 <div class="cb htb ltr"> 68 <div class="parent slr rtl"> 69 <div class="abspos"></div> 70 </div> 71 </div> 72 <div class="cb htb ltr"> 73 <div class="parent srl ltr"> 74 <div class="abspos"></div> 75 </div> 76 </div> 77 <div class="cb htb ltr"> 78 <div class="parent srl rtl"> 79 <div class="abspos"></div> 80 </div> 81 </div> 82 <div class="sep"></div> 83 84 <div class="cb htb rtl"> 85 <div class="parent slr ltr"> 86 <div class="abspos"></div> 87 </div> 88 </div> 89 <div class="cb htb rtl"> 90 <div class="parent slr rtl"> 91 <div class="abspos"></div> 92 </div> 93 </div> 94 <div class="cb htb rtl"> 95 <div class="parent srl ltr"> 96 <div class="abspos"></div> 97 </div> 98 </div> 99 <div class="cb htb rtl"> 100 <div class="parent srl rtl"> 101 <div class="abspos"></div> 102 </div> 103 </div> 104 <div class="sep"></div> 105 106 <div class="cb vlr ltr"> 107 <div class="parent slr ltr"> 108 <div class="abspos"></div> 109 </div> 110 </div> 111 <div class="cb vlr ltr"> 112 <div class="parent slr rtl"> 113 <div class="abspos"></div> 114 </div> 115 </div> 116 <div class="cb vlr ltr"> 117 <div class="parent srl ltr"> 118 <div class="abspos"></div> 119 </div> 120 </div> 121 <div class="cb vlr ltr"> 122 <div class="parent srl rtl"> 123 <div class="abspos"></div> 124 </div> 125 </div> 126 <div class="sep"></div> 127 128 <div class="cb vlr rtl"> 129 <div class="parent slr ltr"> 130 <div class="abspos"></div> 131 </div> 132 </div> 133 <div class="cb vlr rtl"> 134 <div class="parent slr rtl"> 135 <div class="abspos"></div> 136 </div> 137 </div> 138 <div class="cb vlr rtl"> 139 <div class="parent srl ltr"> 140 <div class="abspos"></div> 141 </div> 142 </div> 143 <div class="cb vlr rtl"> 144 <div class="parent srl rtl"> 145 <div class="abspos"></div> 146 </div> 147 </div> 148 <div class="sep"></div> 149 150 <div class="cb vrl ltr"> 151 <div class="parent slr ltr"> 152 <div class="abspos"></div> 153 </div> 154 </div> 155 <div class="cb vrl ltr"> 156 <div class="parent slr rtl"> 157 <div class="abspos"></div> 158 </div> 159 </div> 160 <div class="cb vrl ltr"> 161 <div class="parent srl ltr"> 162 <div class="abspos"></div> 163 </div> 164 </div> 165 <div class="cb vrl ltr"> 166 <div class="parent srl rtl"> 167 <div class="abspos"></div> 168 </div> 169 </div> 170 <div class="sep"></div> 171 172 <div class="cb vrl rtl"> 173 <div class="parent slr ltr"> 174 <div class="abspos"></div> 175 </div> 176 </div> 177 <div class="cb vrl rtl"> 178 <div class="parent slr rtl"> 179 <div class="abspos"></div> 180 </div> 181 </div> 182 <div class="cb vrl rtl"> 183 <div class="parent srl ltr"> 184 <div class="abspos"></div> 185 </div> 186 </div> 187 <div class="cb vrl rtl"> 188 <div class="parent srl rtl"> 189 <div class="abspos"></div> 190 </div> 191 </div> 192 <div class="sep"></div> 193 194 <div class="cb slr ltr"> 195 <div class="parent htb ltr"> 196 <div class="abspos"></div> 197 </div> 198 </div> 199 <div class="cb slr ltr"> 200 <div class="parent htb rtl"> 201 <div class="abspos"></div> 202 </div> 203 </div> 204 <div class="cb slr ltr"> 205 <div class="parent vlr ltr"> 206 <div class="abspos"></div> 207 </div> 208 </div> 209 <div class="cb slr ltr"> 210 <div class="parent vlr rtl"> 211 <div class="abspos"></div> 212 </div> 213 </div> 214 <div class="cb slr ltr"> 215 <div class="parent vrl ltr"> 216 <div class="abspos"></div> 217 </div> 218 </div> 219 <div class="cb slr ltr"> 220 <div class="parent vrl rtl"> 221 <div class="abspos"></div> 222 </div> 223 </div> 224 <div class="cb slr ltr"> 225 <div class="parent slr ltr"> 226 <div class="abspos"></div> 227 </div> 228 </div> 229 <div class="cb slr ltr"> 230 <div class="parent slr rtl"> 231 <div class="abspos"></div> 232 </div> 233 </div> 234 <div class="cb slr ltr"> 235 <div class="parent srl ltr"> 236 <div class="abspos"></div> 237 </div> 238 </div> 239 <div class="cb slr ltr"> 240 <div class="parent srl rtl"> 241 <div class="abspos"></div> 242 </div> 243 </div> 244 <div class="sep"></div> 245 246 <div class="cb slr rtl"> 247 <div class="parent htb ltr"> 248 <div class="abspos"></div> 249 </div> 250 </div> 251 <div class="cb slr rtl"> 252 <div class="parent htb rtl"> 253 <div class="abspos"></div> 254 </div> 255 </div> 256 <div class="cb slr rtl"> 257 <div class="parent vlr ltr"> 258 <div class="abspos"></div> 259 </div> 260 </div> 261 <div class="cb slr rtl"> 262 <div class="parent vlr rtl"> 263 <div class="abspos"></div> 264 </div> 265 </div> 266 <div class="cb slr rtl"> 267 <div class="parent vrl ltr"> 268 <div class="abspos"></div> 269 </div> 270 </div> 271 <div class="cb slr rtl"> 272 <div class="parent vrl rtl"> 273 <div class="abspos"></div> 274 </div> 275 </div> 276 <div class="cb slr rtl"> 277 <div class="parent slr ltr"> 278 <div class="abspos"></div> 279 </div> 280 </div> 281 <div class="cb slr rtl"> 282 <div class="parent slr rtl"> 283 <div class="abspos"></div> 284 </div> 285 </div> 286 <div class="cb slr rtl"> 287 <div class="parent srl ltr"> 288 <div class="abspos"></div> 289 </div> 290 </div> 291 <div class="cb slr rtl"> 292 <div class="parent srl rtl"> 293 <div class="abspos"></div> 294 </div> 295 </div> 296 <div class="sep"></div> 297 298 <div class="cb srl ltr"> 299 <div class="parent htb ltr"> 300 <div class="abspos"></div> 301 </div> 302 </div> 303 <div class="cb srl ltr"> 304 <div class="parent htb rtl"> 305 <div class="abspos"></div> 306 </div> 307 </div> 308 <div class="cb srl ltr"> 309 <div class="parent vlr ltr"> 310 <div class="abspos"></div> 311 </div> 312 </div> 313 <div class="cb srl ltr"> 314 <div class="parent vlr rtl"> 315 <div class="abspos"></div> 316 </div> 317 </div> 318 <div class="cb srl ltr"> 319 <div class="parent vrl ltr"> 320 <div class="abspos"></div> 321 </div> 322 </div> 323 <div class="cb srl ltr"> 324 <div class="parent vrl rtl"> 325 <div class="abspos"></div> 326 </div> 327 </div> 328 <div class="cb srl ltr"> 329 <div class="parent slr ltr"> 330 <div class="abspos"></div> 331 </div> 332 </div> 333 <div class="cb srl ltr"> 334 <div class="parent slr rtl"> 335 <div class="abspos"></div> 336 </div> 337 </div> 338 <div class="cb srl ltr"> 339 <div class="parent srl ltr"> 340 <div class="abspos"></div> 341 </div> 342 </div> 343 <div class="cb srl ltr"> 344 <div class="parent srl rtl"> 345 <div class="abspos"></div> 346 </div> 347 </div> 348 <div class="sep"></div> 349 350 <div class="cb srl rtl"> 351 <div class="parent htb ltr"> 352 <div class="abspos"></div> 353 </div> 354 </div> 355 <div class="cb srl rtl"> 356 <div class="parent htb rtl"> 357 <div class="abspos"></div> 358 </div> 359 </div> 360 <div class="cb srl rtl"> 361 <div class="parent vlr ltr"> 362 <div class="abspos"></div> 363 </div> 364 </div> 365 <div class="cb srl rtl"> 366 <div class="parent vlr rtl"> 367 <div class="abspos"></div> 368 </div> 369 </div> 370 <div class="cb srl rtl"> 371 <div class="parent vrl ltr"> 372 <div class="abspos"></div> 373 </div> 374 </div> 375 <div class="cb srl rtl"> 376 <div class="parent vrl rtl"> 377 <div class="abspos"></div> 378 </div> 379 </div> 380 <div class="cb srl rtl"> 381 <div class="parent slr ltr"> 382 <div class="abspos"></div> 383 </div> 384 </div> 385 <div class="cb srl rtl"> 386 <div class="parent slr rtl"> 387 <div class="abspos"></div> 388 </div> 389 </div> 390 <div class="cb srl rtl"> 391 <div class="parent srl ltr"> 392 <div class="abspos"></div> 393 </div> 394 </div> 395 <div class="cb srl rtl"> 396 <div class="parent srl rtl"> 397 <div class="abspos"></div> 398 </div> 399 </div> 400 <div class="sep"></div> 401 </body>