| <!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> |
