align-items-baseline-column-vert-rl-table-item.html (1157B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> 4 <link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <style> 9 #target { 10 display: flex; 11 flex-direction: column; 12 width: 200px; 13 align-items: baseline; 14 border: 3px solid black; 15 font-family: monospace; 16 font-size: 10px; 17 line-height: 10px; 18 } 19 #target > :nth-child(1) { 20 background: hotpink; 21 writing-mode: vertical-rl; 22 padding-left: 30px; 23 margin-left: 10px; 24 } 25 #target > :nth-child(2) { 26 background: papayawhip; 27 writing-mode: vertical-rl; 28 } 29 .inner { 30 border: 5px solid black; 31 padding: 5px; 32 } 33 </style> 34 <body onload="checkLayout('#target > *')"> 35 <div id="target"> 36 <table class="inner" data-offset-x="140"> 37 <tr> 38 <td style="vertical-align: baseline;"> 39 <div>two<br>lines</div> 40 </td> 41 </tr> 42 </table> 43 <div data-offset-x="188">hello</div> 44 </div> 45 </body>