layout/reftests/svg/smil/container/enveloped-tree-1.xhtml@8bccb770b82d
layout/reftests/svg/smil/container/enveloped-tree-1.xhtml
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
2 <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
3 <head>
4 <title>Enveloped tree</title>
5 <!--
6 PURPOSE: This test case is the reverse of the promoted tree case. As time
7 containers are defined relative to the outermost SVG document fragment this
8 case tests that when an outermost <svg> fragment is added as a child of
9 another svg document fragment, the animations behave correctly and the time
10 containers are resolved correctly.
12 OPERATION: There are two animations that are more-or-less identical except
13 for a few aesthetic features. Both contain a circle that moves to the right.
14 The second document fragment (on the right) is removed and added as a child
15 of the first document fragment.
17 EXPECTED RESULTS: After combining the two document fragments the circles
18 should have the same horizontal position as they are now controlled by the
19 same time container.
20 -->
21 <script>
22 function moveAndAdopt()
23 {
24 var svgs = document.getElementsByTagName('svg');
25 for (var i = 0; i < svgs.length; i++) {
26 var svg = svgs[i];
27 svg.pauseAnimations();
28 svg.setCurrentTime(0.5);
29 }
30 adopt();
31 var svg = document.getElementById('adopter');
32 svg.setCurrentTime(1.5);
33 setTimeout('document.documentElement.removeAttribute("class")', 0);
34 }
36 function adopt()
37 {
38 var adoptee = document.getElementById('adoptee');
39 adoptee.parentNode.removeChild(adoptee);
40 var adopter = document.getElementById('adopter');
41 adopter.appendChild(adoptee);
42 }
43 </script>
44 </head>
46 <body onload="moveAndAdopt()">
47 <!-- First tree -->
48 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
49 id="adopter">
50 <rect x="0" y="0" width="199" height="199"
51 style="fill: none; stroke: black"/>
52 <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black"
53 stroke-width="1">
54 <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
55 fill="freeze"/>
56 </circle>
57 </svg>
58 <!-- Second tree -->
59 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
60 id="adoptee">
61 <rect x="0" y="0" width="199" height="199"
62 style="fill: none; stroke: black"/>
63 <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black"
64 stroke-width="1">
65 <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
66 fill="freeze"/>
67 </circle>
68 </svg>
69 </body>
70 </html>
