flexbox-baseline-align-self-baseline-vert-001-ref.html (1529B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case, using inline-block instead of inline-flex, and with the 7 unaligned children taken out of baseline-alignment with 8 "vertical-align:top". 9 --> 10 <html> 11 <head> 12 <title>CSS Reftest Reference</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 14 <meta charset="utf-8"> 15 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 16 <style> 17 body { 18 margin: 0; 19 font: 20px Ahem; 20 line-height: 20px; 21 /* Baseline is 0.8em = 16px from top */ 22 } 23 .flexContainer { 24 display: inline-block; 25 background: lightblue; 26 } 27 .hugeAndUnaligned { 28 font-size: 35px; 29 line-height: 35px; 30 vertical-align: top; 31 } 32 .smallFont { 33 font-size: 10px; 34 line-height: 10px; 35 /* Baseline is 0.8em = 8px from top */ 36 } 37 * { vertical-align: top } 38 </style> 39 </head> 40 <body> 41 <div style="display: inline-block; margin-top: 12px">a</div> 42 <div class="flexContainer" style="margin-top: 20px"> 43 <div class="smallFont">b</div 44 ><div>c</div 45 ><div class="hugeAndUnaligned">d</div> 46 </div> 47 <div class="flexContainer"> 48 <div class="hugeAndUnaligned">e</div 49 ><div>f</div 50 ><div class="smallFont">g</div> 51 </div> 52 <div class="flexContainer"> 53 <div class="hugeAndUnaligned">h</div 54 ><div class="smallFont">i</div 55 ><div>j</div> 56 </div> 57 </body> 58 </html>