enveloped-tree-1.xhtml (2671B)
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. 11 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. 16 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 } 35 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> 45 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>