mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
|
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
|
||
|
|
<head>
|
||
|
|
<title>Moving sub-trees</title>
|
||
|
|
<!--
|
||
|
|
PURPOSE: This case tests moving an animated sub-tree from one SVG document
|
||
|
|
fragment to another. Different document fragments have different time
|
||
|
|
containers and so this test ensures the animation is correctly transferred
|
||
|
|
from one time container to the other.
|
||
|
|
|
||
|
|
OPERATION: Both animations contain a moving box. The first animation also
|
||
|
|
contains a circle. Both this circle and its child animation element are
|
||
|
|
removed from the first animation and added to the second animation.
|
||
|
|
|
||
|
|
EXPECTED RESULTS: The circle appears in the second box at the appropriate
|
||
|
|
offset.
|
||
|
|
-->
|
||
|
|
<script>
|
||
|
|
function move()
|
||
|
|
{
|
||
|
|
var svgs = document.getElementsByTagName('svg');
|
||
|
|
for (var i = 0; i < svgs.length; i++) {
|
||
|
|
var svg = svgs[i];
|
||
|
|
svg.pauseAnimations();
|
||
|
|
svg.setCurrentTime(1.5);
|
||
|
|
}
|
||
|
|
doMove();
|
||
|
|
setTimeout('document.documentElement.removeAttribute("class")', 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
function doMove()
|
||
|
|
{
|
||
|
|
var circle = document.getElementById('circle-to-move');
|
||
|
|
circle.parentNode.removeChild(circle);
|
||
|
|
var target = document.getElementById('new-parent');
|
||
|
|
target.appendChild(circle);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="move()">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
|
||
|
|
<rect x="0" y="0" width="199" height="199"
|
||
|
|
style="fill: none; stroke: black"/>
|
||
|
|
<g>
|
||
|
|
<!-- background rect to track progress -->
|
||
|
|
<rect x="0" y="80" width="0" height="40" fill="royalblue"
|
||
|
|
stroke="black" stroke-width="1">
|
||
|
|
<animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
|
||
|
|
fill="freeze"/>
|
||
|
|
</rect>
|
||
|
|
<!-- circle to transfer -->
|
||
|
|
<circle cx="0" cy="100" r="15" fill="skyblue" stroke="black"
|
||
|
|
stroke-width="1" id="circle-to-move">
|
||
|
|
<animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
|
||
|
|
fill="freeze"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<!-- Second animation -->
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
|
||
|
|
<rect x="0" y="0" width="199" height="199"
|
||
|
|
style="fill: none; stroke: black"/>
|
||
|
|
<g id="new-parent">
|
||
|
|
<!-- background rect to track progress -->
|
||
|
|
<rect x="0" y="80" width="0" height="40" fill="greenyellow"
|
||
|
|
stroke="black" stroke-width="1">
|
||
|
|
<animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
|
||
|
|
fill="freeze"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</body>
|
||
|
|
</html>
|