table-minmax.html (5132B)
1 <!doctype html> 2 <title>Table minmax tricks</title> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src="/resources/check-layout-th.js"></script> 6 <link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> 7 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 8 <link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> 9 <style> 10 main table { 11 background: gray; 12 border-spacing: 10px 10px; 13 table-layout: auto; 14 } 15 main td { 16 background: #BFB; 17 font-size: 10px; 18 box-sizing: border-box; 19 } 20 main td > div { 21 display: inline-block; 22 background: rgba(56,162,56,0.3); 23 line-height: 2; 24 } 25 .container { 26 border: 5px solid orange; 27 margin-top: 8px; 28 box-sizing: border-box; 29 width: 600px; 30 } 31 </style> 32 <main> 33 <h2>Table minmax</h2> 34 35 <p>How do different layout algorithms deal with table with an infinite max width?`</p> 36 <xmp> 37 <table> 38 <td style="width:100%"><div style="width:30px">100%</div></td> 39 <td><div style="width:100px">100px</div></td> 40 </table> 41 </xmp> 42 <p>Block layout clamps the max width, but flex/grid/table layouts do not. What happens?</p> 43 44 <p class="testdesc">Block layout</p> 45 <div class="container"> 46 <table data-expected-width=590> 47 <td style="width:100%"><div style="width:30px">100%</div></td> 48 <td><div style="width:100px">100px</div></td> 49 </table> 50 <div>sibling</div> 51 </div> 52 53 <p class="testdesc">Block layout with floats</p> 54 <div class="container"> 55 What about this? 56 <table style="float:left" data-expected-width=590> 57 <td style="width:100%"><div style="width:30px">100%</div></td> 58 <td><div style="width:100px">100px</div></td> 59 </table> 60 <div style="float:left">sibling</div> 61 <div style="clear:both"></div> 62 </div> 63 64 65 <p class="testdesc">Table layout</p> 66 67 <table class="container" style="width:auto"> 68 <td> 69 <table data-expected-width=160> 70 <td style="width:100%"><div style="width:30px">100%</div></td> 71 <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> 72 </table> 73 </td> 74 <td><div style="width:100px;">sibling</div></td> 75 </table> 76 77 <p class="testdesc">Flex layout 1 1 auto</p> 78 <p class="error">Edge is wider than flexbox</p> 79 <div class="container" style="display:flex;justify-content:center"> 80 <table style="flex: 1 1 auto" data-expected-width=355> 81 <td style="width:100%"><div style="width:30px">100%</div></td> 82 <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> 83 </table> 84 <div style="background:yellow;flex:1 1 40px">40px</div> 85 </div> 86 87 <p class="testdesc">Flex layout 0 0 auto</p> 88 89 <div class="container" style="display:flex;justify-content:center"> 90 <table style="flex: 0 0 auto" data-expected-width=160> 91 <td style="width:100%"><div style="width:30px">100%</div></td> 92 <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> 93 </table> 94 <div style="background:yellow;flex:1 1 auto">auto</div> 95 </div> 96 97 <h2>Empty table sizes</h2> 98 <p class="testdesc">Completely empty table</p> 99 <table style="border-spacing: 0px 0px;" data-expected-height=0 data-expected-width=0></table> 100 101 <p class="testdesc">Completely empty table with min-content width</p> 102 <table style="border-spacing: 0px 0px;width:min-content" data-expected-height=0 data-expected-width=0></table> 103 104 105 <p class="testdesc">Completely empty table with max-content width</p> 106 <table style="border-spacing: 0px 0px;width:max-content" data-expected-height=0 data-expected-width=0></table> 107 108 <p class="testdesc">Completely empty table with width/height</p> 109 <table style="border-spacing: 0px 0px;width:50px;height:50px" data-expected-height=50 data-expected-width=50></table> 110 111 <p class="testdesc">Empty table with border spacing</p> 112 <p class="error">Edge has width</p> 113 <table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0></table> 114 115 <p class="testdesc">Table with just tbody and border spacing</p> 116 <p class="error">Chrome Legacy has width and 1/2 height. Edge has width. Proposal: make table empty.</p> 117 <table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0> 118 <tbody> 119 </tbody> 120 </table> 121 122 <p class="testdesc">Table with tbody, tr, and border spacing</p> 123 <p class="error">Edge has height, 1/2 width. Chrome Legacy has width/height. Proposal: make table empty.</p> 124 <table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0> 125 <tbody> 126 <tr></tr> 127 </tbody> 128 </table> 129 130 <p class="testdesc">Empty table with borders</p> 131 <p class="error">Edge has width 30, height 20</p> 132 <table style="border: 10px solid green" data-expected-height=20 data-expected-width=20></table> 133 134 <p class="testdesc">Empty table with padding</p> 135 <p class="error">Edge has width 30, height 20</p> 136 <table style="padding: 10px" data-expected-height=20 data-expected-width=20></table> 137 138 <p class="testdesc">Empty table with caption</p> 139 <table data-expected-height=30 data-expected-width=100><caption><div style="width:100px;height:30px">caption</div></caption></table> 140 </main> 141 142 <script> 143 checkLayout("table"); 144 </script>