wpt / css / css-tables / tentative / rowspan-height-redistribution.html

Status: FAIL | Duration: 10ms | Subtests: 2/24 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (2/24)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
table 1PASS
table 2FAILassert_equals: data-expected-height expected 50 got 0 assert_equals: data-expected-height expected 50 got 0
table 3FAILassert_equals: data-expected-height expected 50 got 0 assert_equals: data-expected-height expected 50 got 0
table 4FAILassert_equals: data-expected-height expected 50 got 0 assert_equals: data-expected-height expected 50 got 0
table 5FAILassert_equals: data-expected-height expected 75 got 0 assert_equals: data-expected-height expected 25 got 0
table 6FAILassert_equals: data-expected-height expected 30 got 0 assert_equals: data-expected-height expected 70 got 0
table 7FAILassert_equals: data-expected-height expected 25 got 0 assert_equals: data-expected-height expected 25 got 0 assert_equals: data-expected-height expected 50 got 0
table 8FAILassert_equals: data-expected-height expected 50 got 0 assert_equals: data-expected-height expected 50 got 0
table 9FAILassert_equals: data-expected-height expected 50 got 0 assert_equals: data-expected-height expected 50 got 0
table 10FAILassert_equals: data-expected-height expected 99 got 0
table 11FAILassert_equals: data-expected-height expected 99 got 0
table 12FAILassert_equals: data-expected-height expected 99 got 0
table 13FAILassert_equals: data-expected-height expected 100 got 0
table 14FAILassert_equals: data-expected-height expected 100 got 0
table 15FAILassert_equals: data-expected-height expected 100 got 0 assert_equals: data-expected-height expected 50 got 19 assert_equals: data-expected-height expected 50 got 19
table 16FAILassert_equals: data-expected-height expected 100 got 0
table 17FAILassert_equals: data-expected-height expected 100 got 0
table 18FAILassert_equals: data-expected-height expected 100 got 0
table 19PASS
table 20FAILassert_equals: data-expected-height expected 100 got 0
table 21FAILassert_equals: data-expected-height expected 100 got 0
table 22FAILassert_equals: data-expected-height expected 360 got 411 assert_equals: data-expected-height expected 110 got 0 assert_equals: data-expected-height expected 110 got 0
table 23FAILassert_equals: data-expected-height expected 120 got 0 assert_equals: data-expected-height expected 110 got 0 assert_equals: data-expected-height expected 110 got 0
table 24FAILassert_equals: data-expected-height expected 100 got 0

/css/css-tables/tentative/rowspan-height-redistribution.html

<!doctype html>
<title>ROWSPAN 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" type="text/css" href="./support/table-tentative.css">
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" />
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4418" />
<style>
  main table {
    margin-top: 8px;
    border-collapse: collapse;
    background: rgba(0,0,255,0.1);
    background-image: linear-gradient(45deg, #DDD 25%, transparent 25%), linear-gradient(-45deg, #DDD 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #DDD 75%), linear-gradient(-45deg, transparent 75%, #DDD 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  .sizer {
    width: 30px;
    height: 100px;
  }
  main tbody tr:nth-child(odd) {
    background: rgba(255,255,0,1.0);
  }
  main tbody tr:nth-child(even) {
    background: rgba(255,165,0,1.0);
  }
  main td div {
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba(0,255,0,0.7) 100%);
  }
  main .td-padding td {
    padding: 2px;
  }
  main .td-padding-xl td {
    padding: 10px;
  }
</style>
<main>
<h1>ROWSPAN > 1 to row distribution</h1>
<p>The algorithm has not been standardized. This is my understanding of how it works.</p>
<ol>
  <li>rowspan>1 TDs are sorted:</li>
    <ol>
      <li>If TD span the same rows, taller TD is distributed first.</li>
      <li>If one TD is fully enclosed by another, inner TD is distributed first.</li>
      <li>Otherwise, higher TD is distributed first.</li>
    </ol>
  <li>Each rowspan>1 TD's height is distributed as following</li>
    <ol>
      <li>rowspan > 1 TDs have height TDh, span N rows. N rows have total height of Rh. TDh - Rh height, Dh, must be distributed as follows.</li>
      <li>If percentage resolution size is available (this happens when redistributiong table/section height), percentage rows grow to their percentage size, proportional to (percentage size - current size). Dh shrinks by distributed height. Justification: explicit percentage rows should grow to their percentage.</li>
      <li>Rows that originate rowspan>1 cells get all the Dh height, distributed evenly. Justification: rowspan>1 rows are likely to need to grow later. If there are multiple rowspan>1 cells, there can be multiple originating rows.</li>
      <li>Unconstrained non-empty rows grow, proportional to their existing height.</li>
      <li>If all rows are empty, last row gets all the height. Justification: ???</li>
      <li>Contstrained rows grow in proportion to current height.</li>
    </ol>
  </ol>
