tbody-height-redistribution.html (4803B)
1 <!doctype html> 2 <title>TBODY redistribution</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' href='../support/base.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/#height-distribution-algorithm" /> 9 <style> 10 main table { 11 border-collapse: collapse; 12 background: #DDD; 13 } 14 main td { 15 padding: 0; 16 } 17 main td .empty { 18 line-height: 0; 19 } 20 main tbody tr:nth-child(1) { 21 background: rgba(255, 156, 0, 0.5); 22 } 23 main tbody tr:nth-child(2) { 24 background: rgba(255, 255, 0, 0.5); 25 } 26 main tbody tr:nth-child(3) { 27 background: rgba(0, 255, 0, 0.5); 28 } 29 </style> 30 <main> 31 <h1>TBODY/THEAD/TFOOT height redistribution.</h1> 32 <li>FF passes most of the tests. 33 <li>Legacy Chrome does not distribute TBODY height to rows. 34 <li>At the time this test was written, there was no spec. Currently, spec is in the process of being written. 35 36 <p>1) Empty row group's size is 0 with collapsed borders</p> 37 <table id="one" style="border-collapse: collapse;border-spacing: 10px 10px;border:10px solid green" 38 data-expected-width="0" data-expected-height="0"> 39 <tbody> 40 <tr> </tr> 41 </tbody> 42 </table> 43 <p>2) Empty row group's size is 0 with separate borders.</p> 44 <table id="two" style="border-collapse: separate;border-spacing: 10px 10px;border:10px solid green" 45 data-expected-width="20" data-expected-height="20"> 46 <tbody> 47 <tr> </tr> 48 </tbody> 49 </table> 50 <p>3) Row group height is redistributed to unconstrained rows in proportion to their size.</p> 51 <table id="three"> 52 <tbody style="height:100px" data-expected-height="100"> 53 <tr data-expected-height="25"> 54 <td><div style="height:10px" >0,0</div></td> 55 </tr> 56 <tr data-expected-height="75"> 57 <td><div style="height:30px" >0,0</div></td> 58 </tr> 59 </tbody> 60 </table> 61 <p>4) Constrained fixed rows do not grow if there are unconstrained rows</p> 62 <table id="four"> 63 <tbody style="height:100px"> 64 <tr style="height: 10px" data-expected-height="10"> 65 <td></td> 66 </tr> 67 <tr data-expected-height="90"> 68 <td>0,1</td> 69 </tr> 70 </tbody> 71 </table> 72 <p>5) Constrained percentage are resolved against row group height.</p> 73 <table id="five"> 74 <tbody style="height:100px"> 75 <tr style="height:25%" data-expected-height="25"> 76 <td>0,0</td> 77 </tr> 78 <tr style="height:50%" data-expected-height="50"> 79 <td>0,0</td> 80 </tr> 81 <tr data-expected-height="25"> 82 <td>0,2</td> 83 </tr> 84 </tbody> 85 </table> 86 <p>6) Row group height is treated as min-height.</p> 87 <table id="six"> 88 <tbody style="height:100px" data-expected-height="125"> 89 <tr style="height:125px"> 90 <td>0,0</td> 91 </tr> 92 </tbody> 93 </table> 94 <p>7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.</p> 95 <table id="seven"> 96 <tbody style="height:100px"> 97 <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> 98 <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> 99 <tr data-expected-height="25"><td>0,2</td></tr> 100 <tr data-expected-height="25"><td>0,3</td></tr> 101 </tbody> 102 </table> 103 <p>8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.</p> 104 <table id="eight"> 105 <tbody style="height:100px"> 106 <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> 107 <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> 108 <tr data-expected-height="50"><td></td></tr> 109 </tbody> 110 </table> 111 <br> 112 <table id="eightplus"> 113 <tbody style="height:100px"> 114 <tr data-expected-height="50"><td></td></tr> 115 <tr style="height:20px" data-expected-height="20"><td>0,1</td></tr> 116 <tr style="height:30px" data-expected-height="30"><td>0,2</td></tr> 117 </tbody> 118 </table> 119 <p>9) Empty section height is not ignored</p> 120 <table id="nine" > 121 <tbody style="height:75px" data-expected-height="75"> 122 </tbody> 123 </table> 124 <p>10) Section with empty rows is not considered empty.</p> 125 <p>In FF, empty section height is 100, but table's height is 0?</p> 126 <table id="nine" > 127 <tbody style="height:75px" data-expected-height="75"> 128 <tr data-expected-height="25"></tr> 129 <tr data-expected-height="25"></tr> 130 <tr data-expected-height="25"></tr> 131 </tbody> 132 </table> 133 <p>11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p> 134 <table id="ten" style="width:50px"> 135 <tbody style="height:50px" data-expected-height="50"> 136 <tr style="height:0" data-expected-height="0"><td></td></tr> 137 <tr data-expected-height="25"><td></td></tr> 138 <tr data-expected-height="25"><td></td></tr> 139 </tbody> 140 </table> 141 </main> 142 <script> 143 checkLayout("table"); 144 </script>