contain-inline-size-replaced.html (5319B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: intrinsic size of inline-size-contained replaced elems</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 5 <link rel="author" href="https://mozilla.org" title="Mozilla"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size"> 7 <meta name=assert 8 content="This test checks that various replaced elements with contain: inline-size have an intrinsic inline size of 0 regardless of their content."> 9 <style> 10 .inline-contained { 11 contain: inline-size; 12 width: auto; 13 height: auto; 14 border: none; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script src="/resources/check-layout-th.js"></script> 20 21 <body onload="checkLayout('.inline-contained')"> 22 <div> 23 <!-- video element: --> 24 <video class="inline-contained" data-expected-width="0" data-expected-height="150"></video> 25 <video class="inline-contained" data-expected-width="0" data-expected-height="150" controls></video> 26 <video class="inline-contained" data-expected-width="0" data-expected-height="100" 27 poster="support/blue-100x100.png"></video> 28 <video class="inline-contained" data-expected-width="0" data-expected-height="100" poster="support/blue-100x100.png" 29 controls></video> 30 <video class="inline-contained" data-expected-width="0" data-expected-height="240" controls> 31 <source src="support/white.webm" type=video/webm> 32 <source src="/media/white.mp4" type="video/mp4"> 33 </video> 34 <video class="inline-contained" data-expected-width="0" data-expected-height="240" controls> 35 <source src="support/white.webm" type=video/webm> 36 <source src="/media/white.mp4" type="video/mp4"> 37 </video> 38 <br> 39 40 <!-- other misc replaced elements: --> 41 <canvas class="inline-contained" data-expected-width="0" data-expected-height="150"></canvas> 42 <svg class="inline-contained" data-expected-bounding-client-rect-width="0" 43 data-expected-bounding-client-rect-height="150"></svg> 44 <br> 45 46 <!-- Image elements: --> 47 <img class="inline-contained" data-expected-width="0" src="broken"> 48 <img class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png"> 49 <picture> 50 <source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="0" 51 data-expected-height="100"> 52 </picture> 53 <br> 54 55 <!-- Document-embedding elements (with a target resource that 56 could provide an intrinsic ratio in some cases, in the absence of 57 contain:inline-size): --> 58 <embed class="inline-contained" data-expected-width="0" data-expected-height="100" src="support/blue-100x100.png"> 59 <object class="inline-contained" data-expected-width="0" data-expected-height="100" 60 data="support/blue-100x100.png"></object> 61 <iframe class="inline-contained" data-expected-width="0" data-expected-height="150"></iframe> 62 <iframe class="inline-contained" data-expected-width="0" data-expected-height="150" 63 src="support/blue-100x100.png"></iframe> 64 <br> 65 </div> 66 <!-- Same, but in vertical mode --> 67 <div style="writing-mode: vertical-rl;"> 68 <video class="inline-contained" data-expected-width="300" data-expected-height="0"></video> 69 <video class="inline-contained" data-expected-width="300" data-expected-height="0" controls></video> 70 <video class="inline-contained" data-expected-width="100" data-expected-height="0" 71 poster="support/blue-100x100.png"></video> 72 <video class="inline-contained" data-expected-width="100" data-expected-height="0" poster="support/blue-100x100.png" 73 controls></video> 74 <video class="inline-contained" data-expected-width="320" data-expected-height="0" controls> 75 <source src="support/white.webm" type=video/webm> 76 <source src="/media/white.mp4" type="video/mp4"> 77 </video> 78 <video class="inline-contained" data-expected-width="320" data-expected-height="0" controls> 79 <source src="support/white.webm" type=video/webm> 80 <source src="/media/white.mp4" type="video/mp4"> 81 </video> 82 83 <canvas class="inline-contained" data-expected-width="300" data-expected-height="0"></canvas> 84 <svg class="inline-contained" data-expected-bounding-client-rect-width="300" 85 data-expected-bounding-client-rect-height="0"></svg> 86 <br> 87 88 <img class="inline-contained" data-expected-height="0" src="broken"> 89 <img class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png"> 90 <picture> 91 <source srcset="support/blue-100x100.png"><img class="inline-contained" data-expected-width="100" 92 data-expected-height="0"> 93 </picture> 94 <br> 95 96 <embed class="inline-contained" data-expected-width="100" data-expected-height="0" src="support/blue-100x100.png"> 97 <object class="inline-contained" data-expected-width="100" data-expected-height="0" 98 data="support/blue-100x100.png"></object> 99 <iframe class="inline-contained" data-expected-width="300" data-expected-height="0"></iframe> 100 <iframe class="inline-contained" data-expected-width="300" data-expected-height="0" 101 src="support/blue-100x100.png"></iframe> 102 <br> 103 </div> 104 </body>