| <!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="timeout" content="long"> |
| <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" src="support/white.webm" |
| controls></video> |
| <video class="inline-contained" data-expected-width="0" data-expected-height="240" src="support/white.webm" |
| controls></video> |
| <br> |
| |
| <!-- audio element with controls, and a few other misc replaced elements: --> |
| <audio class="inline-contained" data-expected-width="0" data-expected-height="40" controls></audio> |
| <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" data-expected-height="24" 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" src="support/white.webm" |
| controls></video> |
| <video class="inline-contained" data-expected-width="320" data-expected-height="0" src="support/white.webm" |
| controls></video> |
| |
| <audio class="inline-contained" data-expected-width="300" data-expected-height="0" controls></audio> |
| <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-width="24" 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> |
