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