grid-lanes-grid-item-self-baseline-002b-ref.html (5327B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: align-self/justify-self:baseline/last baseline</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; 13 } 14 body { width:600px; height:600px; border:1px solid; box-sizing:border-box; } 15 16 .grid { 17 float: left; 18 display: grid; 19 grid: auto / repeat(4, auto); 20 place-items: start; 21 padding-block-start: 1px; 22 margin-left: 1px; 23 border:1px solid; 24 height: 100px; 25 width: 100px; 26 } 27 .c { grid: repeat(4, auto) / auto; } 28 .ae { align-content: end; } 29 .je { justify-content: end; } 30 31 span { 32 text-decoration: underline lime; 33 text-decoration-thickness: 1px; 34 text-underline-offset: 0; 35 text-decoration-skip-ink: none; 36 background: grey; 37 } 38 .central > span { text-decoration-line: line-through; } 39 x { display:block; visibility:hidden; } 40 span:nth-child(1) { font-size:10px; } 41 span:nth-child(2) { font-size:15px; } 42 span:nth-child(3) { font-size:25px; } 43 span:nth-child(4) { font-size:30px; } 44 .pbe { padding-block-end:20px; } 45 .pbs { padding-block-start:20px; } 46 47 .fb { align-self:baseline; } 48 .lb { align-self:last baseline; } 49 50 .jfb { justify-self:baseline; } 51 .jlb { justify-self:last baseline; } 52 53 .hl { writing-mode: horizontal-tb; direction:ltr; } 54 .hr { writing-mode: horizontal-tb; direction:rtl; } 55 .vll { writing-mode: vertical-lr; direction:ltr; } 56 .vlr { writing-mode: vertical-lr; direction:rtl; } 57 .vrl { writing-mode: vertical-rl; direction:ltr; } 58 .vrr { writing-mode: vertical-rl; direction:rtl; } 59 .swl { writing-mode: sideways-lr; } 60 .swr { writing-mode: sideways-rl; } 61 62 </style> 63 </head> 64 <body> 65 66 <!-- TODO: baseline alignment is wrong (bug 1633610) 67 <div class="grid je c vrr"><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> 68 <div class="grid je c vrr"><span class="jfb hl pbe">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> 69 <div class="grid je c swl"><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> 70 --> 71 <div class="grid je c swr"><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> 72 <div class="grid ae"><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> 73 74 <br clear="all"> 75 76 <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> 77 <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> 78 <div class="grid vll 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> 79 <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> 80 <div class="grid vrr 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> 81 82 <br clear="all"> 83 84 <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> 85 <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> 86 <div class="grid vlr 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> 87 <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> 88 <div class="grid vrl 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> 89 90 <br clear="all"> 91 92 <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> 93 <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> 94 <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> 95 96 </body> 97 </html>