align-items-baseline-row-vert.html (1351B)
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 writing-mode: vertical-rl; 7 display: flex; 8 align-items: baseline; 9 inline-size: min-content; 10 block-size: 200px; 11 border: solid 3px; 12 } 13 #target > div { 14 margin: 5px 7px 9px 11px; 15 } 16 #target > :nth-child(1) { 17 background: lime; 18 font: 30px/1 Ahem; 19 writing-mode: vertical-rl; 20 } 21 #target > :nth-child(2) { 22 background: hotpink; 23 font: 20px/1 Ahem; 24 writing-mode: vertical-rl; 25 } 26 #target > :nth-child(3) { 27 background: cyan; 28 font: 16px/1 Ahem; 29 width: 40px; 30 height: 40px; 31 writing-mode: horizontal-tb; 32 } 33 #target > :nth-child(4) { 34 background: lime; 35 font: 30px/1 Ahem; 36 writing-mode: vertical-lr; 37 } 38 #target > :nth-child(5) { 39 background: hotpink; 40 font: 20px/1 Ahem; 41 writing-mode: vertical-lr; 42 } 43 </style> 44 <script src="/resources/testharness.js"></script> 45 <script src="/resources/testharnessreport.js"></script> 46 <script src="/resources/check-layout-th.js"></script> 47 <body onload="checkLayout('#target > div')"> 48 <div id="target"> 49 <div data-offset-x="139">line1<br>line2</div> 50 <div data-offset-x="154">line1<br>line2</div> 51 <div data-offset-x="164"></div> 52 <div data-offset-x="22">line1<br>line2</div> 53 <div data-offset-x="27">line1<br>line2</div> 54 </div> 55 </body>