summaryrefslogtreecommitdiffstats
path: root/WebCore/manual-tests/svg-repaint-group.svg
diff options
context:
space:
mode:
Diffstat (limited to 'WebCore/manual-tests/svg-repaint-group.svg')
-rw-r--r--WebCore/manual-tests/svg-repaint-group.svg81
1 files changed, 81 insertions, 0 deletions
diff --git a/WebCore/manual-tests/svg-repaint-group.svg b/WebCore/manual-tests/svg-repaint-group.svg
new file mode 100644
index 0000000..7f0972e
--- /dev/null
+++ b/WebCore/manual-tests/svg-repaint-group.svg
@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
+
+<script>
+<![CDATA[
+var stateIndex = 0;
+var currentTarget = 0;
+
+function stateA()
+{
+ document.getElementById("A").textContent = '|A|';
+ document.getElementById("B").textContent = 'B';
+
+ currentTarget = 0;
+ startAnimation();
+}
+
+function stateB()
+{
+ document.getElementById("A").textContent = 'A';
+ document.getElementById("B").textContent = '|B|';
+ currentTarget = 1;
+ startAnimation();
+}
+
+var intervalId = null;
+
+function startAnimation() {
+ if (intervalId == null) {
+ intervalId = setInterval(animationStep, 20);
+ }
+}
+
+function animationStep() {
+ if (Math.abs(stateIndex - currentTarget) < .001) {
+ clearInterval(intervalId);
+ intervalId = null;
+ return;
+ }
+
+ if (stateIndex < currentTarget) {
+ stateIndex += 1 / 128;
+ } else {
+ stateIndex -= 1 / 128;
+ }
+
+ var elt = document.getElementById("targetGroup");
+
+ var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 + stateIndex) + ")" ;
+ var opacity = 1 - .75 * stateIndex;
+
+ elt.setAttribute("opacity", opacity);
+ elt.setAttribute("transform", transform);
+}
+
+
+]]>
+</script>
+
+ <text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text>
+ <text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text>
+ <text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text>
+ <text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text>
+
+ <circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" />
+
+ <g id="targetGroup">
+ <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
+
+ <foreignObject x="60" y="60" width="170" height="170" >
+ <xhtml:xhtml>
+ <xhtml:img src="http://www.citilink.com/~grizzly/anigifs/3dolph.gif" width="170" height="170" /><br />
+ </xhtml:xhtml>
+ </foreignObject>
+ </g>
+
+
+</svg>
+
+