promoted-tree-1.xhtml (2736B)
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>Promoted subtree</title> 5 <!-- 6 PURPOSE: As timing containers are defined according to the outermost SVG 7 document fragment, this case tests when a nested <svg> element is removed 8 and added as the outermost svg fragment, that is, promoted. 9 10 OPERATION: There is one animation containing two circles that move to the 11 right. The second circle is contained in a nested <svg> element. This nested 12 <svg> is removed from the outer <svg> element and then appended to 13 the parent <p> element. 14 15 EXPECTED RESULTS: After removing the inner <svg> and making it a child of 16 the <p> it becomes an outermost <svg> and therefore a new time container and 17 so the animation resets. This behaviour is the same in Opera and we believe 18 it to be correct. 19 --> 20 <script> 21 function moveAndSplit() 22 { 23 var svg = document.getElementById('outer'); 24 svg.pauseAnimations(); 25 svg.setCurrentTime(0.5); 26 split(); 27 svg = document.getElementById('nested'); 28 svg.pauseAnimations(); 29 var svgs = document.getElementsByTagName('svg'); 30 for (var i = 0; i < svgs.length; i++) { 31 var svg = svgs[i]; 32 svg.setCurrentTime(svg.getCurrentTime() + 0.5); 33 } 34 setTimeout('document.documentElement.removeAttribute("class")', 0); 35 } 36 37 function split() 38 { 39 var nested = document.getElementById('nested'); 40 nested.parentNode.removeChild(nested); 41 var container = document.getElementById('container'); 42 container.appendChild(nested); 43 } 44 </script> 45 </head> 46 47 <body onload="moveAndSplit()"> 48 <p id="container"> 49 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" 50 id="outer"> 51 <rect x="0" y="0" width="199" height="199" 52 style="fill: none; stroke: black"/> 53 <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" 54 stroke-width="1"> 55 <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" 56 fill="freeze"/> 57 </circle> 58 <!-- nested svg fragment --> 59 <svg width="200px" height="200px" id="nested"> 60 <rect x="0" y="0" width="199" height="199" 61 style="fill: none; stroke: black"/> 62 <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" 63 stroke-width="1"> 64 <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" 65 fill="freeze"/> 66 </circle> 67 </svg> 68 </svg> 69 </p> 70 </body> 71 </html>