<!DOCTYPE html>
<html>
  <head>
    <script src="../../resources/js-test-pre.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();
      }

      setTimeout(function () {
        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();
      }, 0);
    </script>
    <script src="../../resources/js-test-post.js"></script>
  </body>
</html>