Adapt inline SVG sizing behavior to Firefox and Blink
[WebKit-https.git] / LayoutTests / svg / dom / svg-root-lengths.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <script src="../../resources/js-test-pre.js"></script>
5   </head>
6   <body>
7     <p id="description"></p>
8     <div id="div" style="width: 200px; height: 200px; border: 1px solid red;">
9       <svg id="svg" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; border: 1px solid blue;">
10         <rect width="100%" height="100%" fill="green"/>
11       </svg>
12     </div>
13     <div id="console"></div>
14     <script>
15       if (window.testRunner) {
16         testRunner.waitUntilDone();
17         testRunner.dumpAsText();
18       }
19
20       setTimeout(function () {
21         var div = document.getElementById('div');
22         var svg = document.getElementById('svg');
23
24         description('This tests the behavior of root SVG length value resolution');
25
26         debug('Initial/default values:');
27         shouldBe('svg.width.baseVal.value', '200');
28         shouldBe('svg.height.baseVal.value', '200');
29
30         svg.setAttribute('width', '50%');
31         svg.setAttribute('height', '10%');
32         debug('');
33         debug('Updated relative values:');
34         shouldBe('svg.width.baseVal.value', '100');
35         shouldBe('svg.height.baseVal.value', '20');
36
37         svg.setAttribute('width', '150');
38         svg.setAttribute('height', '50');
39         debug('');
40         debug('Updated fixed values:');
41         shouldBe('svg.width.baseVal.value', '150');
42         shouldBe('svg.height.baseVal.value', '50');
43
44         svg.setAttribute('width', '100%');
45         svg.setAttribute('height', '50%');
46         svg.setAttribute('viewBox', '0 0 800 600');
47         debug('');
48         debug('viewBox has no effect on top level length resolution.');
49         shouldBe('svg.width.baseVal.value', '200');
50         shouldBe('svg.height.baseVal.value', '100');
51
52         if (window.testRunner)
53           testRunner.notifyDone();
54       }, 0);
55     </script>
56     <script src="../../resources/js-test-post.js"></script>
57   </body>
58 </html>