align-items-baseline-column-horz.html (1289B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> 3 <link rel="stylesheet" href="/fonts/ahem.css" /> 4 <style> 5 #target { 6 display: flex; 7 flex-direction: column; 8 align-items: baseline; 9 inline-size: 200px; 10 border: solid 3px; 11 } 12 #target > div { 13 margin: 5px 7px 9px 11px; 14 } 15 #target > :nth-child(1) { 16 background: lime; 17 font: 30px/1 Ahem; 18 writing-mode: vertical-rl; 19 } 20 #target > :nth-child(2) { 21 background: hotpink; 22 font: 20px/1 Ahem; 23 writing-mode: vertical-rl; 24 } 25 #target > :nth-child(3) { 26 background: cyan; 27 font: 16px/1 Ahem; 28 width: 40px; 29 height: 40px; 30 } 31 #target > :nth-child(4) { 32 background: lime; 33 font: 30px/1 Ahem; 34 writing-mode: vertical-lr; 35 } 36 #target > :nth-child(5) { 37 background: hotpink; 38 font: 20px/1 Ahem; 39 writing-mode: vertical-lr; 40 } 41 </style> 42 <script src="/resources/testharness.js"></script> 43 <script src="/resources/testharnessreport.js"></script> 44 <script src="/resources/check-layout-th.js"></script> 45 <body onload="checkLayout('#target > div')"> 46 <div id="target"> 47 <div data-offset-x="144">line1<br>line2</div> 48 <div data-offset-x="159">line1<br>line2</div> 49 <div data-offset-x="37"></div> 50 <div data-offset-x="22">line1<br>line2</div> 51 <div data-offset-x="27">line1<br>line2</div> 52 </div> 53 </body>