flexbox-baseline-multi-line-horiz-002.html (2116B)
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 horizontal flex container 7 with several flex lines (wrapping in the reverse direction). 8 The spec says this about this case: 9 [Given that the first line has no baseline-aligned items:] 10 ...if the flex container has at least one flex item, and its 11 first flex item has a baseline parallel to the flex 12 container's main axis, the flex container's main-axis 13 baseline is that baseline. 14 --> 15 <html> 16 <head> 17 <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> 18 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 19 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> 20 <link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html"> 21 <meta charset="utf-8"> 22 <style> 23 .flexContainer { 24 display: inline-flex; 25 flex-wrap: wrap-reverse; 26 width: 40px; 27 height: 40px; 28 background: lightblue; 29 } 30 .flexContainer > * { 31 width: 20px; 32 } 33 34 /* We'll make the second flex line not paint anything, so that the 35 reference case doesn't need to bother matching it. */ 36 .flexContainer > *:nth-child(1), 37 .flexContainer > *:nth-child(2) { 38 visibility: hidden; 39 } 40 41 .smallFont { 42 font-size: 8px; 43 line-height: 8px; 44 } 45 .medFont { 46 font-size: 12px; 47 line-height: 12px; 48 } 49 .bigFont { 50 font-size: 16px; 51 line-height: 16px; 52 } 53 </style> 54 </head> 55 <body> 56 a 57 <!-- Flex containers with flex items that have a mix of baselines: --> 58 <div class="flexContainer"> 59 <div class="medFont">b</div 60 ><div class="bigFont">c</div 61 ><div class="bigFont">d</div 62 ><div class="medFont">e</div> 63 </div> 64 65 <div class="flexContainer"> 66 <div class="bigFont">f</div 67 ><div class="smallFont">g</div 68 ><div class="bigFont">h</div 69 ><div class="medFont">i</div> 70 </div> 71 n 72 73 </body> 74 </html>