Skip to content

Commit

Permalink
[TablesNG] TBODY height distribution tests
Browse files Browse the repository at this point in the history 
At the time these tests were written, there was no spec at all.

Change-Id: Id04a0a9159f0801c5507828d1519c1abee3f8060
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2851582
Commit-Queue: Aleks Totic <atotic@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#876950}
  • Loading branch information
@chromium-wpt-export-bot
Aleks Totic authored and chromium-wpt-export-bot committed Apr 28, 2021
1 parent b2c62f3 commit 2340988
Showing 1 changed file with 144 additions and 0 deletions.
144 changes: 144 additions & 0 deletions css/css-tables/tentative/tbody-height-redistribution.html
View file
@@ -0,0 +1,144 @@
<!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="atotic@chromium.org" />
<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's height is ignored.</p>
<table id="nine" >
<tbody style="height:75px" data-expected-height="0">
</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>

0 comments on commit 2340988

Please sign in to comment.