align-items-baseline-vert-rl-column-horz-items.html (1015B)
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 writing-mode: vertical-rl; 14 align-items: baseline; 15 border: 3px solid black; 16 font-family: monospace; 17 font-size: 10px; 18 line-height: 10px; 19 } 20 #target > :nth-child(1) { 21 background: hotpink; 22 writing-mode: horizontal-tb; 23 padding-left: 30px; 24 margin-left: 10px; 25 } 26 #target > :nth-child(2) { 27 background: papayawhip; 28 writing-mode: horizontal-tb; 29 } 30 </style> 31 <body onload="checkLayout('#target > div')"> 32 <div id="target"> 33 <div data-offset-y="11">two<br>lines</div> 34 <div data-offset-y="11">hello</div> 35 </div> 36 </body>