flexbox-intrinsic-sizing-horiz-1a.xhtml (3629B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This test has a number of tables, each with 2 flexboxes side-by-side, 8 whose "width" values depend on the flexbox's min and/or pref widths. 9 10 There's not enough space for both flexboxes to fit side-by-side, so their 11 width preferences must be balanced This exercises 12 nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth(). 13 14 IN EACH CASE, div.a has these intrinsic widths: 15 Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space) 16 Min width: 50px (width of "aaaaa") 17 and div.b has these intrinsic widths: 18 Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space) 19 Min width: 20px (width "bb") 20 --> 21 <html xmlns="http://www.w3.org/1999/xhtml"> 22 <head> 23 <link rel="stylesheet" type="text/css" href="ahem.css" /> 24 <style> 25 table { 26 width: 300px; 27 font: 10px Ahem; 28 margin-bottom: 2px; 29 border: 1px dashed black; 30 } 31 32 div.a, div.b { display: flex; } 33 34 div.a { background: lightgreen; } 35 div.b { background: lightblue; } 36 37 <!-- helper-classes for assigning pref / min / auto-width to our divs --> 38 div.prefWidth { 39 width: max-content; 40 } 41 div.minWidth { 42 width: min-content; 43 } 44 div.autoWidth { 45 width: auto; 46 } 47 </style> 48 </head> 49 <body> 50 <!-- both auto width --> 51 <table cellpadding="0" cellspacing="0"><tr> 52 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> 53 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> 54 </tr></table> 55 56 <!-- MIXING MIN WIDTH & AUTO --> 57 <!-- both min width --> 58 <table cellpadding="0" cellspacing="0"><tr> 59 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> 60 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> 61 </tr></table> 62 <!-- min,auto --> 63 <table cellpadding="0" cellspacing="0"><tr> 64 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> 65 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> 66 </tr></table> 67 <!-- auto,min --> 68 <table cellpadding="0" cellspacing="0"><tr> 69 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> 70 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> 71 </tr></table> 72 73 <!-- MIXING PREF WIDTH & AUTO --> 74 <!-- both prefWidth (NOTE: makes the table larger than it wants to be --> 75 <table cellpadding="0" cellspacing="0"><tr> 76 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> 77 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> 78 </tr></table> 79 <!-- pref,auto --> 80 <table cellpadding="0" cellspacing="0"><tr> 81 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> 82 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> 83 </tr></table> 84 <!-- auto,pref --> 85 <table cellpadding="0" cellspacing="0"><tr> 86 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> 87 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> 88 </tr></table> 89 90 <!-- MIXING PREF WIDTH & MIN WIDTH --> 91 <!-- min,pref --> 92 <table cellpadding="0" cellspacing="0"><tr> 93 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> 94 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> 95 </tr></table> 96 <!-- pref,min --> 97 <table cellpadding="0" cellspacing="0"><tr> 98 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> 99 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> 100 </tr></table> 101 </body> 102 </html>