Blitz - WPT: stretch-table-001.html

wpt / css / css-sizing / stretch / stretch-table-001.html

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

Subtest	Status	Message
.stretch 1	PASS
.stretch 2	FAIL	assert_equals: data-expected-height expected 30 got 10
.stretch 3	FAIL	assert_equals: data-expected-width expected 40 got 0 assert_equals: data-expected-height expected 10 got 0
.stretch 4	FAIL	assert_equals: data-expected-width expected 40 got 0 assert_equals: data-expected-height expected 10 got 0
.stretch 5	PASS
.stretch 6	PASS
.stretch 7	FAIL	assert_equals: data-expected-width expected 40 got 0 assert_equals: data-expected-height expected 10 got 0

Enable JavaScript in test iframe

/css/css-sizing/stretch/stretch-table-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help"
      href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert"
      content="The stretch keyword should work as a block-size for table parts">
<style>
table {
  border-spacing: 0;
  margin-bottom: 3px;
}
td {
  border: 0;
  padding: 0;
}
.stretch {
    height: -webkit-fill-available;
    height: stretch;
}
.spacer {
  height: 10px;
  width: 20px;
  background: tan;
}
</style>
<body onload="checkLayout('.stretch')">
  <!-- 'stretch' on a table: -->
  <table class="stretch"
         data-expected-width="40"
         data-expected-height="10">
    <tbody>
      <tr>
        <td><div class="spacer"></div></td>
        <td><div class="spacer"></div></td>
      </tr>
    </tbody>
  </table>

  <!-- 'stretch' on a table in a fixed-height div: -->
  <div style="height: 30px">
    <table class="stretch"
           data-expected-width="40"
           data-expected-height="30">
      <tbody>
        <tr>
          <td><div class="spacer"></div></td>
          <td><div class="spacer"></div></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 'stretch' on a tbody: -->
  <table>
    <tbody class="stretch"
           data-expected-width="40"
           data-expected-height="10">
      <tr>
        <td><div class="spacer"></div></td>
        <td><div class="spacer"></div></td>
      </tr>
    </tbody>
  </table>

  <!-- 'stretch' on a table row: -->
  <table>
    <tbody>
      <tr class="stretch"
          data-expected-width="40"
          data-expected-height="10">
        <td><div class="spacer"></div></td>
        <td><div class="spacer"></div></td>
      </tr>
    </tbody>
  </table>

  <!-- 'stretch' on a table cell: -->
  <table>
    <tbody>
      <tr>
        <td class="stretch"
            data-expected-width="20"
            data-expected-height="10">
          <div class="spacer"></div>
        </td>
        <td><div class="spacer"></div></td>
      </tr>
    </tbody>
  </table>

  <!-- 'stretch' on a row-spanning table cell: -->
  <table>
    <tbody>
      <tr>
        <td><div class="spacer"></div></td>
        <td class="stretch"
            data-expected-width="20"
            data-expected-height="20" rowspan="2">
          <div class="spacer"></div>
        </td>
      </tr>
      <tr><td><div class="spacer"></div></td></tr>
    </tbody>
  </table>

  <!-- 'stretch' on a caption: -->
  <table>
    <caption class="stretch"
             data-expected-width="40"
             data-expected-height="10">
      <div class="spacer"></div>
    </caption>
    <tbody>
      <tr>
        <td><div class="spacer"></div></td>
        <td><div class="spacer"></div></td>
      </tr>
    </tbody>
  </table>
</body>