abs-pos-border-offset-003.html (1786B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"> 4 <meta name="assert" content="This test checks that absolutely positioned elements are positioned correctly across various writing modes when their static position is used" /> 5 <link rel="match" href="abs-pos-border-offset-003-ref.html"> 6 <style> 7 .htb { 8 writing-mode: horizontal-tb; 9 } 10 .vrl { 11 writing-mode: vertical-rl; 12 } 13 .vlr { 14 writing-mode: vertical-lr; 15 } 16 .srl { 17 writing-mode: sideways-rl; 18 } 19 .slr { 20 writing-mode: sideways-lr; 21 } 22 .ltr { 23 direction: ltr; 24 } 25 .rtl { 26 direction: rtl; 27 } 28 29 .container { 30 position: relative; 31 width: 80px; 32 height: 100px; 33 background-color: green; 34 margin-bottom: 10px; 35 } 36 37 .parent { 38 border: solid transparent; 39 border-width: 10px 15px 20px 25px; 40 } 41 42 .sibling { 43 width: 10px; 44 height: 20px; 45 } 46 47 .item { 48 position: absolute; 49 width: 30px; 50 height: 35px; 51 background-color: blue; 52 } 53 </style> 54 <div class="container vrl"> 55 <div class="parent vlr"> 56 <div class="sibling"></div> 57 <div class="item vlr"></div> 58 </div> 59 </div> 60 <div class="container vrl"> 61 <div class="parent htb"> 62 <div class="sibling"></div> 63 <div class="item vrl"></div> 64 </div> 65 </div> 66 <div class="container vrl"> 67 <div class="parent htb"> 68 <div class="sibling"></div> 69 <div class="item vlr"></div> 70 </div> 71 </div> 72 <div class="container vrl"> 73 <div class="parent htb"> 74 <div class="sibling"></div> 75 <div class="item vrl rtl"></div> 76 </div> 77 </div> 78 <div class="container vrl"> 79 <div class="parent vlr rtl"> 80 <div class="sibling"></div> 81 <div class="item vrl"></div> 82 </div> 83 </div> 84 <div class="container vrl rtl"> 85 <div class="parent vlr ltr"> 86 <div class="sibling"></div> 87 <div class="item vrl"></div> 88 </div> 89 </div>