Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / external / wpt / css / css-tables / tentative / table-height-redistribution.html
blob: 9c587e31b4f638abbc3733cf9ab1acfe28c77b7c [file] [log] [blame]
<!doctype html>
<title>TABLE height 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="atotic@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" />
<style>
main table {
border-collapse: collapse;
background: #DDD;
height: 100px;
}
main td {
padding: 0;
}
main table tbody:nth-child(1) {
background: #CCC;
}
main table tbody:nth-child(2) {
background: #AAA;
}
main table tbody:nth-child(3) {
background: #999;
}
main table thead {
background: rgba(0,255,0,0.3);
}
main table tfoot {
background: rgba(255,255,0,0.3);
}
main .test {
margin-top:24px;
}
</style>
<main>
<h1>Tests for redistribution of table height to row group height.</h1>
<p>This algorithm has not been standardized. Browsers implementations disagree</p>
<p class="test">Empty sections and rows do grow when table height forces it.</p>
<table>
<tbody data-expected-height="100">
<tr data-expected-height="100">
<td style="width:0;height:0" data-expected-height="100"></td>
</tr>
</tbody>
</table>
<p class="test">Unconstrained sections grow proportionally.</p>
<p>Chrome only grows first TBODY. This test expects only TBODYs to grow.</p>
<table >
<thead data-expected-height="15">
<tr><td><div style="height:15px">0,0</div></td></tr>
</thead>
<tbody data-expected-height="35">
<tr><td>1,0</td></tr>
</tbody>
<tbody data-expected-height="35">
<tr><td>2,0</td></tr>
</tbody>
<tfoot data-expected-height="15">
<tr><td><div style="height:15px">3,0</div></td></tr>
</tfoot>
</table>
<p class="test">Unconstrained sections grow proportionally to their size</p>
<table >
<tbody data-expected-height="75">
<tr><td>0,0</td></tr>
<tr><td>1,0</td></tr>
<tr><td>2,0</td></tr>
</tbody>
<tbody data-expected-height="25">
<tr><td>3,0</td></tr>
</tbody>
</table>
<p class="test">Fixed sections do not grow if there are unconstrained sections.</p>
<p>FF gets the right sizes, but gets locations wrong.</p>
<table>
<tbody style="height:30px" data-expected-height="30" data-offset-y="0">
<tr><td>0,0</td></tr>
</tbody>
<tbody data-expected-height="35" data-offset-y="30">
<tr><td>1,0</td></tr>
</tbody>
<tbody data-expected-height="35" data-offset-y="65">
<tr><td>2,0</td></tr>
</tbody>
</table>
<p class="test">Fixed sections grow proportionally to their height.</p>
<p>FF grows sections equally, not proportionally to height</p>
<table>
<tbody style="height:20px" data-expected-height="25">
<tr><td>0,0</td></tr>
</tbody>
<tbody style="height:60px" data-expected-height="75">
<tr><td>1,0</td></tr>
</tbody>
</table>
<p class="test">Percentage resolution size. Initial percentage resolution size should be undefined.
<table >
<tbody style="height:30%" data-expected-height="20">
<tr><td><div style="height:20px">0,0</div></td></tr>
</tbody>
<tbody style="height:70%" data-expected-height="20">
<tr><td><div style="height:20px">1,0</div></td></tr>
</tbody>
<tbody style="height:200px" data-expected-height="200">
<tr><td>1,0</td></tr>
</tbody>
</table>
<p class="test">Percentage resolution size. During table height redistribution, use table height as
percentage resolution height..
<table>
<tbody style="height:30%" data-expected-height="30">
<tr><td><div style="height:20px">0,0</div></td></tr>
</tbody>
<tbody style="height:70%" data-expected-height="70">
<tr><td><div style="height:20px">1,0</div></td></tr>
</tbody>
</table>
<p class="test">Redistribute percentage bodies proportional to their initial height
<table>
<tbody style="height:20%" data-expected-height="25">
<tr><td><div style="height:20px">0,0</div></td></tr>
</tbody>
<tbody style="height:60%" data-expected-height="75">
<tr><td><div style="height:20px">1,0</div></td></tr>
</tbody>
</table>
<p class="test">Table min-height is not ignored.</p>
<table style="min-height:200px;height:auto" data-expected-height="200">
<tbody>
<tr><td><div style="height:50px">0,0</div></td></tr>
</tbody>
</table>
<p class="test">Table max-height is ignored.</p>
<table style="max-height:90px;height:auto" data-expected-height="100">
<tbody>
<tr><td><div style="height:100px">0,0</div></td></tr>
</tbody>
</table>
<p class="test">Table height does not include caption</p>
<table style="height:100px;" >
<caption>not included</caption>
<tbody>
<tr data-expected-height="100"><td>0,0</td></tr>
</tbody>
</table>
<p class="test">Excess row percentage height is distributed greedily.</p>
<table style="height:160px">
<tbody>
<tr style="height:50%" data-expected-height="80">
<td >
<div style="height:20px">0,0</div>
</td>
</tr>
<tr style="height:30%" data-expected-height="48">
<td >
<div style="height:20px">1,0</div>
</td>
</tr>
<tr style="height:80%" data-expected-height="32">
<td >
<div style="height:20px">2,0</div>
</td>
</tr>
</tbody>
</table>
<p class="test">Row percentage height is influenced by percentage cells.</p>
<table style="height:100px">
<tbody>
<tr style="height:5%" data-expected-height="50">
<td style="height:50%">0,0</td>
</tr>
<tr style="height:5%" data-expected-height="30">
<td style="height:30%">1,0</td>
</tr>
<tr style="height:5%" data-expected-height="20">
<td style="height:20%">2,0</td>
</tr>
</tbody>
</table>
<p class="test">Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p>
<table style="width:50px;height:50px">
<tbody 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>