flex-align-baseline-table-001.html (2827B)
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 } 8 .target > div, .target td { 9 background: hotpink; 10 font-size: 20px; 11 line-height: 0; 12 } 13 .target table { border-spacing: 0; } 14 .target td { padding: 5px; min-width: 5px; min-height: 5px; } 15 .target caption { 16 margin: 10px; 17 background: lime; 18 block-size: 20px; 19 } 20 .target span { 21 display: inline-block; 22 width: 1em; 23 height: 1em; 24 outline: solid cyan 3px; 25 outline-offset: -3px; 26 } 27 </style> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/check-layout-th.js"></script> 31 <body onload="checkLayout('.target > *')"> 32 33 <div class="target" style="align-items: first baseline;"> 34 <div data-offset-y="45"><span></span></div> 35 <table data-offset-y="0"> 36 <caption>top</caption> 37 <tr style="vertical-align: baseline;"> 38 <td style="font-size: 10px;"><span></span><br><span></span></td> 39 <td><span></span><br><span></span></td> 40 </tr> 41 <tr style="vertical-align: baseline;"> 42 <td><span></span><br><span></span></td> 43 <td style="font-size: 10px;"><span></span><br><span></span></td> 44 </tr> 45 <caption style="caption-side: bottom;">bottom</caption> 46 </table> 47 </div> 48 49 <div class="target" style="align-items: last baseline;"> 50 <div data-offset-y="95"><span></span></div> 51 <table data-offset-y="0"> 52 <caption>top</caption> 53 <tr style="vertical-align: baseline;"> 54 <td style="font-size: 10px;"><span></span><br><span></span></td> 55 <td><span></span><br><span></span></td> 56 </tr> 57 <tr style="vertical-align: baseline;"> 58 <td><span></span><br><span></span></td> 59 <td style="font-size: 10px;"><span></span><br><span></span></td> 60 </tr> 61 <caption style="caption-side: bottom;">bottom</caption> 62 </table> 63 </div> 64 65 <div class="target" style="align-items: first baseline;"> 66 <div data-offset-y="20"><span></span></div> 67 <table data-offset-y="0"> 68 <tr> 69 <td style="border: solid 10px;"></td> 70 <td style="border: solid 5px;"></td> 71 <td style="border: solid 20px;"></td> 72 </tr> 73 <tr> 74 <td style="border: solid 10px;"></td> 75 <td style="border: solid 5px;"></td> 76 <td style="border: solid 20px;"></td> 77 </tr> 78 </table> 79 </div> 80 81 <div class="target" style="align-items: last baseline;"> 82 <div data-offset-y="70"><span></span></div> 83 <table data-offset-y="0"> 84 <tr> 85 <td style="border: solid 10px;"></td> 86 <td style="border: solid 5px;"></td> 87 <td style="border: solid 20px;"></td> 88 </tr> 89 <tr> 90 <td style="border: solid 10px;"></td> 91 <td style="border: solid 5px;"></td> 92 <td style="border: solid 20px;"></td> 93 </tr> 94 </table> 95 </div>