blob: f788d57e11b8b99a5bb9f7e3eb2c2c40f7ecebb7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<?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>
|
