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