svg-root-lengths.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <script src="../../resources/js-test.js"></script>
  </head>
  <body>
    <p id="description"></p>
    <div id="div" style="width: 200px; height: 200px; border: 1px solid red;">
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; border: 1px solid blue;">
        <rect width="100%" height="100%" fill="green"/>
      </svg>
    </div>
    <div id="console"></div>
    <script>
      if (window.testRunner) {
	testRunner.waitUntilDone();
	testRunner.dumpAsText();
      }

      // Force layout
      document.body.offsetTop;

      var div = document.getElementById('div');
      var svg = document.getElementById('svg');

      description('This tests the behavior of root SVG length value resolution');

      debug('Initial/default values:');
      shouldBe('svg.width.baseVal.value', '200');
      shouldBe('svg.height.baseVal.value', '200');

      svg.setAttribute('width', '50%');
      svg.setAttribute('height', '10%');
      debug('');
      debug('Updated relative values:');
      shouldBe('svg.width.baseVal.value', '100');
      shouldBe('svg.height.baseVal.value', '20');

      svg.setAttribute('width', '150');
      svg.setAttribute('height', '50');
      debug('');
      debug('Updated fixed values:');
      shouldBe('svg.width.baseVal.value', '150');
      shouldBe('svg.height.baseVal.value', '50');

      svg.setAttribute('width', '100%');
      svg.setAttribute('height', '50%');
      svg.setAttribute('viewBox', '0 0 800 600');
      debug('');
      debug('viewBox has no effect on top level length resolution.');
      shouldBe('svg.width.baseVal.value', '200');
      shouldBe('svg.height.baseVal.value', '100');

      if (window.testRunner)
        testRunner.notifyDone();
    </script>
  </body>
</html>
chromium/third_party/blink/web_tests/svg/dom/svg-root-lengths.html
