WebCore/manual-tests/svg-repaint-path.svg
changeset 0 4f2f89ce4247
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/svg-repaint-path.svg	Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,77 @@
+<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>
+            <rect id="targetGroup" fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
+
+	        <image x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif"  />
+        </g>
+
+
+</svg>
+
+