<p class="error">It is unclear what the existing ChromeLegacy/FF algorithms do for distribution over rowspan>1 and empty cells. <a href="https://dxr.mozilla.org/mozilla-central/source/layout/tables/nsTableRowGroupFrame.cpp#509">FF special cases</a> "there is no cell originating in the row with owspan=1 and there are at least 2 cells spanning the row. Chrome Legacy also tries to do something similar, but they disagree on what. TablesNG will try to ship without special cases.</p>
 <p class="error">Safari fails most of these tests</p>
<p>Color scheme</p>
<table>
  <tr>
    <td>odd rows are yellow</td>
  </tr>
  <tr>
    <td>even rows are orange</td>
  </tr>
  <tr>
    <td><div style="height:50px">inner divs have a green gradient</div>
    </td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
 <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>

</table>
<h2>Unconstrained rows</h2>
 <p>Rows whose height is not fixed or percent are unconstrained.</p>
<p class="testdesc">Unconstrained rows
Unconstrained rows are redistributed proportionally. Rows are constrained if their height is fixed, or percent.</p>
<table>
  <tbody>
    <tr data-expected-height="50">
      <td>0,0</td>
      <td rowspan="2"><div class="sizer"></div></td>
    </tr>
    <tr data-expected-height="50">
      <td>0,1</td>
    </tr>
</table>

<p class="testdesc">Unconstrained rows with zero height do not grow.</p>
<table>
  <tbody>
    <tr data-expected-height="50">
      <td>0,0</td>
      <td rowspan="3"><div class="sizer"></div></td>
    </tr>
    <tr data-expected-height="0">
    </tr>
    <tr data-expected-height="50">
      <td>0,2</td>
    </tr>
</table>

<p class="testdesc">rowspan>1 is zero height, spanned rows have height.</p>
<table>
  <tbody>
    <tr data-expected-height="0">
      <td></td>
      <td rowspan="3"><div class="sizer"></div></td>
      <td></td>
    </tr>
    <tr data-expected-height="50">
      <td>1,0</td>
      <td></td>
    </tr>
    <tr data-expected-height="50">
      <td>2,0</td>
      <td></td>
    </tr>
</table>

<p class="testdesc">Unconstrained rows are redistributed proportionally to heights</p>
<table>
  <tbody>
    <tr data-expected-height="75">
      <td><div style="height:45px">0,0</div></td>
      <td rowspan="2"><div class="sizer"></div></td>
    </tr>
    <tr data-expected-height="25">
      <td><div style="height:15px">0,1</div></td>
    </tr>
</table>

<h2>Fixed rows</h2>

<p class="testdesc">Constrained fixed rows
do not grow if there are unconstrained ones</p>
<p class="error">Edge grows constrained rows too</p>
<table>
  <tbody>
    <tr style="height: 30px" data-expected-height="30">
      <td>0,0 30px</td>
      <td rowspan="2"><div class="sizer"></div></td>
    </tr>
    <tr data-expected-height="70">
      <td>0,1</td>
    </tr>
</table>

<p class="testdesc"> Constrained fixed rows
grow proportionally to their size if there are no unconstrained rows</p>
<table>
  <tbody>
    <tr style="height: 20px" data-expected-height="25">
      <td>20</div></td>
      <td rowspan="3"><div class="sizer"></div></td>
    </tr>
    <tr style="height: 20px" data-expected-height="25">
      <td>20</td>
    </tr>
    <tr style="height: 40px" data-expected-height="50">
      <td>40</td>
    </tr>
</table>

<h2>Percent rows</h2>

