css/css-grid/alignment/grid-baseline-align-cycles-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>
  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
</title>
<meta name="assert" content="
  A grid item whose size is input
  to the size of the track
  on which its size depends
  cannot participate in baseline alignment, unless
  the grid algorithm requires
  another pass, where the track
  sizing can be resovled.
">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
  .grid {
    border: solid silver;
    margin: 1em 0.25em;
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    font: 20px/1 Ahem;
    height: 5em;
  }
  .grid > div {
    border: 1em aqua;
    border-style: solid none;
  }
  .index {
    padding: 1em 0;
  }
  .percent {
    height: 20%;
  }
  .orthogonal {
    writing-mode: vertical-rl;
  }

  .self > div {
    align-self: baseline;
  }
  .content > div {
    align-content: baseline;
  }
  .self.ref > div {
    align-self: start;
  }
  .content.ref > div {
    align-content: start;
  }
</style>

<p>Test passes if the upper set of boxes is identical to the lower set.

<div class="grid self">
  <div class="index">
    X
  </div>
  <div class="percent orthogonal">
    X
  </div>
</div>

<div class="grid self">
  <div class="index">
    X
  </div>
  <div class="orthogonal">
    X
  </div>
</div>

<div class="grid content">
  <div class="index">
    X
  </div>
  <div class="percent">
    X
  </div>
</div>

<div class="grid content">
  <div class="index">
    X
  </div>
  <div class="orthogonal">
    X
  </div>
</div>

<br>

<div class="grid self ref">
  <div class="index">
    X
  </div>
  <div class="percent">
    X
  </div>
</div>

<div class="grid self ref">
  <div class="index">
    X
  </div>
  <div class="orthogonal">
    X
  </div>
</div>

<div class="grid content ref">
  <div class="index">
    X
  </div>
  <div class="percent">
    X
  </div>
</div>

<div class="grid content ref">
  <div class="index">
    X
  </div>
  <div class="orthogonal">
    X
  </div>
</div>