flexbox-align-self-baseline-horiz-3.xhtml (1383B)
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 <!-- Testcase for behavior of the 'baseline' value for align-items (and 7 align-self, implicitly). This test has various types of baseline-aligned 8 content, and the flexbox's vertical size depends on the aggregate 9 post-alignment height of its children. 10 11 This test checks baseline-alignment for text <button>, for 12 various <input> fields, for <label>, and for <fieldset>. 13 --> 14 <html xmlns="http://www.w3.org/1999/xhtml"> 15 <head> 16 <style> 17 .flexbox { 18 display: flex; 19 align-items: baseline; 20 border: 1px dashed blue; 21 font: 14px sans-serif; 22 } 23 24 .big { 25 height: 100px; 26 font: 24px sans-serif; 27 margin-top: 20px; 28 } 29 30 .lime { background: lime; } 31 .pink { background: pink; } 32 .aqua { background: aqua; } 33 </style> 34 </head> 35 <body> 36 <div class="flexbox"> 37 <div class="lime">text</div> 38 <button>btn</button> 39 <label class="pink">label</label> 40 <label class="aqua">lab<br/>el</label> 41 <fieldset>field<br/>set</fieldset> 42 <fieldset><legend>leg</legend>field<br/>set</fieldset> 43 <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset> 44 </div> 45 </body> 46 </html>