tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

safe-align-self-vlr.html (4095B)

      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-lr;
     10  direction: ltr;
     11  display: inline-block;
     12  position: relative;
     13  margin: 20px;
     14  border: solid 4px;
     15  width: 40px;
     16  height: 40px;
     17 }
     18 
     19 .item {
     20  position: absolute;
     21  background: green;
     22  inset: 5px;
     23  margin: 10px;
     24  width: 30px;
     25  height: 30px;
     26 }
     27 
     28 .safe {
     29  align-self: safe end;
     30 }
     31 .unsafe {
     32  align-self: unsafe end;
     33 }
     34 
     35 .rtl {
     36  direction: rtl;
     37 }
     38 </style>
     39 <script src="/resources/testharness.js"></script>
     40 <script src="/resources/testharnessreport.js"></script>
     41 <script src="/resources/check-layout-th.js"></script>
     42 
     43 <body onload="checkLayout('.item')">
     44 
     45 <div class="container">
     46  <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div>
     47 </div>
     48 
     49 <div class="container">
     50  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div>
     51 </div>
     52 
     53 <div class="container">
     54  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div>
     55 </div>
     56 
     57 <div class="container">
     58  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div>
     59 </div>
     60 
     61 <div class="container">
     62  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div>
     63 </div>
     64 
     65 <div class="container">
     66  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div>
     67 </div>
     68 
     69 <!-- UNSAFE -->
     70 <br>
     71 
     72 <div class="container">
     73  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div>
     74 </div>
     75 
     76 <div class="container">
     77  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div>
     78 </div>
     79 
     80 <div class="container">
     81  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div>
     82 </div>
     83 
     84 <div class="container">
     85  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div>
     86 </div>
     87 
     88 <div class="container">
     89  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div>
     90 </div>
     91 
     92 <div class="container">
     93  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div>
     94 </div>
     95 
     96 <!-- RTL -->
     97 <br>
     98 
     99 <div class="container rtl">
    100  <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div>
    101 </div>
    102 
    103 <div class="container rtl">
    104  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div>
    105 </div>
    106 
    107 <div class="container rtl">
    108  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div>
    109 </div>
    110 
    111 <div class="container rtl">
    112  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div>
    113 </div>
    114 
    115 <div class="container rtl">
    116  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div>
    117 </div>
    118 
    119 <div class="container rtl">
    120  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div>
    121 </div>
    122 
    123 <!-- UNSAFE RTL -->
    124 <br>
    125 
    126 <div class="container rtl">
    127  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div>
    128 </div>
    129 
    130 <div class="container rtl">
    131  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div>
    132 </div>
    133 
    134 <div class="container rtl">
    135  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div>
    136 </div>
    137 
    138 <div class="container rtl">
    139  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div>
    140 </div>
    141 
    142 <div class="container rtl">
    143  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div>
    144 </div>
    145 
    146 <div class="container rtl">
    147  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div>
    148 </div>