table-fixed-minmax.html (4990B)
1 <!doctype html> 2 <title>Table minmax tricks</title> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 6 <link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> 7 <style> 8 main table { 9 table-layout:fixed; 10 width: 100%; 11 background: #ddd; 12 border-spacing: 0; 13 } 14 main td { 15 padding: 0; 16 } 17 </style> 18 <h1>Infinite intrinsic table widths</h1> 19 <p>Originally, algorithm for computing intrinsic table inline size had a special case: <br> 20 If table is fixed, and has a width:%, its intrinsic inline size was "infinite". <br> 21 This ensured that fixed table with 100% width inside block layout would expand to container's width. </p> 22 <p>Different containers do not have reasonable handling of intrinsic infinitely sized 23 children. For those, table's intrinsic size should never be infinite, but instead 24 default to regular max size.</p> 25 26 <main> 27 <h3>Flexbox</h3> 28 29 <p>flex width:auto</p> 30 <div id="flextest" style="display:flex;"> 31 <table> 32 <td>flex</td> 33 </table> 34 <div style="width:98px;border:1px solid black;flex-shrink:0">flex div</div> 35 </div> 36 37 <p>flex width:max-content</p> 38 <div id="flextest_max" style="display:flex;width:max-content"> 39 <table> 40 <td><div style="width:100px">flex</div></td> 41 </table> 42 <div style="width:100px;border:1px solid black;flex-shrink:0">flex div</div> 43 </div> 44 45 <p>flex width:min-content</p> 46 <div id="flextest_min1" style="display: flex; width: min-content;"> 47 <table style="flex: 0 0 content; min-width: 0px;"> 48 <td style="width: 100px;"></td> 49 </table> 50 </div> 51 52 <div id="flextest_min2" style="display: flex; width: min-content;"> 53 <div style="flex: 0 0 auto; min-width: 0px;"> 54 <table> 55 <td style="width: 100px;"></td> 56 </table> 57 </div> 58 </div> 59 60 <h3>Grid</h3> 61 <p>grid width:auto</p> 62 <div id="grid" style="display:grid;grid-template-columns: 1fr;width:auto"> 63 <table> 64 <td><div style="width:100px">grid</div></td> 65 </table> 66 </div> 67 <p>grid width:max-content</p> 68 <div id="grid_max" style="display:grid;grid-template-columns: 1fr;width:max-content"> 69 <table> 70 <td><div style="width:100px">grid</div></td> 71 </table> 72 </div> 73 74 <h3>Table</h3> 75 <table id="table_container" style="table-layout:auto;width:auto; background: #aaa;"> 76 <tr> 77 <td> 78 <table> 79 <td><div style="width:100px">table</div></td> 80 </table> 81 </td> 82 </tr> 83 </table> 84 85 <h3>Absolute</h3> 86 <div id="absolute" style="width:400px;height:100px;outline:solid 1px green;position:relative"> 87 <table style="position:absolute;right:0;top:0"> 88 <td>absolute</td> 89 </table> 90 </div> 91 92 <script> 93 test(_ => { 94 let flexbox = document.querySelector("#flextest"); 95 let table = flexbox.querySelector("table"); 96 let div = flexbox.querySelector("div"); 97 assert_equals(div.offsetWidth, 100); 98 assert_equals(flexbox.offsetWidth, document.body.offsetWidth); 99 assert_equals(flexbox.offsetWidth, table.offsetWidth + div.offsetWidth); 100 }, "table's width inside flexbox width:auto is not infinite"); 101 102 test(_ => { 103 let flexbox = document.querySelector("#flextest_max"); 104 let table = flexbox.querySelector("table"); 105 assert_greater_than(table.offsetWidth, document.body.offsetWidth); 106 }, "table's width inside flexbox width:max-content is infinite"); 107 108 test(_ => { 109 let flexbox = document.querySelector("#flextest_min1"); 110 let table = flexbox.querySelector("table"); 111 assert_equals(flexbox.offsetWidth, 100); 112 assert_greater_than(table.offsetWidth, document.body.offsetWidth); 113 }, "table's width inside flexbox width:min-content is infinite, but the flexbox is finite; scenario 1"); 114 115 test(_ => { 116 let flexbox = document.querySelector("#flextest_min2"); 117 let table = flexbox.querySelector("table"); 118 assert_equals(flexbox.offsetWidth, 100); 119 assert_greater_than(table.offsetWidth, document.body.offsetWidth); 120 }, "table's width inside flexbox width:min-content is infinite, but the flexbox is finite; scenario 2"); 121 122 test(_ => { 123 let grid = document.querySelector("#grid"); 124 let table = grid.querySelector("table"); 125 assert_equals(grid.offsetWidth, document.body.offsetWidth); 126 assert_equals(grid.offsetWidth, table.offsetWidth); 127 }, "table's width inside grid width:auto is not infinite"); 128 129 test(_ => { 130 let grid = document.querySelector("#grid_max"); 131 let table = grid.querySelector("table"); 132 assert_greater_than(table.offsetWidth, document.body.offsetWidth); 133 }, "table's width inside grid width:max-content is infinite"); 134 135 test(_ => { 136 let table = document.querySelector("#table_container"); 137 assert_equals(table.offsetWidth, document.body.offsetWidth); 138 }, "table's width inside a table cell is infinite"); 139 140 test(_ => { 141 let abs = document.querySelector("#absolute"); 142 let table = abs.querySelector("table"); 143 assert_equals(table.offsetWidth, abs.offsetWidth); 144 }, "table's width inside an absolute block is infinite"); 145 146 </script>