align-items-baseline-row-horz.html (966B)
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 align-items: baseline; 8 inline-size: min-content; 9 block-size: 100px; 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 } 19 #target > :nth-child(2) { 20 background: hotpink; 21 font: 20px/1 Ahem; 22 } 23 #target > :nth-child(3) { 24 background: cyan; 25 writing-mode: vertical-rl; 26 font: 16px/1 Ahem; 27 width: 40px; 28 height: 40px; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('#target > div')"> 35 <div id="target"> 36 <div data-offset-y="32">line1<br>line2</div> 37 <div data-offset-y="40">line1<br>line2</div> 38 <div data-offset-y="16"></div> 39 </div> 40 </body>