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     Reference case - see documentation in corresponding testcase.
8     This reference uses blocks where the testcase uses flexboxes.
9     They should be sized the same, since they're basically just text
10     with no special flex sizing properties in play.
11-->
12<html xmlns="http://www.w3.org/1999/xhtml">
13  <head>
14    <link rel="stylesheet" type="text/css" href="ahem.css" />
15    <style>
16      table {
17        width: 300px;
18        font: 10px Ahem;
19        margin-bottom: 2px;
20        border: 1px dashed black;
21      }
22
23      div.a { background: lightgreen; }
24      div.b { background: lightblue;  }
25
26      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
27      div.prefWidth {
28        width: max-content;
29      }
30      div.minWidth {
31        width: min-content;
32      }
33      div.autoWidth {
34        width: auto;
35      }
36  </style>
37</head>
38<body>
39  <!-- both auto width -->
40   <table cellpadding="0" cellspacing="0"><tr>
41       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
42       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
43   </tr></table>
44
45   <!-- MIXING MIN WIDTH & AUTO -->
46   <!-- both min width -->
47   <table cellpadding="0" cellspacing="0"><tr>
48       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
49       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
50   </tr></table>
51   <!-- min,auto -->
52   <table cellpadding="0" cellspacing="0"><tr>
53       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
54       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
55   </tr></table>
56   <!-- auto,min -->
57   <table cellpadding="0" cellspacing="0"><tr>
58       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
59       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
60   </tr></table>
61
62   <!-- MIXING PREF WIDTH & AUTO -->
63   <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
64   <table cellpadding="0" cellspacing="0"><tr>
65       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
66       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
67   </tr></table>
68   <!-- pref,auto -->
69   <table cellpadding="0" cellspacing="0"><tr>
70       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
71       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
72   </tr></table>
73   <!-- auto,pref -->
74   <table cellpadding="0" cellspacing="0"><tr>
75       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
76       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
77   </tr></table>
78
79   <!-- MIXING PREF WIDTH & MIN WIDTH -->
80   <!-- min,pref -->
81   <table cellpadding="0" cellspacing="0"><tr>
82       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
83       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
84   </tr></table>
85   <!-- pref,min -->
86   <table cellpadding="0" cellspacing="0"><tr>
87       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
88       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
89   </tr></table>
90</body>
91</html>
92