flexbox-align-self-baseline-horiz-4.xhtml (950B)
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 baseline-aligns a <table>. 8 --> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <style> 12 div.flexbox { 13 display: flex; 14 align-items: baseline; 15 border: 1px dashed blue; 16 font: 14px sans-serif; 17 } 18 19 table { 20 margin: 1px; /* to fix fuzziness from text overlapping table border */ 21 } 22 23 .lime { background: lime; } 24 .pink { background: pink; } 25 .aqua { background: aqua; } 26 </style> 27 </head> 28 <body> 29 <div class="flexbox"> 30 <div class="lime">text</div> 31 <table class="pink" border="1"> 32 <tr><td>tr1</td></tr> 33 <tr><td>tr2</td></tr> 34 </table> 35 </div> 36 </body> 37 </html>