tor-browser

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

safe-justify-self-vlr.html (4145B)

      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: vertical-lr;
     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-y="0"></div>
     46 </div>
     47 
     48 <div class="container">
     49  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;"
     50    data-offset-y="0"></div>
     51 </div>
     52 
     53 <div class="container">
     54  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;"
     55    data-offset-y="0"></div>
     56 </div>
     57 
     58 <div class="container">
     59  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;"
     60    data-offset-y="0"></div>
     61 </div>
     62 
     63 <div class="container">
     64  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;"
     65    data-offset-y="0"></div>
     66 </div>
     67 
     68 <div class="container">
     69  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;"
     70    data-offset-y="0"></div>
     71 </div>
     72 
     73 <br>UNSAFE<br>
     74 
     75 <div class="container">
     76  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;"
     77    data-offset-y="-10"></div>
     78 </div>
     79 
     80 <div class="container">
     81  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;"
     82    data-offset-y="-10"></div>
     83 </div>
     84 
     85 <div class="container">
     86  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;"
     87    data-offset-y="-10"></div>
     88 </div>
     89 
     90 <div class="container">
     91  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;"
     92    data-offset-y="-10"></div>
     93 </div>
     94 
     95 <div class="container">
     96  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;"
     97    data-offset-y="-10"></div>
     98 </div>
     99 
    100 <div class="container">
    101  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;"
    102    data-offset-y="-10"></div>
    103 </div>
    104 
    105 <br>SAFE RTL<br>
    106 <div class="container rtl">
    107  <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;"
    108    data-offset-y="-10"></div>
    109 </div>
    110 
    111 <div class="container rtl">
    112  <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;"
    113    data-offset-y="-10"></div>
    114 </div>
    115 
    116 <div class="container rtl">
    117  <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;"
    118    data-offset-y="-10"></div>
    119 </div>
    120 
    121 <div class="container rtl">
    122  <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;"
    123    data-offset-y="-10"></div>
    124 </div>
    125 
    126 <div class="container rtl">
    127  <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;"
    128    data-offset-y="-10"></div>
    129 </div>
    130 
    131 <div class="container rtl">
    132  <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;"
    133    data-offset-y="-10"></div>
    134 </div>
    135 
    136 <br>UNSAFE RTL<br>
    137 
    138 <div class="container rtl">
    139  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;"
    140    data-offset-y="0"></div>
    141 </div>
    142 
    143 <div class="container rtl">
    144  <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;"
    145    data-offset-y="0"></div>
    146 </div>
    147 
    148 <div class="container rtl">
    149  <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;"
    150    data-offset-y="0"></div>
    151 </div>
    152 
    153 <div class="container rtl">
    154  <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;"
    155    data-offset-y="0"></div>
    156 </div>
    157 
    158 <div class="container rtl">
    159  <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;"
    160    data-offset-y="0"></div>
    161 </div>
    162 
    163 <div class="container rtl">
    164  <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;"
    165    data-offset-y="0"></div>
    166 </div>