svg-intrinsic-size-003.html (1612B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/check-layout-th.js"></script> 12 13 <style> 14 .block { 15 display: block; 16 width: 600px; 17 border: 2px solid black; 18 line-height: 0; 19 } 20 svg { 21 background: teal; 22 width: max-content; 23 } 24 </style> 25 26 <body onload="checkLayout('svg')"> 27 No intrinsic attributes: 28 <div class="block"> 29 <svg data-expected-client-width="300" data-expected-client-height="150"></svg> 30 </div> 31 32 viewBox and height: 33 <div class="block"> 34 <svg height="40" viewBox="0 0 4 1" 35 data-expected-client-width="160" data-expected-client-height="40"></svg> 36 </div> 37 38 viewBox and width: 39 <div class="block"> 40 <svg width="40" viewBox="0 0 4 1" 41 data-expected-client-width="40" data-expected-client-height="10"></svg> 42 </div> 43 44 viewBox, width, height: 45 <div class="block"> 46 <svg width="40" height="40" viewBox="0 0 4 1" 47 data-expected-client-width="40" data-expected-client-height="40"></svg> 48 </div> 49 50 Just viewBox: 51 <div class="block"> 52 <svg viewBox="0 0 4 1" 53 data-expected-client-width="600" data-expected-client-height="150"></svg> 54 </div> 55 </body>