tor-browser

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

align-self-static-position-007.html (1948B)


      1 <!DOCTYPE html>
      2 <title>Align-self:self-start/end applies to OOF elements of inline elements when statically positioned.</title>
      3 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
      5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
      6 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
      7 <link rel="help" href="https://issues.chromium.org/issues/409806799">
      8 <link rel="match" href="align-self-static-position-007-ref.html">
      9 <link rel="stylesheet" href="/fonts/ahem.css">
     10 <style>
     11 .inline {
     12  display: inline;
     13  color: transparent;
     14  font: 10px Ahem;
     15  line-height: 25px;
     16 }
     17 
     18 .container {
     19  border: 1px solid;
     20  position: relative;
     21  width: 100px;
     22  height: 100px;
     23  display: inline-block;
     24  margin-left: 50px;
     25  margin-bottom: 50px;
     26 }
     27 
     28 .abs {
     29  width: 50px;
     30  height: 50px;
     31  position: absolute;
     32  background: purple;
     33 }
     34 
     35 .end {
     36  justify-self: self-end;
     37  align-self: self-end;
     38 }
     39 
     40 .start {
     41  justify-self: self-start;
     42  align-self: self-start;
     43 }
     44 </style>
     45 <!-- self-start aligned -->
     46 <div class="container"><div class="inline">text
     47  <div class="abs start"></div>
     48  <br>text
     49 </div></div>
     50 <div class="container"><div class="inline">text
     51  <div class="abs start" style="direction: rtl;"></div>
     52  <br>text
     53 </div></div>
     54 <div class="container"><div class="inline" style="direction: rtl;">text
     55  <div class="abs start" style="direction: ltr;"></div>
     56  <br>text
     57 </div></div>
     58 <br>
     59 <!-- self-end aligned -->
     60 <div class="container"><div class="inline">text
     61  <div class="abs end"></div>
     62  <br>text
     63 </div></div>
     64 <div class="container"><div class="inline">text
     65  <div class="abs end" style="direction: rtl;"></div>
     66  <br>text
     67 </div></div>
     68 <div class="container"><div class="inline" style="direction: rtl;">text
     69  <div class="abs end" style="direction: ltr;"></div>
     70  <br>text
     71 </div></div>