| <!doctype html> |
| <title>TBODY redistribution</title> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <link rel='stylesheet' href='../support/base.css' /> |
| <link rel="author" title="Aleks Totic" href="[email protected]" /> |
| <link rel="help" href="https://www.w3.org/TR/css-tables-3/#height-distribution-algorithm" /> |
| <style> |
| main table { |
| border-collapse: collapse; |
| background: #DDD; |
| } |
| main td { |
| padding: 0; |
| } |
| main td .empty { |
| line-height: 0; |
| } |
| main tbody tr:nth-child(1) { |
| background: rgba(255, 156, 0, 0.5); |
| } |
| main tbody tr:nth-child(2) { |
| background: rgba(255, 255, 0, 0.5); |
| } |
| main tbody tr:nth-child(3) { |
| background: rgba(0, 255, 0, 0.5); |
| } |
| </style> |
| <main> |
| <h1>TBODY/THEAD/TFOOT height redistribution.</h1> |
| <li>FF passes most of the tests. |
| <li>Legacy Chrome does not distribute TBODY height to rows. |
| <li>At the time this test was written, there was no spec. Currently, spec is in the process of being written. |
| |
| <p>1) Empty row group's size is 0 with collapsed borders</p> |
| <table id="one" style="border-collapse: collapse;border-spacing: 10px 10px;border:10px solid green" |
| data-expected-width="0" data-expected-height="0"> |
| <tbody> |
| <tr> </tr> |
| </tbody> |
| </table> |
| <p>2) Empty row group's size is 0 with separate borders.</p> |
| <table id="two" style="border-collapse: separate;border-spacing: 10px 10px;border:10px solid green" |
| data-expected-width="20" data-expected-height="20"> |
| <tbody> |
| <tr> </tr> |
| </tbody> |
| </table> |
| <p>3) Row group height is redistributed to unconstrained rows in proportion to their size.</p> |
| <table id="three"> |
| <tbody style="height:100px" data-expected-height="100"> |
| <tr data-expected-height="25"> |
| <td><div style="height:10px" >0,0</div></td> |
| </tr> |
| <tr data-expected-height="75"> |
| <td><div style="height:30px" >0,0</div></td> |
| </tr> |
| </tbody> |
| </table> |
| <p>4) Constrained fixed rows do not grow if there are unconstrained rows</p> |
| <table id="four"> |
| <tbody style="height:100px"> |
| <tr style="height: 10px" data-expected-height="10"> |
| <td></td> |
| </tr> |
| <tr data-expected-height="90"> |
| <td>0,1</td> |
| </tr> |
| </tbody> |
| </table> |
| <p>5) Constrained percentage are resolved against row group height.</p> |
| <table id="five"> |
| <tbody style="height:100px"> |
| <tr style="height:25%" data-expected-height="25"> |
| <td>0,0</td> |
| </tr> |
| <tr style="height:50%" data-expected-height="50"> |
| <td>0,0</td> |
| </tr> |
| <tr data-expected-height="25"> |
| <td>0,2</td> |
| </tr> |
| </tbody> |
| </table> |
| <p>6) Row group height is treated as min-height.</p> |
| <table id="six"> |
| <tbody style="height:100px" data-expected-height="125"> |
| <tr style="height:125px"> |
| <td>0,0</td> |
| </tr> |
| </tbody> |
| </table> |
| <p>7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.</p> |
| <table id="seven"> |
| <tbody style="height:100px"> |
| <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> |
| <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> |
| <tr data-expected-height="25"><td>0,2</td></tr> |
| <tr data-expected-height="25"><td>0,3</td></tr> |
| </tbody> |
| </table> |
| <p>8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.</p> |
| <table id="eight"> |
| <tbody style="height:100px"> |
| <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> |
| <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> |
| <tr data-expected-height="50"><td></td></tr> |
| </tbody> |
| </table> |
| <br> |
| <table id="eightplus"> |
| <tbody style="height:100px"> |
| <tr data-expected-height="50"><td></td></tr> |
| <tr style="height:20px" data-expected-height="20"><td>0,1</td></tr> |
| <tr style="height:30px" data-expected-height="30"><td>0,2</td></tr> |
| </tbody> |
| </table> |
| <p>9) Empty section height is not ignored</p> |
| <table id="nine" > |
| <tbody style="height:75px" data-expected-height="75"> |
| </tbody> |
| </table> |
| <p>10) Section with empty rows is not considered empty.</p> |
| <p>In FF, empty section height is 100, but table's height is 0?</p> |
| <table id="nine" > |
| <tbody style="height:75px" data-expected-height="75"> |
| <tr data-expected-height="25"></tr> |
| <tr data-expected-height="25"></tr> |
| <tr data-expected-height="25"></tr> |
| </tbody> |
| </table> |
| <p>11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p> |
| <table id="ten" style="width:50px"> |
| <tbody style="height:50px" data-expected-height="50"> |
| <tr style="height:0" data-expected-height="0"><td></td></tr> |
| <tr data-expected-height="25"><td></td></tr> |
| <tr data-expected-height="25"><td></td></tr> |
| </tbody> |
| </table> |
| </main> |
| <script> |
| checkLayout("table"); |
| </script> |
