third_party/WebKit/ManualTests/svg-repaint-image.svg

   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