Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-contain/contain-inline-size-replaced.html - WPT Dashboard Interop Dashboard
<!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">
<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>