grid-container-baselines-004.html (1281B)
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 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> 11 <link rel="match" href="grid-container-baselines-004-ref.html"> 12 <style type="text/css"> 13 14 * { 15 color:black; background-color:white; font-size:16px; font-family:monospace; padding:0; margin:0; 16 } 17 18 grid, flex { 19 display: inline-grid; 20 border: 1px solid; 21 border-width: 10px 0 3px 0; 22 padding-top: 1px; 23 } 24 25 flex { display:inline-flex; } 26 table { display:inline-table; } 27 td { vertical-align: baseline; } 28 29 </style> 30 </head> 31 <body> 32 33 A 34 <flex>A<br>B</flex> 35 <flex><span>A<br>B</span></flex> 36 <grid>A<br>B</grid> 37 <grid><span>A<br>B</span></grid> 38 <table cellpadding="0" cellspacing="0"><td><flex>A<br>B</flex></td></table> 39 <table cellpadding="0" cellspacing="0"><td><grid>A<br>B</grid></td></table> 40 <flex><grid>A<br>B</grid></flex> 41 <grid><flex>A<br>B</flex></grid> 42 <flex><flex>A<br>B</flex></flex> 43 <grid><grid>A<br>B</grid></grid> 44 45 46 </body> 47 </html>