wpt / css / css-tables / tentative / table-width-redistribution-fixed-padding.html

Status: FAIL | Duration: 7ms | Subtests: 0/15 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/15)

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

SubtestStatusMessage
table 1FAILassert_equals: data-expected-width expected 248 got 50
table 2FAILassert_equals: data-expected-width expected 138 got 112 assert_equals: data-expected-width expected 138 got 112
table 3FAILassert_equals: data-expected-width expected 150 got 112 assert_equals: data-expected-width expected 150 got 112
table 4FAILassert_equals: data-expected-width expected 248 got 100
table 5FAILassert_equals: data-expected-width expected 128 got 16
table 6FAILassert_equals: data-expected-width expected 86 got 16 assert_equals: data-expected-width expected 0 got 142 assert_equals: data-expected-width expected 70 got 212
table 7FAILassert_equals: data-expected-width expected 108 got 324 assert_equals: data-expected-width expected 50 got 108
table 8FAILassert_equals: data-expected-width expected 168 got 267 assert_equals: data-expected-width expected 88 got 217 assert_equals: data-expected-width expected 160 got 52 assert_equals: data-expected-width expected 80 got 173 assert_equals: data-expected-width expected 80 got 86 assert_equals: data-expected-width expected 40 got 173 assert_equals: data-expected-width expected 40 got 36 assert_equals: data-expected-width expected 160 got 52
table 9FAILassert_equals: data-expected-width expected 144 got 16 assert_equals: data-expected-width expected 8 got 138 assert_equals: data-expected-width expected 0 got 18 assert_equals: data-expected-width expected 0 got 112
table 10FAILassert_equals: data-expected-width expected 48 got 51 assert_equals: data-expected-width expected 216 got 213
table 11FAILassert_equals: data-expected-width expected 63 got 76 assert_equals: data-expected-width expected 42 got 46 assert_equals: data-expected-width expected 31 got 30
table 12FAILassert_equals: data-expected-width expected 60 got 38 assert_equals: data-expected-width expected 42.5 got 23 assert_equals: data-expected-width expected 33 got 15
table 13FAILassert_equals: data-expected-width expected 63 got 76 assert_equals: data-expected-width expected 42 got 46 assert_equals: data-expected-width expected 31 got 30
table 14FAILassert_equals: data-expected-width expected 38 got 54
table 15FAILassert_equals: data-expected-width expected 9 got 23 assert_equals: data-expected-width expected 19 got 70

/css/css-tables/tentative/table-width-redistribution-fixed-padding.html

<!doctype html>
<title>Columns widths fixed + padding</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://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" />
<style>
  body {
    background: #EEE;
  }
  main table {
    background: gray;
    border-spacing: 8px 8px;
    table-layout: fixed;
  }
  main td {
    padding: 6px;
    background: #BFB;
    font-size: 10px;
    box-sizing:content-box;
  }
  main td > div {
    display: inline-block;
    background: rgba(56,162,56,0.3);
  }
</style>
<main>
<h1>Fixed tables with padding: Compute column computed widths from assignable table width</h1>

<p>This test is the similar to table-width-redistribution-fixed.html,
  except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.</p>

<p class="error">Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome. </p>

<h2>Fixed only</h2>

<p 3 class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100
When table.css_width is < columns.css_width, how is the conflict resolved?
columns.css_width wins
<p class="error">
<table style="width:50px" data-expected-width=248>
  <tr>
    <td style="width:100px" data-expected-width=112>
      <div style="width:50px">50</div><div style="width:50px">50</div></td>
    <td style="width:100px" data-expected-width=112>
      <div style="width:50px">50</div><div style="width:25px">25</div></td>
  </tr>
</table>

<p 4 class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115
When table.css_width is > columns.css_width , how is the conflict resolved?
table.css_width wins</p>
<table style="width:300px" data-expected-width=300>
  <tr>
    <td style="width:100px" data-expected-width=138>
      <div style="width:100px">100</div><div style="width:100px">100</div></td>
    <td style="width:100px" data-expected-width=138>
      <div style="width:90px">90</div><div style="width:25px">25</div></td>
  </tr>
</table>

<p 5 class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100
Fixed cells must grow, but their min widths differ.
Fixed cells grow in proportion to their css width.
<table style="width:calc(300px + 24px)" data-expected-width=324>
  <tr>
    <td style="width:100px" data-expected-width=150>
      <div style="width:50px">50</div></td>
    <td style="width:100px" data-expected-width=150>
      <div style="width:100px">100</div></td>
  </tr>
</table>

<p 6 class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100
What happens when column.min_width > column.css_width
column.css_width wins over column.min_width.
<table style="width:100px" data-expected-width=248>
  <tr>
    <td style="width:100px" data-expected-width=112>
      <div style="width:200px"></div></td>
    <td style="width:100px" data-expected-width=112>
      <div style="width:200px"></div></td>
  </tr>
</table>

<p 7 class="testdesc">Table: 1px.
What happens to min_width when multiple cells specify css_width of the same column?
1st cell wins.
<table style="width:1px" data-expected-width=128>
  <tr>
    <td style="width:100px" data-expected-width=112>
      <div style="width:200px">200</div></td>
  </tr>
      <td style="width:150px" data-expected-width=112>
        <div style="width:150px">150</div></td>
  </tr>
</table>


<h2>Colspan distribution</h2>

<p 9 class="testdesc">Table: 1px
Does column.min_width change with colspan distribution from later rows to first row?
No
<table style="width:1px" data-expected-width=86>
  <tr>
    <td data-expected-width=0>
      <div style="width:50px"></div></td>
    <td style="width:50px" data-expected-width=62>
      <div style="width:50px"></div></td>
  </tr>
  <tr>
    <td colspan=2 style="width:200px" data-expected-width=70>
      <div style="width:200px"></div></td>
  </tr>
