root-size-attribute-changes.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/svg/custom/root-size-attribute-changes.html
