Home | History | Annotate | Download | only in ManualTests
      1 <svg xmlns="http://www.w3.org/2000/svg"
      2         xmlns:xlink="http://www.w3.org/1999/xlink"
      3         xmlns:xhtml="http://www.w3.org/1999/xhtml">
      4         
      5 <script>
      6 <![CDATA[
      7 var stateIndex = 0;
      8 var currentTarget = 0;
      9 
     10 function stateA() 
     11 {
     12     document.getElementById("A").textContent = '|A|';
     13     document.getElementById("B").textContent = 'B';
     14 
     15     currentTarget = 0;
     16     startAnimation();
     17 }
     18 
     19 function stateB() 
     20 {
     21     document.getElementById("A").textContent = 'A';
     22     document.getElementById("B").textContent = '|B|';
     23     currentTarget = 1;
     24     startAnimation();
     25 }
     26 
     27 var intervalId = null;
     28 
     29 function startAnimation() {
     30     if (intervalId == null) {
     31 	intervalId = setInterval(animationStep, 20);
     32     }
     33 }
     34 
     35 function animationStep() {
     36     if (Math.abs(stateIndex - currentTarget) < .001) {
     37 	clearInterval(intervalId);
     38 	intervalId = null;
     39 	return;
     40     }
     41 
     42     if (stateIndex < currentTarget) {
     43 	stateIndex += 1 / 128;
     44     } else {
     45 	stateIndex -= 1 / 128;
     46     }
     47 
     48     var elt = document.getElementById("targetGroup");
     49 
     50     var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 +  stateIndex)  + ")" ;
     51     var opacity = 1 - .75 * stateIndex;
     52 
     53     elt.setAttribute("opacity", opacity);
     54     elt.setAttribute("transform", transform);
     55 }
     56 
     57 
     58 ]]>
     59 </script>
     60 
     61         <text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text>
     62         <text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text>
     63         <text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text>
     64         <text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text>
     65 
     66 	<circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" />
     67 
     68         <g>
     69             <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
     70 
     71 	        <image  id="targetGroup" x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif"  />
     72         </g>
     73 
     74 
     75 </svg>
     76 
     77 
     78