third_party/WebKit/LayoutTests/svg/custom/root-size-attribute-changes.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <style>
   4   body { line-height: 10px; }
   5 </style>
   6 <script>
   7 function runTest() {
   8   if (window.testRunner)
   9     testRunner.waitUntilDone();
  10
  11   // Defer to allow the initial layout.
  12   setTimeout(function() {
  13     // This test works by collapsing each svg element into a 100 x 25 green square
  14     // so, together, they form a 100 x 100 green square.
  15     var svg1 = document.getElementById('svg1');
  16     svg1.setAttribute('width', '100px');
  17     var svg2 = document.getElementById('svg2');
  18     svg2.setAttribute('height', '25px');
  19     var svg3 = document.getElementById('svg3');
  20     svg3.style.width = "100px";
  21     var svg4 = document.getElementById('svg4');
  22     svg4.style.height = "25px";
  23     if (window.testRunner)
  24       testRunner.notifyDone();
  25   }, 0);
  26 }
  27 </script>
  28 <body onload="runTest()">
  29 <p id="description">Test changing of SVG size attributes. This test passes if there is a green square and no red.</p>
  30 <svg id="svg1" width="300" height="25">
  31   <rect x="0" y="0" width="200" height="100" fill="red" />
  32   <rect x="0" y="0" width="100" height="25" fill="green" />
  33 </svg>
  34 <br/>
  35 <svg id="svg2" width="100" height="50">
  36   <rect x="0" y="0" width="200" height="100" fill="red" />
  37   <rect x="0" y="0" width="100" height="25" fill="green" />
  38 </svg>
  39 <br/>
  40 <svg id="svg3" width="300" height="25">
  41   <rect x="0" y="0" width="200" height="100" fill="red" />
  42   <rect x="0" y="0" width="100" height="25" fill="green" />
  43 </svg>
  44 <br/>
  45 <svg id="svg4" width="100" height="50">
  46   <rect x="0" y="0" width="200" height="100" fill="red" />
  47   <rect x="0" y="0" width="100" height="25" fill="green" />
  48 </svg>
  49 <br/>
  50 </body>
  51 </html>