wpt / css / css-sizing / stretch / content-contribution-001.html

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

TestTest SourceSubtests (2/5)

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

SubtestStatusMessage
.test 1FAILassert_equals: data-expected-client-width expected 100 got 784
.test 2FAILassert_equals: data-expected-client-width expected 120 got 784
.test 3PASS
.test 4PASS
.test 5FAILassert_equals: data-expected-client-height expected 0 got 100

/css/css-sizing/stretch/content-contribution-001.html

<!DOCTYPE html>
<link rel="help"
  href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert"
  content="stretched children contribute their automatic size to parent's min/max content sizes">

<style>
  .test {
    outline: solid;
    margin-bottom: 10px;
  }
</style>

<div style="width: max-content;" class="test" data-expected-client-width="100">
  <div style="float: left; width: 100px; height: 100px;"></div>
  <div style="float: left; width: stretch; outline: solid blue;"></div>
</div>

<div style="width: max-content;" class="test" data-expected-client-width="120">
  <div style="float: left; width: 100px; height: 100px;"></div>
  <div style="float: left; width: stretch; outline: solid blue;">
    <div style="width: 20px; height: 20px;"></div>
  </div>
</div>

<div style="width: 100px; height: max-content;" class="test"
  data-expected-client-height="100">
  <div style="width: 100px; height: 100px;"></div>
  <div style="height: stretch; outline: solid blue;"></div>
</div>

<div style="width: 100px; height: max-content;" class="test"
  data-expected-client-height="120">
  <div style="width: 100px; height: 100px;"></div>
  <div style="height: stretch; outline: solid blue;">
    <div style="width: 20px; height: 20px;"></div>
  </div>
</div>

<div style="writing-mode: vertical-lr;">
  <div style="inline-size: stretch; block-size: 100px;" class="test"
    data-expected-client-height="0"></div>
</div>

<div style="writing-mode: vertical-lr;">
  <div style="inline-size: stretch; block-size: 100px; border: solid"
    data-expected-client-height="20">
    <div style="height: 20px;"></div>
  </div>
</div>

<script>
  checkLayout('.test');
</script>