<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> <head> <title>Promoted subtree</title> <!-- PURPOSE: As timing containers are defined according to the outermost SVG document fragment, this case tests when a nested <svg> element is removed and added as the outermost svg fragment, that is, promoted. OPERATION: There is one animation containing two circles that move to the right. The second circle is contained in a nested <svg> element. This nested <svg> is removed from the outer <svg> element and then appended to the parent <p> element. EXPECTED RESULTS: After removing the inner <svg> and making it a child of the <p> it becomes an outermost <svg> and therefore a new time container and so the animation resets. This behaviour is the same in Opera and we believe it to be correct. --> <script> function moveAndSplit() { var svg = document.getElementById('outer'); svg.pauseAnimations(); svg.setCurrentTime(0.5); split(); svg = document.getElementById('nested'); svg.pauseAnimations(); var svgs = document.getElementsByTagName('svg'); for (var i = 0; i < svgs.length; i++) { var svg = svgs[i]; svg.setCurrentTime(svg.getCurrentTime() + 0.5); } setTimeout('document.documentElement.removeAttribute("class")', 0); } function split() { var nested = document.getElementById('nested'); nested.parentNode.removeChild(nested); var container = document.getElementById('container'); container.appendChild(nested); } </script> </head> <body onload="moveAndSplit()"> <p id="container"> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" id="outer"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" stroke-width="1"> <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" fill="freeze"/> </circle> <!-- nested svg fragment --> <svg width="200px" height="200px" id="nested"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" stroke-width="1"> <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" fill="freeze"/> </circle> </svg> </svg> </p> </body> </html>