flexbox-collapsed-item-baseline-001-ref.html (1997B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- In this reference case, we get each container to be sized the same as 7 in the testcase, without any visible baseline alignemnt, by using some 8 hidden flex items. 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 <style> 16 .flexContainer { 17 display: flex; 18 width: 50px; 19 background: yellow; 20 border: 1px dotted black; 21 margin: 5px; 22 align-items: flex-start; 23 } 24 .hiddenItemForSizing { 25 width: 0; 26 min-width: 0; /* disable default min-width:auto behavior */ 27 color: transparent; 28 align-self: baseline; 29 } 30 .largeFont { 31 font-size: 20px; 32 background: lightblue; 33 /* Our flex items get padding on opposite sides (top/bottom) so that they 34 produce a large combined height when baseline-aligned: */ 35 padding-top: 5px; 36 } 37 .smallFont { 38 font-size: 10px; 39 background: pink; 40 /* Our flex items get padding on opposite sides (top/bottom) so that they 41 produce a large combined height when baseline-aligned: */ 42 padding-bottom: 20px; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="flexContainer"> 48 <div class="largeFont">a</div> 49 <!-- Hidden flex items used to determine container's cross size, 50 based on their baseline-aligned combined cross size: --> 51 <div class="largeFont hiddenItemForSizing">a</div> 52 <div class="smallFont hiddenItemForSizing">b</div> 53 </div> 54 55 <div class="flexContainer"> 56 <div class="smallFont">b</div> 57 <!-- Hidden flex items used to determine container's cross size, 58 based on their baseline-aligned combined cross size: --> 59 <div class="largeFont hiddenItemForSizing">a</div> 60 <div class="smallFont hiddenItemForSizing">b</div> 61 </div> 62 </body> 63 </html>