contain-inline-size-replaced.html | Explore in Territory

<!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:[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/css-contain/contain-inline-size-replaced.html
