tor-browser

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

grid-baseline-align-cycles-001-ref.html (1747B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>
      4  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions Reference File
      5 </title>
      6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      7 <style>
      8  .grid {
      9    border: solid silver;
     10    margin: 1em 0.25em;
     11    display: inline-grid;
     12    grid-template-columns: repeat(3, auto);
     13    font: 20px/1 Ahem;
     14    height: 5em;
     15  }
     16  .grid > div {
     17    border: 1em aqua;
     18    border-style: solid none;
     19  }
     20  .index {
     21    padding: 1em 0;
     22  }
     23  .percent, .orthogonal {
     24    height: 1em;
     25  }
     26 
     27  .self > div {
     28    align-self: start;
     29  }
     30  .content > div {
     31    align-content: start;
     32  }
     33  .self.ref > div {
     34    align-self: start;
     35  }
     36  .content.ref > div {
     37    align-content: start;
     38  }
     39 </style>
     40 
     41 <p>Test passes if the upper set of boxes is identical to the lower set.
     42 
     43 <div class="grid self">
     44  <div class="index">
     45    X
     46  </div>
     47  <div class="percent">
     48    X
     49  </div>
     50 </div>
     51 
     52 <div class="grid self">
     53  <div class="index">
     54    X
     55  </div>
     56  <div class="orthogonal">
     57    X
     58  </div>
     59 </div>
     60 
     61 <div class="grid content">
     62  <div class="index">
     63    X
     64  </div>
     65  <div class="percent">
     66    X
     67  </div>
     68 </div>
     69 
     70 <div class="grid content">
     71  <div class="index">
     72    X
     73  </div>
     74  <div class="orthogonal">
     75    X
     76  </div>
     77 </div>
     78 
     79 <br>
     80 
     81 <div class="grid self ref">
     82  <div class="index">
     83    X
     84  </div>
     85  <div class="percent">
     86    X
     87  </div>
     88 </div>
     89 
     90 <div class="grid self ref">
     91  <div class="index">
     92    X
     93  </div>
     94  <div class="orthogonal">
     95    X
     96  </div>
     97 </div>
     98 
     99 <div class="grid content ref">
    100  <div class="index">
    101    X
    102  </div>
    103  <div class="percent">
    104    X
    105  </div>
    106 </div>
    107 
    108 <div class="grid content ref">
    109  <div class="index">
    110    X
    111  </div>
    112  <div class="orthogonal">
    113    X
    114  </div>
    115 </div>