tor-browser

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

align-self-vrl-ltr-vlr.html (2895B)

      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-rl;
     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  writing-mode: vertical-lr;
     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="align-self: start;" data-expected-width="20" data-offset-x="20"></div>
     46 </div>
     47 
     48 <div class="container">
     49  <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div>
     50 </div>
     51 
     52 <div class="container">
     53  <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div>
     54 </div>
     55 
     56 <div class="container">
     57  <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div>
     58 </div>
     59 
     60 <div class="container">
     61  <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div>
     62 </div>
     63 
     64 <div class="container">
     65  <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div>
     66 </div>
     67 
     68 <div class="container">
     69  <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div>
     70 </div>
     71 
     72 <div class="container">
     73  <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div>
     74 </div>
     75 
     76 <!-- RTL -->
     77 <br>
     78 
     79 <div class="container">
     80  <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div>
     81 </div>
     82 
     83 <div class="container">
     84  <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div>
     85 </div>
     86 
     87 <div class="container">
     88  <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div>
     89 </div>
     90 
     91 <div class="container">
     92  <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div>
     93 </div>
     94 
     95 <div class="container">
     96  <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div>
     97 </div>
     98 
     99 <div class="container">
    100  <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div>
    101 </div>
    102 
    103 <div class="container">
    104  <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div>
    105 </div>
    106 
    107 <div class="container">
    108  <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div>
    109 </div>