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>
103