blob: 4737ba6ad058342e9f070caab67a204938469061 [file] [log] [blame]
<!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>