baseline-of-scrollable-1-ref.html (1453B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 CSS Reference Case 7 </title> 8 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 9 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 10 <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> 11 <style> 12 .container { 13 /* In this reference case, we leave 'overflow' at its initial value. */ 14 height: 50px; 15 width: 100px; 16 border-style: solid; 17 border-width: 2px 3px 4px 5px; 18 padding: 4px 5px 7px 8px; 19 margin: 1px 2px 3px 4px; 20 } 21 .inline-block { 22 display: inline-block; 23 } 24 .inline-flex { 25 display: inline-flex; 26 } 27 .inline-grid { 28 display: inline-grid; 29 } 30 </style> 31 </head> 32 <body> 33 Test passes if the a/b text aligns with the bottom margin-edge of the "block" 34 rect and baseline-aligns with the "flex" and "grid" text. 35 <br><br> 36 37 <!-- Note: for this first "inline-block" case, we take the inner text out of 38 flow, to force the inline-block to synthesize its baseline from its 39 margin box. (This is how the corresponding piece of the testcase is 40 supposed to render). --> 41 a 42 <div class="container inline-block"> 43 <div style="position: absolute">block</div> 44 </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>