tor-browser

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

grid-baseline-align-001.html (2246B)

      1 <!DOCTYPE html>
      2 <title>
      3  Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
      4 </title>
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
      6 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
      7 <link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
      8 <link rel="match" href="references/grid-baseline-align-001-ref.html">
      9 
     10 <style>
     11  @import "/fonts/ahem.css";
     12  .grid {
     13    border: solid silver;
     14    margin: 1em 2px;
     15    font: 20px/1 Ahem;
     16 
     17    display: inline-grid;
     18    vertical-align: top;
     19    grid-template-columns: repeat(4, max-content);
     20  }
     21  .grid > div {
     22    border: black 10px;
     23    border-style: solid none;
     24    color: orange;
     25  }
     26  div + div {
     27    font-size: 2em;
     28  }
     29  div + div + div {
     30    font-size: 50%;
     31  }
     32  .self > div {
     33    align-self: baseline;
     34  }
     35  .content > div {
     36    align-content: baseline;
     37  }
     38  div.stretch {
     39    align-self: stretch;
     40  }
     41 
     42  .ref {
     43    position: relative;
     44    width: 80px;
     45    height: 96px;
     46  }
     47  .ref > div {
     48    position: absolute;
     49  }
     50  .ref1 { top:   16px; }
     51  .ref2 { left:  20px; }
     52  .ref3 { top:   24px;
     53          left:  60px; }
     54  .ref4 { right:  0px;
     55          top:    24px;
     56          bottom: 0px;
     57          width: 10px; }
     58 
     59  .ref.content > div:not(.stripe) {
     60    border-color: transparent;
     61  }
     62  .stripe {
     63    width: 80px;
     64    height: 76px;
     65  }
     66 </style>
     67 
     68 <p>Test passes if each pair of boxes is identical.</p>
     69 
     70 <div class="grid self">
     71  <div>
     72    p<br>
     73    p<br>
     74    p
     75  </div>
     76  <div>
     77    p
     78  </div>
     79  <div>
     80    p
     81  </div>
     82  <div style="height: 10px;">
     83    &nbsp;
     84  </div>
     85 </div>
     86 
     87 <div class="grid self ref">
     88  <div class="ref1">
     89    p<br>
     90    p<br>
     91    p
     92  </div>
     93  <div class="ref2">
     94    p
     95  </div>
     96  <div class="ref3">
     97    p
     98  </div>
     99  <div class="ref4">
    100    &nbsp;
    101  </div>
    102 </div>
    103 
    104 <br>
    105 
    106 <div class="grid content">
    107  <div>
    108    p<br>
    109    p<br>
    110    p
    111  </div>
    112  <div>
    113    p
    114  </div>
    115  <div>
    116    p
    117  </div>
    118  <div class="stretch">
    119    &nbsp;
    120  </div>
    121 </div>
    122 
    123 <div class="grid content ref">
    124  <div class="ref1">
    125    p<br>
    126    p<br>
    127    p
    128  </div>
    129  <div class="ref2">
    130    p
    131  </div>
    132  <div class="ref3">
    133    p
    134  </div>
    135  <div class="ref4">
    136    &nbsp;
    137  </div>
    138  <div class="stripe">
    139  </div>
    140 </div>