tor-browser

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

justify-self-htb-rtl-vlr.html (2873B)

      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: horizontal-tb;
     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-lr;
     21  direction: ltr;
     22  background: green;
     23 }
     24 
     25 .item::before {
     26  width: 20px;
     27  height: 20px;
     28  content: '';
     29  display: block;
     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 <div class="container">
     43  <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div>
     44 </div>
     45 
     46 <div class="container">
     47  <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div>
     48 </div>
     49 
     50 <div class="container">
     51  <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div>
     52 </div>
     53 
     54 <div class="container">
     55  <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div>
     56 </div>
     57 
     58 <div class="container">
     59  <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div>
     60 </div>
     61 
     62 <div class="container">
     63  <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div>
     64 </div>
     65 
     66 <div class="container">
     67  <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div>
     68 </div>
     69 
     70 <div class="container">
     71  <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div>
     72 </div>
     73 
     74 <!-- RTL -->
     75 <br>
     76 
     77 <div class="container">
     78  <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div>
     79 </div>
     80 
     81 <div class="container">
     82  <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div>
     83 </div>
     84 
     85 <div class="container">
     86  <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div>
     87 </div>
     88 
     89 <div class="container">
     90  <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div>
     91 </div>
     92 
     93 <div class="container">
     94  <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div>
     95 </div>
     96 
     97 <div class="container">
     98  <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div>
     99 </div>
    100 
    101 <div class="container">
    102  <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div>
    103 </div>
    104 
    105 <div class="container">
    106  <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div>
    107 </div>