tor-browser

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

flex-align-baseline-grid-001.html (3912B)


      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
      3 <style>
      4 .target {
      5  display: flex;
      6  position: relative;
      7  line-height: 0;
      8  font-size: 20px;
      9  inline-size: 300px;
     10  margin-block: 10px;
     11  padding: 10px;
     12  border: solid 3px;
     13 }
     14 
     15 .inner {
     16  display: grid;
     17  gap: 10px;
     18  grid-template: 50px 50px / 50px 50px 50px;
     19  border: solid 5px;
     20  padding: 10px;
     21 }
     22 
     23 .inner > div:first-child,
     24 .inner > div:last-child {
     25  align-self: start;
     26 }
     27 
     28 span {
     29  display: inline-block;
     30  width: 1em;
     31  height: 1em;
     32  outline: solid cyan 3px;
     33  outline-offset: -3px;
     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 <body onload="checkLayout('.target > *')">
     40 
     41 <div class="target" style="align-items: first baseline;">
     42  <div data-offset-y="35"><span></span></div>
     43  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
     44    <div style="font-size: 20px;"><span></span></div>
     45    <div style="font-size: 10px;"><span></span></div>
     46    <div style="font-size: 30px;"><span></span></div>
     47    <div style="font-size: 15px;"><span></span></div>
     48    <div style="font-size: 35px;"><span></span></div>
     49    <div style="font-size: 25px;"><span></span></div>
     50  </div>
     51 </div>
     52 
     53 <div class="target" style="align-items: last baseline;">
     54  <div data-offset-y="100"><span></span></div>
     55  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
     56    <div style="font-size: 20px;"><span></span></div>
     57    <div style="font-size: 10px;"><span></span></div>
     58    <div style="font-size: 30px;"><span></span></div>
     59    <div style="font-size: 15px;"><span></span></div>
     60    <div style="font-size: 35px;"><span></span></div>
     61    <div style="font-size: 25px;"><span></span></div>
     62  </div>
     63 </div>
     64 
     65 <div class="target" style="align-items: first baseline;">
     66  <div data-offset-y="55"><span></span></div>
     67  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
     68    <div style="font-size: 20px;"><span></span></div>
     69    <div style="font-size: 10px;"><span></span></div>
     70    <div style="font-size: 30px;"><span></span></div>
     71    <div style="font-size: 15px;"><span></span></div>
     72    <div style="font-size: 35px;"><span></span></div>
     73    <div style="font-size: 25px;"><span></span></div>
     74  </div>
     75 </div>
     76 
     77 <div class="target" style="align-items: last baseline;">
     78  <div data-offset-y="115"><span></span></div>
     79  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
     80    <div style="font-size: 20px;"><span></span></div>
     81    <div style="font-size: 10px;"><span></span></div>
     82    <div style="font-size: 30px;"><span></span></div>
     83    <div style="font-size: 15px;"><span></span></div>
     84    <div style="font-size: 35px;"><span></span></div>
     85    <div style="font-size: 25px;"><span></span></div>
     86  </div>
     87 </div>
     88 
     89 <div class="target" style="align-items: first baseline;">
     90  <div data-offset-y="25"><span></span></div>
     91  <div class="inner" style="align-items: end;" data-offset-y="10">
     92    <div style="font-size: 20px;"><span></span></div>
     93    <div style="font-size: 10px;"><span></span></div>
     94    <div style="font-size: 30px;"><span></span></div>
     95    <div style="font-size: 15px;"><span></span></div>
     96    <div style="font-size: 35px;"><span></span></div>
     97    <div style="font-size: 25px;"><span></span></div>
     98  </div>
     99 </div>
    100 
    101 <div class="target" style="align-items: last baseline;">
    102  <div data-offset-y="90"><span></span></div>
    103  <div class="inner" style="align-items: end;" data-offset-y="10">
    104    <div style="font-size: 20px;"><span></span></div>
    105    <div style="font-size: 10px;"><span></span></div>
    106    <div style="font-size: 30px;"><span></span></div>
    107    <div style="font-size: 15px;"><span></span></div>
    108    <div style="font-size: 35px;"><span></span></div>
    109    <div style="font-size: 25px;"><span></span></div>
    110  </div>
    111 </div>