tor-browser

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

grid-align-baseline-table-001.html (2877B)


      1 <!DOCTYPE html>
      2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
      3 <style>
      4 .target {
      5  display: grid;
      6  grid-auto-flow: column;
      7  justify-items: start;
      8  position: relative;
      9 }
     10 .target > div, .target td {
     11  background: hotpink;
     12  font-size: 20px;
     13  line-height: 0;
     14 }
     15 .target table { border-spacing: 0; }
     16 .target td { padding: 5px; min-width: 5px; min-height: 5px; }
     17 .target caption {
     18  margin: 10px;
     19  background: lime;
     20  block-size: 20px;
     21 }
     22 .target span {
     23  display: inline-block;
     24  width: 1em;
     25  height: 1em;
     26  outline: solid cyan 3px;
     27  outline-offset: -3px;
     28 }
     29 </style>
     30 <script src="/resources/testharness.js"></script>
     31 <script src="/resources/testharnessreport.js"></script>
     32 <script src="/resources/check-layout-th.js"></script>
     33 <body onload="checkLayout('.target > *')">
     34 
     35 <div class="target" style="align-items: first baseline;">
     36  <div data-offset-y="45"><span></span></div>
     37  <table data-offset-y="0">
     38    <caption>top</caption>
     39    <tr style="vertical-align: baseline;">
     40      <td style="font-size: 10px;"><span></span><br><span></span></td>
     41      <td><span></span><br><span></span></td>
     42    </tr>
     43    <tr style="vertical-align: baseline;">
     44      <td><span></span><br><span></span></td>
     45      <td style="font-size: 10px;"><span></span><br><span></span></td>
     46    </tr>
     47    <caption style="caption-side: bottom;">bottom</caption>
     48  </table>
     49 </div>
     50 
     51 <div class="target" style="align-items: last baseline;">
     52  <div data-offset-y="95"><span></span></div>
     53  <table data-offset-y="0">
     54    <caption>top</caption>
     55    <tr style="vertical-align: baseline;">
     56      <td style="font-size: 10px;"><span></span><br><span></span></td>
     57      <td><span></span><br><span></span></td>
     58    </tr>
     59    <tr style="vertical-align: baseline;">
     60      <td><span></span><br><span></span></td>
     61      <td style="font-size: 10px;"><span></span><br><span></span></td>
     62    </tr>
     63    <caption style="caption-side: bottom;">bottom</caption>
     64  </table>
     65 </div>
     66 
     67 <div class="target" style="align-items: first baseline;">
     68  <div data-offset-y="20"><span></span></div>
     69  <table data-offset-y="0">
     70    <tr>
     71      <td style="border: solid 10px;"></td>
     72      <td style="border: solid 5px;"></td>
     73      <td style="border: solid 20px;"></td>
     74    </tr>
     75    <tr>
     76      <td style="border: solid 10px;"></td>
     77      <td style="border: solid 5px;"></td>
     78      <td style="border: solid 20px;"></td>
     79    </tr>
     80  </table>
     81 </div>
     82 
     83 <div class="target" style="align-items: last baseline;">
     84  <div data-offset-y="70"><span></span></div>
     85  <table data-offset-y="0">
     86    <tr>
     87      <td style="border: solid 10px;"></td>
     88      <td style="border: solid 5px;"></td>
     89      <td style="border: solid 20px;"></td>
     90    </tr>
     91    <tr>
     92      <td style="border: solid 10px;"></td>
     93      <td style="border: solid 5px;"></td>
     94      <td style="border: solid 20px;"></td>
     95    </tr>
     96  </table>
     97 </div>