<p class="testdesc">Constrained percent rows
grow like unconstrained ones when percent resolution size is undefined.</p>
<p class="error">FF always treats percent rows as constrained. Chrome legacy does resolve percentage against final height of the table. I do not think that can work. Edge follows NG.</p>
<table>
  <tbody>
    <tr style="height: 30%" data-expected-height="50">
      <td>0,0 30%</td>
      <td rowspan="2"><div class="sizer"></div></td>
    </tr>
    <tr data-expected-height="50">
      <td>0,1</td>
    </tr>
    <tr style="height:100px"><td>100px</td></tr>
</table>


<p class="testdesc">Percent rows with zero height
do not grow.</p>
<p class="error">Legacy Chrome has a strange gap between rows</p>
<table>
  <tbody>
    <tr data-expected-height="50">
      <td>0,0</td>
      <td rowspan="3"><div class="sizer"></div></td>
    </tr>
    <tr style="height:10%;background:red" data-expected-height="0">
    </tr>
    <tr data-expected-height="50">
      <td>2,0</td>
    </tr>
</table>

<h2>Order of rowspan distribution</h2>


<p class="testdesc">If cells span the same rows, bigger cell is distributed first
Not sure how to test this, I think it is just an optimization, there is no observable effect.
<p class="error">FF and Legacy Chrome unexpectedly distribute height evenly between rows in the first test case. Edge and TablesNG do not.</p>
<table>
  <tr data-expected-height=0>
    <td rowspan=3><div style="height:50px"></div></td>
    <td rowspan=3><div style="height:99px"></div></td>
  </tr>
  <tr data-expected-height=0>
  </tr>
  <tr data-expected-height=99>
  </tr>
  <tr>
    <td>bottom</td>
    <td>bottom</td>
  </tr>
</table>
<table>
  <tr data-expected-height=0>
    <td rowspan=3><div style="height:50px"></div></td>
    <td rowspan=3><div style="height:99px"></div></td>
    <td style="width:20px"></td>
  </tr>
  <tr data-expected-height=0>
    <td></td>
  </tr>
  <tr data-expected-height=99>
    <td></td>
  </tr>
  <tr>
    <td>bottom</td>
    <td>bottom</td>
  </tr>
</table>
<table>
  <tr data-expected-height=0>
    <td rowspan=3><div style="height:99px;width:20px"></div></td>
  </tr>
  <tr></tr>
  <tr data-expected-height=99></tr>
 <tr>
    <td>bottom</td>
    <td>bottom</td>
  </tr>
</table>


<p class="testdesc">If one cell is fully enclosed by another, inner cell wins.
<p class="error">Not in Edge</p>
<table>
  <tr data-expected-height=0>
    <td rowspan=4><div style="height:50px;width:20px"></div></td>
    <td></td>
  <tr data-expected-height=0>
    <td></td>
    <td rowspan=2><div style="height:100px;width:20px"></div></td>
  </tr>
  <tr data-expected-height=100></tr>
  <tr data-expected-height=0></tr>
</tr>
</table>

<p class="testdesc">First row wins.
rowspan-4 distributes 50 to last empty row, row3. rowspan-3 distributes 100px to only nonempty row, row3.
<p class="error">Edge disagrees here.</p>
<table>
  <tr data-expected-height=0>
    <td rowspan=4><div style="height:50px;width:20px"></div></td>
    <td></td>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=100>
    <td></td>
    <td rowspan=3><div style="height:100px;width:20px"></div></td>
  </tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
</tr>
</table>

<h2>Rowspan distribution over empty rows.</h2>

<p class="testdesc">Rowspans that span non-existent rows
Span is truncated so only existing rows are spanned.</p>
<table>
  <tbody data-expected-height="100">
    <tr>
      <td data-expected-height="50">0,0</td>
      <td data-expected-height="100" rowspan="5"><div style="height:100px;">rowspan 5</div></td>
    </tr>
    <tr>
      <td data-expected-height="50">1,0</td>
    </tr>
    <tr data-expected-height="0"></tr>
  </tbody>
  <tbody>
    <tr>
      <td>body 2</td>
    </tr>
  </tbody>
</table>

