tor-browser

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

safe-justify-self-htb.html (4148B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-align/#justify-self-property">
      3 <style>
      4 body {
      5  margin: 0;
      6 }
      7 
      8 .container {
      9  writing-mode: horizontal-tb;
     10  direction: ltr;
     11  display: inline-block;
     12  position: relative;
     13  margin: 15px;
     14  outline: solid 4px;
     15  width: 40px;
     16  height: 40px;
     17 }
     18 
     19 .item {
     20  background: green;
     21  width: 50px;
     22  height: 50px;
     23 }
     24 
     25 .safe {
     26  justify-self: safe end;
     27 }
     28 .unsafe {
     29  justify-self: unsafe end;
     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 SAFE<br>
     42 
     43 <div class="container">
     44  <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;"
     45    data-offset-x="0"></div>
     46 </div>
     47 
     48 <div class="container">
     49  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;"
     50    data-offset-x="0"></div>
     51 </div>
     52 
     53 <div class="container">
     54  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;"
     55    data-offset-x="0"></div>
     56 </div>
     57 
     58 <div class="container">
     59  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;"
     60    data-offset-x="0"></div>
     61 </div>
     62 
     63 <div class="container">
     64  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;"
     65    data-offset-x="0"></div>
     66 </div>
     67 
     68 <div class="container">
     69  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;"
     70    data-offset-x="0"></div>
     71 </div>
     72 
     73 
     74 <br>UNSAFE<br>
     75 <div class="container">
     76  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;"
     77    data-offset-x="-10"></div>
     78 </div>
     79 
     80 <div class="container">
     81  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;"
     82    data-offset-x="-10"></div>
     83 </div>
     84 
     85 <div class="container">
     86  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;"
     87    data-offset-x="-10"></div>
     88 </div>
     89 
     90 <div class="container">
     91  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;"
     92    data-offset-x="-10"></div>
     93 </div>
     94 
     95 <div class="container">
     96  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;"
     97    data-offset-x="-10"></div>
     98 </div>
     99 
    100 <div class="container">
    101  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;"
    102    data-offset-x="-10"></div>
    103 </div>
    104 
    105 <br>SAFE RTL<br>
    106 
    107 <div class="container rtl">
    108  <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;"
    109    data-offset-x="-10"></div>
    110 </div>
    111 
    112 <div class="container rtl">
    113  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;"
    114    data-offset-x="-10"></div>
    115 </div>
    116 
    117 <div class="container rtl">
    118  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;"
    119    data-offset-x="-10"></div>
    120 </div>
    121 
    122 <div class="container rtl">
    123  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;"
    124    data-offset-x="-10"></div>
    125 </div>
    126 
    127 <div class="container rtl">
    128  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;"
    129    data-offset-x="-10"></div>
    130 </div>
    131 
    132 <div class="container rtl">
    133  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;"
    134    data-offset-x="-10"></div>
    135 </div>
    136 
    137 <br>UNSAFE RTL<br>
    138 
    139 <div class="container rtl">
    140  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;"
    141    data-offset-x="0"></div>
    142 </div>
    143 
    144 <div class="container rtl">
    145  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;"
    146    data-offset-x="0"></div>
    147 </div>
    148 
    149 <div class="container rtl">
    150  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;"
    151    data-offset-x="0"></div>
    152 </div>
    153 
    154 <div class="container rtl">
    155  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;"
    156    data-offset-x="0"></div>
    157 </div>
    158 
    159 <div class="container rtl">
    160  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;"
    161    data-offset-x="0"></div>
    162 </div>
    163 
    164 <div class="container rtl">
    165  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;"
    166    data-offset-x="0"></div>
    167 </div>