Blitz - WPT: td-box-sizing-003.html

wpt / css / css-tables / tentative / td-box-sizing-003.html

Data from commit:
1efe22d Fix duplicate table cell padding with float layout (#675) (2026-08-10)

Subtest	Status	Message
table 1	PASS
table 2	FAIL	assert_equals: data-expected-width expected 120 got 0
table 3	FAIL	assert_equals: data-expected-width expected 140 got 0
table 4	PASS
table 5	PASS
table 6	PASS
table 7	PASS
table 8	FAIL	assert_equals: data-offset-x expected 72 got 36 assert_equals: data-offset-y expected 72 got 36
table 9	FAIL	assert_equals: data-expected-width expected 300 got 240 assert_equals: data-expected-width expected 150 got 120 assert_equals: data-offset-x expected 90 got 36 assert_equals: data-offset-y expected 90 got 36
table 10	PASS
table 11	FAIL	assert_equals: data-expected-height expected 100 got 50 assert_equals: data-expected-height expected 0 got 50

Enable JavaScript in test iframe

/css/css-tables/tentative/td-box-sizing-003.html

<!doctype html>
<title>TD box sizing</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='stylesheet' href='/fonts/ahem.css' />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" />
<style>
  main table {
    border-spacing: 0;
  }
  main td {
    background: gray;
    width:100px;
    padding: 0;
  }
  .bb {
    box-sizing: border-box;
  }
</style>
<main>
<p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p>
<p>box-sizing: content-box; border px; padding px.
<table>
  <tbody>
  <tr>
      <td data-expected-width="100">
        <div style="width:50px;height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<table>
  <tbody>
  <tr data-expected-width="120">
      <td data-expected-width="120" style="border:10px solid black">
        <div style="height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<table>
  <tbody>
  <tr data-expected-width="140">
      <td data-expected-width="140" style="border:10px solid black;padding: 10px">
        <div style="height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<p>box-sizing: border-box, border px, padding px.
<table>
  <tbody>
  <tr>
      <td data-expected-width="100" class="bb">
        <div style="height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<table>
  <tbody>
  <tr>
      <td data-expected-width="100" class="bb" style="border:10px solid black" >
        <div style="height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<table>
  <tbody>
  <tr>
      <td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px">
        <div style="height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>

<p>box-sizing: border-box;padding: px, width px</p>
<li>td's intrinsic width must be >= border + padding</li>

<table style="width:300px;table-layout:fixed">
  <tbody>
    <tr>
      <td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td>
      <td>auto</td>
      <td>auto</td>
    </tr>
  </tbody>
</table>

<p>box-sizing: border-box; border px; padding %.</p>
<li>intrinsic size of % padding is 0.
<li>final size of % padding is computed against table's width.
<table data-expected-width="240">
  <tbody>
  <tr>
      <td data-expected-width="120" style="border:10px solid black;padding: 30%">
        <div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div>
      </td>
      <td style="border:10px solid black;padding: 30%">
        <div style="width:50px;height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>
<table data-expected-width="300">
  <caption><div style="width:300px;background:#ddd">300px caption</div></caption>
  <tbody>
  <tr>
      <td data-expected-width="150" style="border:10px solid black;padding: 30%">
        <div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div>
      </td>
      <td style="border:10px solid black;padding: 30%">
        <div style="width:50px;height:50px;background:yellow">0,0</div>
      </td>
  </tr>
  </tbody>
</table>

<p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p>
<li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li>
<li>FF uses row height as %ge resolution size.</li>
<li>Proposal: file an issue on what is the right thing to do.</li>
<table>
  <tr>
    <td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100">
      y<div style="display:inline-block;height:100%;width:50px;background:yellow"
      data-expected-height="100"></div>
    </td>
  </tr>
</table>
<table>
  <tr style="height:100px">
    <td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100">
      y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div>
    </td>
  </tr>
</table>


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