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