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