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