grid-container-baselines-004-ref.html (1138B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Grid container baselines, nested flex/grid/table</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306906"> 10 <style type="text/css"> 11 12 * { 13 color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0; 14 } 15 16 grid, flex { 17 display: inline-flex; 18 border: 1px solid; 19 border-width: 10px 0 3px 0; 20 padding-top: 1px; 21 } 22 23 flex { display:inline-grid; } 24 table { display:inline-table; } 25 td { vertical-align: baseline; } 26 27 </style> 28 </head> 29 <body> 30 31 A 32 <flex>A<br>B</flex> 33 <flex><span>A<br>B</span></flex> 34 <grid>A<br>B</grid> 35 <grid><span>A<br>B</span></grid> 36 <table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table> 37 <table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table> 38 <flex><grid>A<br>B</grid></flex> 39 <grid><flex>A<br>B</flex></grid> 40 <flex><flex>A<br>B</flex></flex> 41 <grid><grid>A<br>B</grid></grid> 42 43 44 </body> 45 </html>