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