| <!DOCTYPE html> |
| <title> |
| Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items |
| </title> |
| |
| <style> |
| @import "/fonts/ahem.css"; |
| .grid { |
| border: solid silver; |
| margin: 1em 2px; |
| font: 20px/1 Ahem; |
| |
| display: inline-block; |
| vertical-align: top; |
| } |
| .grid > div { |
| border: black 10px; |
| border-style: solid none; |
| color: orange; |
| } |
| div + div { |
| font-size: 2em; |
| } |
| div + div + div { |
| font-size: 50%; |
| } |
| |
| .ref { |
| position: relative; |
| width: 80px; |
| height: 96px; |
| } |
| .ref > div { |
| position: absolute; |
| } |
| .ref1 { top: 16px; } |
| .ref2 { left: 20px; } |
| .ref3 { top: 24px; |
| left: 60px; } |
| .ref4 { right: 0px; |
| top: 0px; |
| bottom: 0px; |
| width: 10px; } |
| |
| .ref.content > div:not(.stripe) { |
| border-color: transparent; |
| } |
| .stripe { |
| width: 80px; |
| height: 76px; |
| } |
| </style> |
| |
| <p>Test passes if each pair of boxes is identical.</p> |
| |
| <div class="grid self ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| </div> |
| |
| <div class="grid self ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| </div> |
| |
| <br> |
| |
| <div class="grid content ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| <div class="stripe"> |
| </div> |
| </div> |
| |
| |
| <div class="grid content ref"> |
| <div class="ref1"> |
| p<br> |
| p<br> |
| p |
| </div> |
| <div class="ref2"> |
| p |
| </div> |
| <div class="ref3"> |
| p |
| </div> |
| <div class="ref4"> |
| |
| </div> |
| <div class="stripe"> |
| </div> |
| </div> |
