flex-align-baseline-006.html (1294B)
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 <style> 5 #target { 6 display: flex; 7 flex-direction: column; 8 height: 100px; 9 align-items: last baseline; 10 width: 200px; 11 border: solid 3px; 12 position: relative; 13 line-height: 0; 14 writing-mode: vertical-rl; 15 } 16 span { 17 display: inline-block; 18 width: 1em; 19 height: 1em; 20 outline: solid cornflowerblue 3px; 21 outline-offset: -3px; 22 } 23 #target > div { 24 flex: none; 25 } 26 #target > :nth-child(1) { 27 background: lime; 28 margin-bottom: 20px; 29 padding-bottom: 20px; 30 font-size: 20px; 31 writing-mode: horizontal-tb; 32 } 33 #target > :nth-child(2) { 34 background: hotpink; 35 font-size: 30px; 36 writing-mode: horizontal-tb; 37 } 38 #target > :nth-child(3) { 39 background: papayawhip; 40 font-size: 10px; 41 } 42 </style> 43 <script src="/resources/testharness.js"></script> 44 <script src="/resources/testharnessreport.js"></script> 45 <script src="/resources/check-layout-th.js"></script> 46 <body onload="checkLayout('#target > div')"> 47 48 <div id="target"> 49 <div data-offset-y="20"><span></span><br><span></span></div> 50 <div data-offset-y="0"><span></span><br><span></span></div> 51 <div data-offset-y="55"><span></span><br><span></span></div> 52 </div>