flex-align-baseline-table-003.html (1955B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> 3 <style> 4 .target { 5 display: flex; 6 position: relative; 7 writing-mode: vertical-lr; 8 } 9 .target > div, .target td { 10 background: hotpink; 11 font-size: 20px; 12 line-height: 0; 13 } 14 .target table { border-spacing: 0; } 15 .target td { padding: 5px; min-width: 5px; min-height: 5px; } 16 .target caption { 17 margin: 10px; 18 background: lime; 19 block-size: 20px; 20 } 21 .target span { 22 display: inline-block; 23 width: 1em; 24 height: 1em; 25 outline: solid cyan 3px; 26 outline-offset: -3px; 27 } 28 </style> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 <body onload="checkLayout('.target > *')"> 33 34 <div class="target" style="align-items: first baseline;"> 35 <div data-offset-x="45"><span></span></div> 36 <table data-offset-x="0"> 37 <caption>top</caption> 38 <tr style="vertical-align: baseline;"> 39 <td style="font-size: 10px;"><span></span><br><span></span></td> 40 <td><span></span><br><span></span></td> 41 </tr> 42 <tr style="vertical-align: baseline;"> 43 <td><span></span><br><span></span></td> 44 <td style="font-size: 10px;"><span></span><br><span></span></td> 45 </tr> 46 <caption style="caption-side: bottom;">bottom</caption> 47 </table> 48 </div> 49 50 <div class="target" style="align-items: last baseline;"> 51 <div data-offset-x="95"><span></span></div> 52 <table data-offset-x="0"> 53 <caption>top</caption> 54 <tr style="vertical-align: baseline;"> 55 <td style="font-size: 10px;"><span></span><br><span></span></td> 56 <td><span></span><br><span></span></td> 57 </tr> 58 <tr style="vertical-align: baseline;"> 59 <td><span></span><br><span></span></td> 60 <td style="font-size: 10px;"><span></span><br><span></span></td> 61 </tr> 62 <caption style="caption-side: bottom;">bottom</caption> 63 </table> 64 </div>