testing/web-platform/tests/css/CSS2/inline-svg-100-percent-in-body.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <title>CSS Test: SVG element with a view box with explicit 100% width and height should occupy the entire view port</title>
   5 <link rel="author" title="Google" href="http://www.google.com/" />
   6 <link rel="match" href="reference/inline-svg-100-percent-in-body-ref.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 image" />
  10 <meta name="assert" content="When width and height of 100% are specified on an inline SVG element with a view box in the body element,
  11 the aspecto ratio should be preserved and should occupy the entire view port." />
  12 <style type="text/css">
  13
  14 * {
  15     margin: 0;
  16     padding: 0;
  17 }
  18
  19 svg {
  20     display: block;
  21 }
  22
  23 </style>
  24 </head>
  25 <body>
  26 <p>The box below should occupy the entire view port.</p>
  27 <svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  28     <rect x="0" y="0" width="100" height="100" fill="green" />
  29 </svg>
  30 </body>
  31 </html>