intrinsic-size-fallback-replaced.html (2049B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <meta charset="utf-8"> 8 <title>CSS Sizing Test: Testing intrinsic size fallback 300x150 for some replaced elements.</title> 9 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 10 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 11 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> 12 <meta name="assert" 13 content="This test verifies that the intrinsic size fallback is 300px width and 150px height for replaced elements with no intrinsic size and no intrinsic ratio, regardless of the writing-mode."> 14 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script src="/resources/check-layout-th.js"></script> 18 19 <style> 20 .test { 21 border: 0; 22 padding: 0; 23 background-color: blue; 24 } 25 26 .vertical { 27 writing-mode: vertical-rl; 28 } 29 </style> 30 31 <body onload="checkLayout('.test')"> 32 <!-- horizontal writing-mode --> 33 <iframe class="test" data-expected-width="300" data-expected-height="150"></iframe> 34 <video class="test" data-expected-width="300" data-expected-height="150"></video> 35 <svg class="test" data-expected-bounding-client-rect-width="300" 36 data-expected-bounding-client-rect-height="150"></svg> 37 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test" data-expected-width="300" 38 data-expected-height="150"> 39 40 <!-- vertical writing-mode --> 41 <iframe class="test vertical" data-expected-width="300" data-expected-height="150"></iframe> 42 <video class="test vertical" data-expected-width="300" data-expected-height="150"></video> 43 <svg class="test vertical" data-expected-bounding-client-rect-width="300" 44 data-expected-bounding-client-rect-height="150"></svg> 45 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test vertical" 46 data-expected-width="300" data-expected-height="150"> 47 </body> 48 49 </html>