flex-align-baseline-grid-002.html (3941B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> 3 <style> 4 .target { 5 display: flex; 6 position: relative; 7 line-height: 0; 8 font-size: 20px; 9 inline-size: 300px; 10 margin-block: 10px; 11 padding: 10px; 12 border: solid 3px; 13 writing-mode: vertical-rl; 14 } 15 16 .inner { 17 display: grid; 18 gap: 10px; 19 grid-template: 50px 50px / 50px 50px 50px; 20 border: solid 5px; 21 padding: 10px; 22 } 23 24 .inner > div:first-child, 25 .inner > div:last-child { 26 align-self: start; 27 } 28 29 span { 30 display: inline-block; 31 width: 1em; 32 height: 1em; 33 outline: solid cyan 3px; 34 outline-offset: -3px; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 <body onload="checkLayout('.target > *')"> 41 42 <div class="target" style="align-items: first baseline;"> 43 <div data-offset-x="110"><span></span></div> 44 <div class="inner" style="align-items: first baseline;" data-offset-x="10"> 45 <div style="font-size: 20px;"><span></span></div> 46 <div style="font-size: 10px;"><span></span></div> 47 <div style="font-size: 30px;"><span></span></div> 48 <div style="font-size: 15px;"><span></span></div> 49 <div style="font-size: 35px;"><span></span></div> 50 <div style="font-size: 25px;"><span></span></div> 51 </div> 52 </div> 53 54 <div class="target" style="align-items: last baseline;"> 55 <div data-offset-x="48"><span></span></div> 56 <div class="inner" style="align-items: first baseline;" data-offset-x="10"> 57 <div style="font-size: 20px;"><span></span></div> 58 <div style="font-size: 10px;"><span></span></div> 59 <div style="font-size: 30px;"><span></span></div> 60 <div style="font-size: 15px;"><span></span></div> 61 <div style="font-size: 35px;"><span></span></div> 62 <div style="font-size: 25px;"><span></span></div> 63 </div> 64 </div> 65 66 <div class="target" style="align-items: first baseline;"> 67 <div data-offset-x="90"><span></span></div> 68 <div class="inner" style="align-items: last baseline;" data-offset-x="10"> 69 <div style="font-size: 20px;"><span></span></div> 70 <div style="font-size: 10px;"><span></span></div> 71 <div style="font-size: 30px;"><span></span></div> 72 <div style="font-size: 15px;"><span></span></div> 73 <div style="font-size: 35px;"><span></span></div> 74 <div style="font-size: 25px;"><span></span></div> 75 </div> 76 </div> 77 78 <div class="target" style="align-items: last baseline;"> 79 <div data-offset-x="33"><span></span></div> 80 <div class="inner" style="align-items: last baseline;" data-offset-x="10"> 81 <div style="font-size: 20px;"><span></span></div> 82 <div style="font-size: 10px;"><span></span></div> 83 <div style="font-size: 30px;"><span></span></div> 84 <div style="font-size: 15px;"><span></span></div> 85 <div style="font-size: 35px;"><span></span></div> 86 <div style="font-size: 25px;"><span></span></div> 87 </div> 88 </div> 89 90 <div class="target" style="align-items: first baseline;"> 91 <div data-offset-x="115"><span></span></div> 92 <div class="inner" style="align-items: end;" data-offset-x="10"> 93 <div style="font-size: 20px;"><span></span></div> 94 <div style="font-size: 10px;"><span></span></div> 95 <div style="font-size: 30px;"><span></span></div> 96 <div style="font-size: 15px;"><span></span></div> 97 <div style="font-size: 35px;"><span></span></div> 98 <div style="font-size: 25px;"><span></span></div> 99 </div> 100 </div> 101 102 <div class="target" style="align-items: last baseline;"> 103 <div data-offset-x="53"><span></span></div> 104 <div class="inner" style="align-items: end;" data-offset-x="10"> 105 <div style="font-size: 20px;"><span></span></div> 106 <div style="font-size: 10px;"><span></span></div> 107 <div style="font-size: 30px;"><span></span></div> 108 <div style="font-size: 15px;"><span></span></div> 109 <div style="font-size: 35px;"><span></span></div> 110 <div style="font-size: 25px;"><span></span></div> 111 </div> 112 </div>