flexbox-collapsed-item-baseline-001.html (1632B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> 11 <link rel="match" href="flexbox-collapsed-item-baseline-001-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 width: 50px; 17 background: yellow; 18 border: 1px dotted black; 19 margin: 5px; 20 align-items: baseline; 21 } 22 .collapse { 23 visibility: collapse; 24 } 25 .largeFont { 26 font-size: 20px; 27 background: lightblue; 28 /* Our flex items get padding on opposite sides (top/bottom) so that they 29 produce a large combined height when baseline-aligned: */ 30 padding-top: 5px; 31 } 32 .smallFont { 33 font-size: 10px; 34 background: pink; 35 /* Our flex items get padding on opposite sides (top/bottom) so that they 36 produce a large combined height when baseline-aligned: */ 37 padding-bottom: 20px; 38 } 39 </style> 40 </head> 41 <body> 42 <!-- Second item collapsed: --> 43 <div class="flexContainer"> 44 <div class="largeFont">a</div> 45 <div class="smallFont collapse">b</div> 46 </div> 47 48 <!-- First item collapsed: --> 49 <div class="flexContainer"> 50 <div class="largeFont collapse">a</div> 51 <div class="smallFont">b</div> 52 </div> 53 </body> 54 </html>