tor-browser

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

grid-baseline-align-cycles-001.html (2367B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>
      4  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
      5 </title>
      6 <meta name="assert" content="
      7  If baseline alignment is specified on a grid item whose size in that axis
      8  depends on the size of an intrinsically-sized track (whose size is therefore
      9  dependent on both the item’s size and baseline alignment, creating a cyclic
     10  dependency), that item does not participate in baseline alignment, and
     11  instead uses its fallback alignment as if that were originally specified.
     12 ">
     13 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
     14 <link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
     15 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     16 <style>
     17  .grid {
     18    border: solid silver;
     19    margin: 1em 0.25em;
     20    display: inline-grid;
     21    grid-template-columns: repeat(2, auto);
     22    font: 20px/1 Ahem;
     23    height: 5em;
     24  }
     25  .grid > div {
     26    border: 1em aqua;
     27    border-style: solid none;
     28  }
     29  .index {
     30    padding: 1em 0;
     31  }
     32  .percent {
     33    height: 20%;
     34  }
     35  .orthogonal {
     36    height: 20%;
     37    writing-mode: vertical-rl;
     38  }
     39 
     40  .self > div {
     41    align-self: baseline;
     42  }
     43  .content > div {
     44    align-content: baseline;
     45  }
     46  .self.ref > div {
     47    align-self: start;
     48  }
     49  .content.ref > div {
     50    align-content: start;
     51  }
     52 </style>
     53 
     54 <p>Test passes if the upper set of boxes is identical to the lower set.
     55 
     56 <div class="grid self">
     57  <div class="index">
     58    X
     59  </div>
     60  <div class="percent orthogonal">
     61    X
     62  </div>
     63 </div>
     64 
     65 <div class="grid self">
     66  <div class="index">
     67    X
     68  </div>
     69  <div class="orthogonal">
     70    X
     71  </div>
     72 </div>
     73 
     74 <div class="grid content">
     75  <div class="index">
     76    X
     77  </div>
     78  <div class="percent">
     79    X
     80  </div>
     81 </div>
     82 
     83 <div class="grid content">
     84  <div class="index">
     85    X
     86  </div>
     87  <div class="orthogonal">
     88    X
     89  </div>
     90 </div>
     91 
     92 <br>
     93 
     94 <div class="grid self ref">
     95  <div class="index">
     96    X
     97  </div>
     98  <div class="percent">
     99    X
    100  </div>
    101 </div>
    102 
    103 <div class="grid self ref">
    104  <div class="index">
    105    X
    106  </div>
    107  <div class="orthogonal">
    108    X
    109  </div>
    110 </div>
    111 
    112 <div class="grid content ref">
    113  <div class="index">
    114    X
    115  </div>
    116  <div class="percent">
    117    X
    118  </div>
    119 </div>
    120 
    121 <div class="grid content ref">
    122  <div class="index">
    123    X
    124  </div>
    125  <div class="orthogonal">
    126    X
    127  </div>
    128 </div>