<p class="testdesc">Rowspan spans only empty rows
Last spanned row gets all the height.
<p class="error">Edge distributes height to all empty rows, not just last.</p>
<table>
  <tr>
    <td>first row</td>
  </tr>
  <tr data-expected-height=0>
    <td></td>
    <td rowspan=5><div style="height:100px;width:30px;"></div></td>
  </tr>
  <tr data-expected-height=0><td></td></tr>
  <tr data-expected-height=0><td></td></tr>
  <tr data-expected-height=0><td></td></tr>
  <tr data-expected-height=100><td></td></tr>
  <tr>
    <td>last row</td>
  </tr>
</table>

<p class="testdesc">TD is not considered empty if it has padding, but no content
<table>
  <tr>
    <td>first row</td>
  </tr>
  <tr data-expected-height=0>
    <td></td>
    <td style="height:100px" rowspan=3></td>
  </tr>
  <tr data-expected-height=100><td style="padding:2px"></td></tr>
  <tr data-expected-height=0></tr>
  <tr>
    <td>last row</td>
  </tr>
</table>

<p class="testdesc">row with an empty tall cell is not considered empty.
<p class="error">
<table>
  <tr>
    <td rowspan=5><div style="height:100px">rowspan</div></td>
    <td></td>
    <td></td>
  </tr>
  <tr data-expected-height=100>
    <td rowspan=5></td>
    <td></td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

<p class="testdesc">Empty rows with border-spacing big enough for rowspan cell
rows are 0 height, cell spans the entire table.
<table style="border-spacing:20px;border-collapse:separate " data-expected-height=100>
  <tr data-expected-height=0>
    <td rowspan=4><div style="height:60px;width:40px"></div></td>
  </tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
</table>

<p class="testdesc">row with a non-empty rowspan>0 cell is empty.
Distributes to all rows except start row?
<p class="error">
<table>
  <tr>
    <td rowspan=5><div style="height:100px">rowspan</div></td>
    <td></td>
  </tr>
  <tr data-expected-height=100>
    <td rowspan=5><div style="height:100px">rowspan</div></td>
  </tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
  <tr></tr>
  <tr></tr>
</table>
<table>
  <tr>
    <td rowspan=5><div style="height:100px">rowspan</div></td>
    <td></td>
  </tr>
  <tr data-expected-height=100>
    <td>yo</td>
  </tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
  <tr data-expected-height=0></tr>
</table>


<p class="testdesc">Distribution over rowspan > 1 rows
Distribution over rowspan > 1 rows

<table class="td-padding-xl" data-expected-height=360>
  <tr>
    <td rowspan=6><div style="width:50px;height:280px"></div></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr style="height:30%;background:purple">
    <td data-expected-height=20></td>
  </tr>
  <tr data-expected-height=110>
    <td rowspan=7 ></td>
  </tr>
  <tr data-expected-height=110>
    <td rowspan=17 ><div style="width:50px;height:40px"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
    <tr>
    <td></td>
  </tr>
    <tr>
    <td></td>
  </tr>
</table>

<p class="testdesc">Distribution of table height over rowspan > 1 rows
If there are any unconstrained non-empty rows, they get it.
When all rows are empty, last row takes it</p>
<table class="td-padding-xl" style="height:460px">
  <tr>
    <td rowspan=6><div style="width:50px;height:280px" data-expected-height=280></div></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr style="height:30%;background:purple" data-expected-height=120>
    <td ></td>
  </tr>
  <tr data-expected-height=110>
    <td rowspan=7 ></td>
  </tr>
  <tr data-expected-height=110>
    <td rowspan=17><div style="width:50px;height:40px"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
    <tr>
    <td></td>
  </tr>
    <tr>
    <td></td>
  </tr>
</table>

<p class="testdesc">Distribution of rowspan over percentage rows
Percentage rows are considered empty if they cannot resolve</p>
<table>
  <tbody>
    <tr style="height:20%">
      <td rowspan=3><div style="height:100px;width:100px"></div></td>
      <td></td>
    </tr>
    <tr style="height:30%">
      <td></td>
    </tr>
    <tr data-expected-height=100 style="height:50%">
      <td></td>
    </tr>
  </tbody>
</table>

</main>
<script>
  checkLayout("table");
</script>