third_party/WebKit/LayoutTests/svg/animations/animateTransform-rotate-around-point.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" onload="loaded()">
   3
   4 <rect x="50" y="50" width="100" height="100" fill="green">
   5     <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="45 100 100" begin="0s" dur="1s" fill="freeze"/>
   6 </rect>
   7
   8 <!-- Beware the end result of this animation is: transform="rotate(22.5 100 250) rotate(22.5 100 250)" which simplifies to rotate(45 100 250) -->
   9 <rect x="50" y="200" width="100" height="100" fill="green">
  10     <animateTransform attributeName="transform" type="rotate" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/>
  11     <animateTransform attributeName="transform" type="rotate" additive="sum" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/>
  12 </rect>
  13
  14 <rect x="50" y="350" width="100" height="100" fill="green">
  15     <animateTransform attributeName="transform" type="rotate" accumulate="sum" from="0 50 200" to="22.5 50 200" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
  16 </rect>
  17
  18 <rect x="200" y="50" width="100" height="100" fill="green">
  19     <animateTransform attributeName="transform" type="translate" additive="sum" from="250,100" to="250,100" begin="0s" dur="1s" fill="freeze"/>
  20     <animateTransform attributeName="transform" type="rotate" additive="sum" from="0" to="45" begin="0s" dur="1s" fill="freeze"/>
  21     <animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-100" to="-250,-100" begin="0s" dur="1s" fill="freeze"/>
  22 </rect>
  23
  24 <rect x="200" y="200" width="100" height="100" fill="green">
  25     <animateTransform attributeName="transform" type="translate" additive="sum" from="250,250" to="250,250" begin="0s" dur="1s" fill="freeze"/>
  26     <animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0" to="22.5" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
  27     <animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-250" to="-250,-250" begin="0s" dur="1s" fill="freeze"/>
  28 </rect>
  29
  30 <!-- Beware the end result of this animation is: transform="rotate(22.5 250 400) rotate(22.5 250 400)" which simplifies to rotate(45 250 400) -->
  31 <rect x="200" y="350" width="100" height="100" fill="green" transform="rotate(22.5 250 400)">
  32     <animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0 125 200" to="11.25 125 200" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/>
  33 </rect>
  34
  35 <script>
  36 if (window.testRunner)
  37     testRunner.waitUntilDone();
  38
  39 function loaded() {
  40     document.documentElement.setCurrentTime(2);
  41     if (window.testRunner)
  42         testRunner.notifyDone();
  43 }
  44 </script>
  45 </svg>