justify-self-default-overflow-vrl-rtl-htb.html (3589B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> 3 <style> 4 body { 5 margin: 0; 6 } 7 8 .container { 9 writing-mode: vertical-rl; 10 direction: rtl; 11 display: inline-block; 12 position: relative; 13 margin: 20px; 14 border: solid 4px; 15 width: 100px; 16 height: 100px; 17 } 18 19 .item { 20 writing-mode: horizontal-tb; 21 direction: ltr; 22 position: absolute; 23 background: green; 24 justify-self: center; 25 } 26 27 .inner { 28 width: 20px; 29 height: 20px; 30 } 31 32 .rtl { 33 direction: rtl; 34 } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 40 <body onload="checkLayout('.item')"> 41 42 <!-- No overflow, centered in IMCB. --> 43 <div class="container"> 44 <div class="item" style="top: 10px; bottom: 20px;" data-offset-y="35"> 45 <div class="inner"></div> 46 </div> 47 </div> 48 49 <!-- Overflows IMCB, but not CB. --> 50 <div class="container"> 51 <div class="item" style="top: 10px; bottom: 20px;" data-offset-y="5"> 52 <div class="inner" style="height: 80px;"></div> 53 </div> 54 </div> 55 56 <!-- Overflows weak CB edge, shifted. --> 57 <div class="container"> 58 <div class="item" style="top: 10px; bottom: 20px;" data-offset-y="0"> 59 <div class="inner" style="height: 95px;"></div> 60 </div> 61 </div> 62 63 <!-- Overflows strong CB edge, shifted. --> 64 <div class="container"> 65 <div class="item" style="top: 10px; bottom: 20px;" data-offset-y="-20"> 66 <div class="inner" style="height: 120px;"></div> 67 </div> 68 </div> 69 70 <!-- No overflow, centered in IMCB. --> 71 <div class="container"> 72 <div class="item" style="top: -10px; bottom: -20px;" data-offset-y="45"> 73 <div class="inner"></div> 74 </div> 75 </div> 76 77 <!-- No overflow, centered in IMCB. --> 78 <div class="container"> 79 <div class="item" style="top: -10px; bottom: -20px;" data-offset-y="-5"> 80 <div class="inner" style="height: 120px;"></div> 81 </div> 82 </div> 83 84 <!-- Overflows strong CB edge, shifted. --> 85 <div class="container"> 86 <div class="item" style="top: -10px; bottom: -20px;" data-offset-y="-40"> 87 <div class="inner" style="height: 160px;"></div> 88 </div> 89 </div> 90 91 <!-- RTL items. --> 92 <br> 93 94 <!-- No overflow, centered in IMCB. --> 95 <div class="container"> 96 <div class="item rtl" style="top: 10px; bottom: 20px;" data-offset-y="35"> 97 <div class="inner"></div> 98 </div> 99 </div> 100 101 <!-- Overflows IMCB, but not CB. --> 102 <div class="container"> 103 <div class="item rtl" style="top: 10px; bottom: 20px;" data-offset-y="5"> 104 <div class="inner" style="height: 80px;"></div> 105 </div> 106 </div> 107 108 <!-- Overflows weak CB edge, shifted. --> 109 <div class="container"> 110 <div class="item rtl" style="top: 10px; bottom: 20px;" data-offset-y="0"> 111 <div class="inner" style="height: 95px;"></div> 112 </div> 113 </div> 114 115 <!-- Overflows strong CB edge, shifted. --> 116 <div class="container"> 117 <div class="item rtl" style="top: 10px; bottom: 20px;" data-offset-y="-20"> 118 <div class="inner" style="height: 120px;"></div> 119 </div> 120 </div> 121 122 <!-- No overflow, centered in IMCB. --> 123 <div class="container"> 124 <div class="item rtl" style="top: -10px; bottom: -20px;" data-offset-y="45"> 125 <div class="inner"></div> 126 </div> 127 </div> 128 129 <!-- No overflow, centered in IMCB. --> 130 <div class="container"> 131 <div class="item rtl" style="top: -10px; bottom: -20px;" data-offset-y="-5"> 132 <div class="inner" style="height: 120px;"></div> 133 </div> 134 </div> 135 136 <!-- Overflows strong CB edge, shifted. --> 137 <div class="container"> 138 <div class="item rtl" style="top: -10px; bottom: -20px;" data-offset-y="-40"> 139 <div class="inner" style="height: 160px;"></div> 140 </div> 141 </div>