1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,102 @@
1.4 +<?xml version="1.0" encoding="UTF-8"?>
1.5 +<!--
1.6 + Any copyright is dedicated to the Public Domain.
1.7 + http://creativecommons.org/publicdomain/zero/1.0/
1.8 +-->
1.9 +<!--
1.10 + This test has a number of tables, each with 2 flexboxes side-by-side,
1.11 + whose "width" values depend on the flexbox's min and/or pref widths.
1.12 +
1.13 + There's not enough space for both flexboxes to fit side-by-side, so their
1.14 + width preferences must be balanced This exercises
1.15 + nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
1.16 +
1.17 + IN EACH CASE, div.a has these intrinsic widths:
1.18 + Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space)
1.19 + Min width: 50px (width of "aaaaa")
1.20 + and div.b has these intrinsic widths:
1.21 + Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space)
1.22 + Min width: 20px (width "bb")
1.23 +-->
1.24 +<html xmlns="http://www.w3.org/1999/xhtml">
1.25 + <head>
1.26 + <link rel="stylesheet" type="text/css" href="ahem.css" />
1.27 + <style>
1.28 + table {
1.29 + width: 300px;
1.30 + font: 10px Ahem;
1.31 + margin-bottom: 2px;
1.32 + border: 1px dashed black;
1.33 + }
1.34 +
1.35 + div.a, div.b { display: flex; }
1.36 +
1.37 + div.a { background: lightgreen; }
1.38 + div.b { background: lightblue; }
1.39 +
1.40 + <!-- helper-classes for assigning pref / min / auto-width to our divs -->
1.41 + div.prefWidth {
1.42 + width: -moz-max-content;
1.43 + }
1.44 + div.minWidth {
1.45 + width: -moz-min-content;
1.46 + }
1.47 + div.autoWidth {
1.48 + width: auto;
1.49 + }
1.50 + </style>
1.51 +</head>
1.52 +<body>
1.53 + <!-- both auto width -->
1.54 + <table cellpadding="0" cellspacing="0"><tr>
1.55 + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
1.56 + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
1.57 + </tr></table>
1.58 +
1.59 + <!-- MIXING MIN WIDTH & AUTO -->
1.60 + <!-- both min width -->
1.61 + <table cellpadding="0" cellspacing="0"><tr>
1.62 + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
1.63 + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
1.64 + </tr></table>
1.65 + <!-- min,auto -->
1.66 + <table cellpadding="0" cellspacing="0"><tr>
1.67 + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
1.68 + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
1.69 + </tr></table>
1.70 + <!-- auto,min -->
1.71 + <table cellpadding="0" cellspacing="0"><tr>
1.72 + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
1.73 + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
1.74 + </tr></table>
1.75 +
1.76 + <!-- MIXING PREF WIDTH & AUTO -->
1.77 + <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
1.78 + <table cellpadding="0" cellspacing="0"><tr>
1.79 + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
1.80 + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
1.81 + </tr></table>
1.82 + <!-- pref,auto -->
1.83 + <table cellpadding="0" cellspacing="0"><tr>
1.84 + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
1.85 + <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
1.86 + </tr></table>
1.87 + <!-- auto,pref -->
1.88 + <table cellpadding="0" cellspacing="0"><tr>
1.89 + <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
1.90 + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
1.91 + </tr></table>
1.92 +
1.93 + <!-- MIXING PREF WIDTH & MIN WIDTH -->
1.94 + <!-- min,pref -->
1.95 + <table cellpadding="0" cellspacing="0"><tr>
1.96 + <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
1.97 + <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
1.98 + </tr></table>
1.99 + <!-- pref,min -->
1.100 + <table cellpadding="0" cellspacing="0"><tr>
1.101 + <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
1.102 + <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
1.103 + </tr></table>
1.104 +</body>
1.105 +</html>
