flexbox-align-self-baseline-horiz-3-ref.xhtml (1573B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case for behavior of the 'baseline' value for align-items and 7 align-self. 8 9 NOTE: For multi-line 'display: block' flex items in the testcase, we use 10 an inline-table here in the reference case, so that we get first-line 11 baseline alignment. (If we used an inline-block instead, that would give 12 us *last-line* baseline alignment.) 13 --> 14 <html xmlns="http://www.w3.org/1999/xhtml"> 15 <head> 16 <style> 17 .flexbox { 18 display: block; 19 border: 1px dashed blue; 20 font: 14px sans-serif; 21 } 22 23 div, .flexbox > label { display: inline-block; } 24 table { display: inline-table; } 25 26 .lime { background: lime; } 27 .pink { background: pink; } 28 .aqua { background: aqua; } 29 </style> 30 </head> 31 <body> 32 <div class="flexbox"> 33 <div class="lime">text</div 34 ><button>btn</button 35 ><label class="pink">label</label 36 ><table cellspacing="0" cellpadding="0" class="aqua"> 37 <label>lab<br/>el</label> 38 </table 39 ><table cellspacing="0" cellpadding="0"> 40 <fieldset>field<br/>set</fieldset> 41 </table 42 ><table cellspacing="0" cellpadding="0"> 43 <fieldset><legend>leg</legend>field<br/>set</fieldset> 44 </table 45 ><table cellspacing="0" cellpadding="0"> 46 <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset> 47 </table> 48 </div> 49 </body> 50 </html>