| <!DOCTYPE HTML> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <html><head> |
| <meta charset="utf-8"> |
| <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> |
| <link rel="match" href="masonry-grid-item-self-baseline-002a-ref.html"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; |
| } |
| body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } |
| |
| .grid { |
| float: left; |
| display: grid; |
| grid: masonry / repeat(4, auto); |
| place-items: start; |
| padding-block-start: 1px; |
| margin-left: 1px; |
| border:1px solid; |
| align-tracks: end; |
| justify-tracks: end; |
| masonry-auto-flow: next; |
| height: 100px; |
| width: 100px; |
| } |
| .c { grid: repeat(4, auto) / masonry; } |
| |
| span { |
| text-decoration: underline lime; |
| text-decoration-thickness: 1px; |
| text-underline-offset: 0; |
| text-decoration-skip-ink: none; |
| background: grey; |
| } |
| .central > span { text-decoration-line: line-through; } |
| x { display:block; background:yellow; visibility:hidden; } |
| span:nth-child(1) { font-size:10px; } |
| span:nth-child(2) { font-size:15px; } |
| span:nth-child(3) { font-size:25px; } |
| span:nth-child(4) { font-size:30px; } |
| .pbe { padding-block-end:20px; } |
| .pbs { padding-block-start:20px; } |
| |
| .fb { align-self:baseline; } |
| .lb { align-self:last baseline; } |
| |
| .jfb { justify-self:baseline; } |
| .jlb { justify-self:last baseline; } |
| |
| .hl { writing-mode: horizontal-tb; direction:ltr; } |
| .hr { writing-mode: horizontal-tb; direction:rtl; } |
| .vll { writing-mode: vertical-lr; direction:ltr; } |
| .vlr { writing-mode: vertical-lr; direction:rtl; } |
| .vrl { writing-mode: vertical-rl; direction:ltr; } |
| .vrr { writing-mode: vertical-rl; direction:rtl; } |
| .swl { writing-mode: sideways-lr; } |
| .swr { writing-mode: sideways-rl; } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> |
| <div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div> |
| <div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| |
| <br clear="all"> |
| |
| <div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| <div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div> |
| |
| <br clear="all"> |
| |
| <div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> |
| <div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div> |
| <div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| <div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| <div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| |
| <br clear="all"> |
| |
| <div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| <div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| <div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div> |
| <div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> |
| <div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div> |
| |
| <br clear="all"> |
| |
| <div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> |
| <div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div> |
| |
| </body> |
| </html> |