baseline-of-scrollable-1a.html (1551B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 CSS Test: baseline of scrollable element should be taken from its 7 contents. (Except if the scrollable element is an inline-block, which gets 8 baseline from its margin-box.) 9 </title> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 12 <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> 13 <link rel="match" href="reference/baseline-of-scrollable-1-ref.html"> 14 <style> 15 .container { 16 overflow: hidden; 17 height: 50px; 18 width: 100px; 19 border-style: solid; 20 border-width: 2px 3px 4px 5px; 21 padding: 4px 5px 7px 8px; 22 margin: 1px 2px 3px 4px; 23 } 24 .inline-block { 25 display: inline-block; 26 } 27 .inline-flex { 28 display: inline-flex; 29 } 30 .inline-grid { 31 display: inline-grid; 32 } 33 </style> 34 </head> 35 <body> 36 Test passes if the a/b text aligns with the bottom margin-edge of the "block" 37 rect and baseline-aligns with the "flex" and "grid" text. 38 <br><br> 39 40 <!-- Note: for this first "inline-block" case, the element's baseline is 41 synthesized from its margin box. For the other cases, the element's 42 baseline is taken from its contents, i.e. the text inside of it. --> 43 a 44 <div class="container inline-block">block</div> 45 b 46 <br> 47 48 a 49 <div class="container inline-flex">flex</div> 50 b 51 <br> 52 53 a 54 <div class="container inline-grid">grid</div> 55 b 56 57 </body> 58 </html>