baseline-of-scrollable-1b.html (1690B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 CSS Test: baseline of scrollable element (for use by a parent inline-block) 7 should be taken from its contents. (Except if the scrollable element is a 8 block, which gets 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 .block { 28 display: block; 29 } 30 .flex { 31 display: flex; 32 } 33 .grid { 34 display: grid; 35 } 36 </style> 37 </head> 38 <body> 39 Test passes if the a/b text aligns with the bottom margin-edge of the "block" 40 rect and baseline-aligns with the "flex" and "grid" text. 41 <br><br> 42 43 <!-- Note: for this first "inline-block" case, the element's baseline is 44 synthesized from its margin box. For the other cases, the element's 45 baseline is taken from its contents, i.e. the text inside of it. --> 46 a 47 <div class="inline-block"> 48 <div class="container block">block</div> 49 </div> 50 b 51 <br> 52 53 a 54 <div class="inline-block"> 55 <div class="container flex">flex</div> 56 </div> 57 b 58 <br> 59 60 a 61 <div class="inline-block"> 62 <div class="container grid">grid</div> 63 </div> 64 b 65 66 </body> 67 </html>