</table>


<h2>Colspan header cells</h2>
<section>
<ol>
  <li>Fixed/percentage colspan cells get distributed evenly.</li>
  <li>Auto cells. Is the table even fixed?</li>
</ol>

<p 12 class="testdesc">Assi: 300px
To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding.
To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding.
Fixed header cells with colspan get divided evenly.
</p>
<p class="error">Legacy chrome does not substract border spacing before distribution</p>
<table style="width:calc(300px + 40px)" data-expected-width=340>
  <tr>
    <td colspan=2 style="width:96px" data-expected-width=108>108</td>
    <td colspan=2 style="width:196px" data-expected-width=208>208</td>
  </tr>
  <tr>
    <td data-expected-width=50>1</td>
    <td>1</td>
    <td data-expected-width=100>1</td>
    <td>1</td>
  </tr>
</table>

<p 13 class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40%
Percentage header cells with colspan.
Colspan cells do not distribute border_padding, they just distribute widths.
C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box
TD0 splits
C0/1 get 20% max (40 + padding)/ 2 = 22px,
C2/3 10% and (20 + padding) / 2 = 12px max,
C4 40%, 12px percent border padding, and 52 max

Assignable width is 440 - 48, everyone gets according to percent.
C0/C1 get 80, C2/C3 get 40, and C4 gets 160.
</p>
<p class="error">Firefox seems to have a rounding error.</p>
<table style="width: calc(400px + 6 * 8px)" data-expected-width=448>
  <tr>
    <td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td>
    <td colspan=2 style="width:20%" data-expected-width=88><div style="width:20px"></div></td>
    <td style="width:40%;box-sizing:border-box" data-expected-width=160><div style="width:40px"></div></td>
  </tr>
  <tr>
    <td data-expected-width=80>Auto</td>
    <td data-expected-width=80>Auto</td>
    <td data-expected-width=40>Auto</td>
    <td data-expected-width=40>Auto</td>
    <td data-expected-width=160>Auto</td>
  </tr>
</table>

<p 14 class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto
Auto header cells with colspan, table is min width
min_width does not get redistributed.
</p>
<table style="width:1px" data-expected-width=144>
  <tr>
    <td colspan=2 data-expected-width=8>
      <div style="width:100px">100</div></td>
    <td style="width:100px" data-expected-width=112>100</td>
  </tr>
  <tr>
    <td data-expected-width=0>x</td>
    <td data-expected-width=0>x</td>
    <td data-expected-width=112>x</td>
  </tr>
</table>

<p 16 class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto
Auto colspan cells, and nothing else. Tricky because this means that internally
table has to represent 10 cells, and wide cells that span beyond table width
are usually truncated.
C0: 20*2+8=48, C1: 20*8 + 7*8=216</p>
<table style="width:calc(200px + 88px)" data-expected-width=288>
  <tr>
    <td colspan=2 style="height:20px" data-expected-width=48></td>
    <td colspan=8 style="height:20px" data-expected-width=216></td>
  </tr>
</table>

<h2>Percentage only</h2>

<p 17 class="testdesc">Assignable: 100px;columns add to 100%, auto width
Column percent adds to a 100, but because box-sizing is content box,
Column content size adds up to table width.
Column border size adds up to table width + padding (36px).
Columns get scaled down.
Scaling down is not defined by standard. FF and NG differ by a px (rounding?).
</p>
<table style="width:calc(100px + 68px)" data-expected-width=168>
  <tr>
    <td style="width:50%" data-expected-width=63>50%</td>
    <td style="width:30%" data-expected-width=42>30%</td>
    <td style="width:20%" data-expected-width=31>20%</td>
  </tr>
</table>

<p 18 class="testdesc">Assignable: 100px;columns add to 50%, auto width
Columns grow proportional to percent.
Slight rounding differences between NG and FF.
<table style="width:calc(100px + 68px)" data-expected-width=168>
  <tr>
    <td style="width:25%" data-expected-width=60>25%</td>
    <td style="width:15%" data-expected-width=42.5>15%</td>
    <td style="width:10%" data-expected-width=33>10%</td>
  </tr>
</table>


<p 19 class="testdesc">Assignable: 100px;columns add to 50%, with min width
Min width is ignored.
<table style="width:calc(100px + 68px)" data-expected-width=168>
  <tr>
    <td style="width:50%" data-expected-width=63><div style="width:50px">50</div></td>
    <td style="width:30%" data-expected-width=42><div style="width:50px">50</div></td>
    <td style="width:20%" data-expected-width=31><div style="width:50px">50</div></td>
  </tr>
</table>

<h2>Percentage/auto/fixed mix</h2>

<p class="testdesc">Assignable: 100px;C0:50% C1:100px
Clean split
<table style="width:calc(100px + 24px)" data-expected-width=124>
  <tr>
    <td style="width:50%" data-expected-width=38>50%</td>
    <td style="width:50px" data-expected-width=62>50px</td>
  </tr>
</table>

<p class="testdesc">Assignable: 100px;C0:60% C1:60px
Overconstrained: widths add up to 132.
Fixed widths get distributed first, percentage takes the rest.
<table style="width:calc(100px + 32px)" data-expected-width=132>
  <tr>
    <td style="width:20%" data-expected-width=9>20%</td>
    <td style="width:60%" data-expected-width=19>60%</td>
    <td style="width:60px" data-expected-width=72>60px</td>
  </tr>
</table>
</main>
<script>
  checkLayout("table");
</script>