wpt / css / css-contain / contain-inline-size-replaced.html

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

TestTest SourceSubtests (2/30)

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

SubtestStatusMessage
.inline-contained 1FAILassert_equals: data-expected-width expected 0 got 300
.inline-contained 2FAILassert_equals: data-expected-width expected 0 got 300
.inline-contained 3FAILassert_equals: data-expected-width expected 0 got 300 assert_equals: data-expected-height expected 100 got 150
.inline-contained 4FAILassert_equals: data-expected-width expected 0 got 300 assert_equals: data-expected-height expected 100 got 150
.inline-contained 5FAILassert_equals: data-expected-width expected 0 got 300 assert_equals: data-expected-height expected 240 got 150
.inline-contained 6FAILassert_equals: data-expected-width expected 0 got 300 assert_equals: data-expected-height expected 240 got 150
.inline-contained 7FAILassert_equals: data-expected-width expected 0 got 300
.inline-contained 8FAILassert_equals: data-expected-bounding-client-rect-width expected 0 got 100 assert_equals: data-expected-bounding-client-rect-height expected 150 got 100
.inline-contained 9PASS
.inline-contained 10FAILassert_equals: data-expected-width expected 0 got 100
.inline-contained 11FAILassert_equals: data-expected-height expected 100 got 0
.inline-contained 12FAILassert_equals: data-expected-width expected 0 got 300 assert_equals: data-expected-height expected 100 got 150
.inline-contained 13FAILassert_equals: data-expected-height expected 100 got 0
.inline-contained 14FAILassert_equals: data-expected-width expected 0 got 300
.inline-contained 15FAILassert_equals: data-expected-width expected 0 got 300
.inline-contained 16FAILassert_equals: data-expected-height expected 0 got 150
.inline-contained 17FAILassert_equals: data-expected-height expected 0 got 150
.inline-contained 18FAILassert_equals: data-expected-width expected 100 got 300 assert_equals: data-expected-height expected 0 got 150
.inline-contained 19FAILassert_equals: data-expected-width expected 100 got 300 assert_equals: data-expected-height expected 0 got 150
.inline-contained 20FAILassert_equals: data-expected-width expected 320 got 300 assert_equals: data-expected-height expected 0 got 150
.inline-contained 21FAILassert_equals: data-expected-width expected 320 got 300 assert_equals: data-expected-height expected 0 got 150
.inline-contained 22FAILassert_equals: data-expected-height expected 0 got 150
.inline-contained 23FAILassert_equals: data-expected-bounding-client-rect-width expected 300 got 100 assert_equals: data-expected-bounding-client-rect-height expected 0 got 100
.inline-contained 24PASS
.inline-contained 25FAILassert_equals: data-expected-height expected 0 got 100
.inline-contained 26FAILassert_equals: data-expected-width expected 100 got 0
.inline-contained 27FAILassert_equals: data-expected-width expected 100 got 300 assert_equals: data-expected-height expected 0 got 150
.inline-contained 28FAILassert_equals: data-expected-width expected 100 got 0
.inline-contained 29FAILassert_equals: data-expected-height expected 0 got 150
.inline-contained 30FAILassert_equals: data-expected-height expected 0 got 150

/css/css-contain/contain-inline-size-replaced.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: intrinsic size of inline-size-contained replaced elems</title>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<meta name=assert
  content="This test checks that various replaced elements with contain: inline-size have an intrinsic inline size of 0 regardless of their content.">
<style>
  .inline-contained {
    contain: inline-size;
    width: auto;
    height: auto;
    border: none;
  }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.inline-contained')">
  <div>
    <!-- video element: -->
    <video class="inline-contained" data-expected-width="0" data-expected-height="150"></video>
    <video class="inline-contained" data-expected-width="0" data-expected-height="150" controls></video>
    <video class="inline-contained" data-expected-width="0" data-expected-height="100"
      poster="support/blue-100x100.png"></video>
    <video class="inline-contained" data-expected-width="0" data-expected-height="100" poster="support/blue-100x100.png"
      controls></video>
    <video class="inline-contained" data-expected-width="0" data-expected-height="240" controls>
      <source src="support/white.webm" type=video/webm>
      <source src="/media/white.mp4" type="video/mp4">
    </video>
    <video class="inline-contained" data-expected-width="0" data-expected-height="240" controls>
      <source src="support/white.webm" type=video/webm>
      <source src="/media/white.mp4" type="video/mp4">
    </video>
    <br>

    <!-- other misc replaced elements: -->
    <canvas class="inline-contained" data-expected-width="0" data-expected-height="150"></canvas>
    <svg class="inline-contained" data-expected-bounding-client-rect-width="0"
      data-expected-bounding-client-rect-height="150"></svg>
    <br>

    <!-- Image elements: -->
    <img class="inline-contained" data-expected-width="0" src="broken">
    <img class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png">
    <picture>
      <source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="0"
        data-expected-height="100">
    </picture>
    <br>

    <!-- Document-embedding elements (with a target resource that
         could provide an intrinsic ratio in some cases, in the absence of
         contain:inline-size): -->
    <embed class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png">
    <object class="inline-contained" data-expected-width="0" data-expected-height="100"
      data="support/blue-100x100.png"></object>
    <iframe class="inline-contained" data-expected-width="0" data-expected-height="150"></iframe>
    <iframe class="inline-contained" data-expected-width="0" data-expected-height="150"
      src="support/blue-100x100.png"></iframe>
    <br>
  </div>
  <!-- Same, but in vertical mode -->
  <div style="writing-mode: vertical-rl;">
    <video class="inline-contained" data-expected-width="300" data-expected-height="0"></video>
    <video class="inline-contained" data-expected-width="300" data-expected-height="0" controls></video>
    <video class="inline-contained" data-expected-width="100" data-expected-height="0"
      poster="support/blue-100x100.png"></video>
    <video class="inline-contained" data-expected-width="100" data-expected-height="0" poster="support/blue-100x100.png"
      controls></video>
    <video class="inline-contained" data-expected-width="320" data-expected-height="0" controls>
      <source src="support/white.webm" type=video/webm>
      <source src="/media/white.mp4" type="video/mp4">
    </video>
    <video class="inline-contained" data-expected-width="320" data-expected-height="0" controls>
      <source src="support/white.webm" type=video/webm>
      <source src="/media/white.mp4" type="video/mp4">
    </video>

    <canvas class="inline-contained" data-expected-width="300" data-expected-height="0"></canvas>
    <svg class="inline-contained" data-expected-bounding-client-rect-width="300"
      data-expected-bounding-client-rect-height="0"></svg>
    <br>

    <img class="inline-contained" data-expected-height="0" src="broken">
    <img class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png">
    <picture>
      <source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="100"
        data-expected-height="0">
    </picture>
    <br>

    <embed class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png">
    <object class="inline-contained" data-expected-width="100" data-expected-height="0"
      data="support/blue-100x100.png"></object>
    <iframe class="inline-contained" data-expected-width="300" data-expected-height="0"></iframe>
    <iframe class="inline-contained" data-expected-width="300" data-expected-height="0"
      src="support/blue-100x100.png"></iframe>
    <br>
  </div>
</body>