| <!DOCTYPE HTML> |
| <html> |
| <style> |
| body { line-height: 10px; } |
| </style> |
| <script> |
| function runTest() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| // Defer to allow the initial layout. |
| setTimeout(function() { |
| // This test works by collapsing each svg element into a 100 x 25 green square |
| // so, together, they form a 100 x 100 green square. |
| var svg1 = document.getElementById('svg1'); |
| svg1.setAttribute('width', '100px'); |
| var svg2 = document.getElementById('svg2'); |
| svg2.setAttribute('height', '25px'); |
| var svg3 = document.getElementById('svg3'); |
| svg3.style.width = "100px"; |
| var svg4 = document.getElementById('svg4'); |
| svg4.style.height = "25px"; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 0); |
| } |
| </script> |
| <body onload="runTest()"> |
| <p id="description">Test changing of SVG size attributes. This test passes if there is a green square and no red.</p> |
| <svg id="svg1" width="300" height="25"> |
| <rect x="0" y="0" width="200" height="100" fill="red" /> |
| <rect x="0" y="0" width="100" height="25" fill="green" /> |
| </svg> |
| <br/> |
| <svg id="svg2" width="100" height="50"> |
| <rect x="0" y="0" width="200" height="100" fill="red" /> |
| <rect x="0" y="0" width="100" height="25" fill="green" /> |
| </svg> |
| <br/> |
| <svg id="svg3" width="300" height="25"> |
| <rect x="0" y="0" width="200" height="100" fill="red" /> |
| <rect x="0" y="0" width="100" height="25" fill="green" /> |
| </svg> |
| <br/> |
| <svg id="svg4" width="100" height="50"> |
| <rect x="0" y="0" width="200" height="100" fill="red" /> |
| <rect x="0" y="0" width="100" height="25" fill="green" /> |
| </svg> |
| <br/> |
| </body> |
| </html> |
