flex-align-baseline-overflow-001.html (2303B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> 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 overflow: hidden; 17 inline-size: 100px; 18 block-size: 80px; 19 margin: 10px; 20 border: solid 5px; 21 padding: 10px; 22 font-size: 30px; 23 } 24 25 span { 26 display: inline-block; 27 width: 1em; 28 height: 1em; 29 outline: solid cyan 3px; 30 outline-offset: -3px; 31 } 32 </style> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/resources/check-layout-th.js"></script> 36 <body onload="checkLayout('.target > *')"> 37 38 <div class="target" style="align-items: first baseline;"> 39 <div data-offset-y="45"><span></span><br><span></span></div> 40 <div class="inner" data-offset-y="20"> 41 <div> 42 <span></span><br><span></span> 43 </div> 44 </div> 45 </div> 46 47 <div class="target" style="align-items: last baseline;"> 48 <div data-offset-y="55"><span></span><br><span></span></div> 49 <div class="inner" data-offset-y="20"> 50 <div> 51 <span></span><br><span></span> 52 </div> 53 </div> 54 </div> 55 56 <div class="target" style="align-items: first baseline;"> 57 <div data-offset-y="10"><span></span><br><span></span></div> 58 <div class="inner" data-offset-y="30"> 59 <div style="margin-block-start: -200px;"> 60 <span></span><br><span></span> 61 </div> 62 </div> 63 </div> 64 65 <div class="target" style="align-items: last baseline;"> 66 <div data-offset-y="10"><span></span><br><span></span></div> 67 <div class="inner" data-offset-y="50"> 68 <div style="margin-block-start: -200px;"> 69 <span></span><br><span></span> 70 </div> 71 </div> 72 </div> 73 74 <div class="target" style="align-items: first baseline;"> 75 <div data-offset-y="110"><span></span><br><span></span></div> 76 <div class="inner" data-offset-y="20"> 77 <div style="margin-block-start: 200px;"> 78 <span></span><br><span></span> 79 </div> 80 </div> 81 </div> 82 83 <div class="target" style="align-items: last baseline;"> 84 <div data-offset-y="90"><span></span><br><span></span></div> 85 <div class="inner" data-offset-y="20"> 86 <div style="margin-block-start: 200px;"> 87 <span></span><br><span></span> 88 </div> 89 </div> 90 </div>