inline-svg-intrinsic-size-100-percent-1.html (1165B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Propagating width and height attributes of an inline SVG element</title> 5 <link rel="author" title="Google" href="http://www.google.com/" /> 6 <link rel="match" href="reference/60x60-green.html"> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> 8 <link rel="help" href="http://www.w3.org/TR/SVG11/coords.html#IntrinsicSizing"> 9 <meta name="flags" content="svg" /> 10 <meta name="assert" content="The width and the height of 100% on an inline SVG element should be propagated to the CSS properties, 11 and the aspect ratio within the SVG is preserved when the view box is specified." /> 12 </head> 13 <body> 14 <div style="width: 60px; height: 60px; position: relative; background: red;"> 15 <div style="position: absolute; left: 15px; top: 0px; width: 30px; height: 60px; background: green;"></div> 16 <svg viewBox="0 0 100 200" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 17 <rect x="-50%" y="0" width="50%" height="100%" fill="green" /> 18 <rect x="100%" y="0" width="50%" height="100%" fill="green" /> 19 </svg> 20 </div> 21 </body> 22 </html>