tor-browser

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

grid-baseline-justify-001.html (2308B)

      1 <!DOCTYPE html>
      2 <title>
      3  Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, 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-justify-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-rows: repeat(4, max-content);
     20  }
     21  .grid > div {
     22    border: black 10px;
     23    border-style: none solid;
     24    color: orange;
     25    writing-mode: vertical-rl;
     26  }
     27  div + div {
     28    font-size: 2em;
     29  }
     30  div + div + div {
     31    font-size: 50%;
     32  }
     33  .self > div {
     34    justify-self: baseline;
     35  }
     36  .content > div {
     37    align-content: baseline;
     38  }
     39  div.stretch {
     40    justify-self: stretch;
     41  }
     42 
     43  .ref {
     44    position: relative;
     45    width: 96px;
     46    height: 80px;
     47  }
     48  .ref > div {
     49    position: absolute;
     50  }
     51  .ref1 { right:  16px; }
     52  .ref2 { top:    20px;
     53          right:   0px; }
     54  .ref3 { right:  24px;
     55          top:    60px; }
     56  .ref4 { bottom:  0px;
     57          right:   0px;
     58          left:    0px;
     59          height: 10px; }
     60 
     61  .ref.content > div:not(.stripe) {
     62    border-color: transparent;
     63  }
     64  .stripe {
     65    width: 76px;
     66    height: 80px;
     67  }
     68 </style>
     69 
     70 <p>Test passes if each pair of boxes is identical.</p>
     71 
     72 <div class="grid self">
     73  <div>
     74    p<br>
     75    p<br>
     76    p
     77  </div>
     78  <div>
     79    p
     80  </div>
     81  <div>
     82    p
     83  </div>
     84  <div class="stretch">
     85    &nbsp;
     86  </div>
     87 </div>
     88 
     89 <div class="grid self ref">
     90  <div class="ref1">
     91    p<br>
     92    p<br>
     93    p
     94  </div>
     95  <div class="ref2">
     96    p
     97  </div>
     98  <div class="ref3">
     99    p
    100  </div>
    101  <div class="ref4">
    102    &nbsp;
    103  </div>
    104 </div>
    105 
    106 <br>
    107 
    108 <div class="grid content">
    109  <div>
    110    p<br>
    111    p<br>
    112    p
    113  </div>
    114  <div>
    115    p
    116  </div>
    117  <div>
    118    p
    119  </div>
    120  <div class="stretch">
    121    &nbsp;
    122  </div>
    123 </div>
    124 
    125 <div class="grid content ref">
    126  <div class="ref1">
    127    p<br>
    128    p<br>
    129    p
    130  </div>
    131  <div class="ref2">
    132    p
    133  </div>
    134  <div class="ref3">
    135    p
    136  </div>
    137  <div class="ref4">
    138    &nbsp;
    139  </div>
    140  <div class="stripe">
    141  </div>
    142 </div>