svg-intrinsic-size-001.html (1597B)
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 .flexbox { 15 display: flex; 16 width: 600px; 17 border: 2px solid black; 18 } 19 svg { 20 background: teal; 21 flex: none; 22 } 23 </style> 24 25 <body onload="checkLayout('svg')"> 26 No intrinsic attributes: 27 <div class="flexbox"> 28 <svg data-expected-client-width="300" data-expected-client-height="150"></svg> 29 </div> 30 31 viewBox and height: 32 <div class="flexbox"> 33 <svg height="40" viewBox="0 0 4 1" 34 data-expected-client-width="160" data-expected-client-height="40"></svg> 35 </div> 36 37 viewBox and width: 38 <div class="flexbox"> 39 <svg width="40" viewBox="0 0 4 1" 40 data-expected-client-width="40" data-expected-client-height="10"></svg> 41 </div> 42 43 viewBox, width, height: 44 <div class="flexbox"> 45 <svg width="40" height="40" viewBox="0 0 4 1" 46 data-expected-client-width="40" data-expected-client-height="40"></svg> 47 </div> 48 49 Just viewBox: 50 <div class="flexbox"> 51 <svg viewBox="0 0 4 1" 52 data-expected-client-width="600" data-expected-client-height="150"></svg> 53 </div> 54 </body>