flexbox-baseline-empty-001b.html (1790B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Testcase for how we compute the baseline of a vertical flex container 7 with no flex items. This is the cross-axis baseline. The spec says this 8 about this case: 9 https://drafts.csswg.org/css-flexbox/#flex-baselines 10 "Otherwise, the flex container has no first/last main-axis baseline set, 11 and one is synthesized if needed according to the rules of its alignment context." 12 13 The alignment context in this case is inline-level so the margin-box 14 should be used to synthesize the baseline. 15 --> 16 <html> 17 <head> 18 <title>CSS Test: Testing the baseline of an empty vertical flex container</title> 19 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 20 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> 21 <link rel="match" href="flexbox-baseline-empty-001-ref.html"> 22 <meta charset="utf-8"> 23 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 24 <style> 25 body { 26 font: 20px Ahem; 27 } 28 .flexContainer { 29 display: inline-flex; 30 flex-direction: column; 31 height: 16px; 32 width: 16px; 33 background: purple; 34 border: 0px dotted black; 35 /* (Elements that want a border will set their border-width.) */ 36 } 37 </style> 38 </head> 39 <body> 40 A 41 <div class="flexContainer"></div> 42 <div class="flexContainer" style="padding-bottom: 20px"></div> 43 <div class="flexContainer" style="padding: 10px"></div> 44 <div class="flexContainer" style="border-width: 3px"></div> 45 <div class="flexContainer" style="border-bottom-width: 4px"></div> 46 <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> 47 </body> 48 </html>