flex-align-baseline-fieldset-003.html (1136B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> 3 <style> 4 .target { 5 display: flex; 6 position: relative; 7 line-height: 0; 8 writing-mode: vertical-lr; 9 } 10 .target > div { 11 background: hotpink; 12 font-size: 30px; 13 } 14 fieldset { 15 padding: 10px; 16 border: solid 10px; 17 margin: 0; 18 font-size: 20px; 19 } 20 span { 21 display: inline-block; 22 width: 1em; 23 height: 1em; 24 outline: solid cyan 3px; 25 outline-offset: -3px; 26 } 27 </style> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/check-layout-th.js"></script> 31 <body onload="checkLayout('.target > *')"> 32 33 <div class="target" style="align-items: first baseline;"> 34 <div data-offset-x="25"><span></span></div> 35 <fieldset data-offset-x="0"> 36 <legend><span></span></legend> 37 <span></span><br><span></span> 38 </table> 39 </div> 40 41 <div class="target" style="align-items: last baseline;"> 42 <div data-offset-x="45"><span></span></div> 43 <fieldset data-offset-x="0"> 44 <span></span><br><span></span> 45 <legend><span></span></legend> 46 </table> 47 </div>