tor-browser

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

justify-self-vlr-rtl-vrl.html (3481B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos">
      3 <style>
      4 body {
      5  margin: 0;
      6 }
      7 
      8 .container {
      9  writing-mode: vertical-lr;
     10  direction: rtl;
     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  writing-mode: vertical-rl;
     21  direction: ltr;
     22  position: absolute;
     23  background: green;
     24  inset: 0;
     25 }
     26 
     27 .item::before {
     28  width: 20px;
     29  height: 20px;
     30  content: '';
     31  display: block;
     32 }
     33 
     34 .rtl {
     35  direction: rtl;
     36 }
     37 </style>
     38 <script src="/resources/testharness.js"></script>
     39 <script src="/resources/testharnessreport.js"></script>
     40 <script src="/resources/check-layout-th.js"></script>
     41 
     42 <body onload="checkLayout('.item')">
     43 
     44 <div class="container">
     45  <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div>
     46 </div>
     47 
     48 <div class="container">
     49  <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div>
     50 </div>
     51 
     52 <div class="container">
     53  <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div>
     54 </div>
     55 
     56 <div class="container">
     57  <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div>
     58 </div>
     59 
     60 <div class="container">
     61  <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div>
     62 </div>
     63 
     64 <div class="container">
     65  <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div>
     66 </div>
     67 
     68 <div class="container">
     69  <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div>
     70 </div>
     71 
     72 <div class="container">
     73  <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div>
     74 </div>
     75 
     76 <div class="container">
     77  <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div>
     78 </div>
     79 
     80 <div class="container">
     81  <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div>
     82 </div>
     83 
     84 <!-- RTL -->
     85 <br>
     86 
     87 <div class="container">
     88  <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div>
     89 </div>
     90 
     91 <div class="container">
     92  <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div>
     93 </div>
     94 
     95 <div class="container">
     96  <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div>
     97 </div>
     98 
     99 <div class="container">
    100  <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div>
    101 </div>
    102 
    103 <div class="container">
    104  <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div>
    105 </div>
    106 
    107 <div class="container">
    108  <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div>
    109 </div>
    110 
    111 <div class="container">
    112  <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div>
    113 </div>
    114 
    115 <div class="container">
    116  <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div>
    117 </div>
    118 
    119 <div class="container">
    120  <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div>
    121 </div>
    122 
    123 <div class="container">
    124  <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div>
    125 </div>