third_party/WebKit/LayoutTests/svg/animations/animateMotion-accumulate-1c.svg

   1 <?xml version="1.0" encoding="iso-8859-1" ?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
   3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   4 <svg viewBox="0 0 500 350" onload="loaded()"
   5   xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
   6   xmlns:xlink="http://www.w3.org/1999/xlink">
   7   <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
   8     <rect x="0" y="0" width="480" height="360" fill="#fff" />
   9     <g transform="translate(80,-20) scale(0.45)">
  10       <g>
  11         <circle cx="0" cy="0" r="70" fill="#f00">
  12           <animateMotion
  13             dur="4s"
  14             path="M100,100L100,500 500,500 500,100 100,100"
  15             repeatDur="16s"
  16             accumulate="sum"
  17             fill="freeze" />
  18         </circle>
  19         <circle cx="0" cy="0" r="60"
  20         stroke="#00f" stroke-width="21"
  21         fill="#f00">
  22           <animateMotion
  23             dur="4s"
  24             path="M100,100L100,500 500,500 500,100 100,100"
  25             repeatDur="16s"
  26             accumulate="sum"
  27             fill="freeze"
  28             rotate="auto" />
  29         </circle>
  30         <circle cx="0" cy="0" r="40"
  31         stroke="#00f" stroke-width="21"
  32         fill="#f00">
  33           <animateMotion
  34             dur="4s"
  35             path="M100,100L100,500 500,500 500,100 100,100"
  36             repeatDur="16s"
  37             accumulate="sum"
  38             fill="freeze"
  39             rotate="auto-reverse" />
  40         </circle>
  41         <circle cx="0" cy="0" r="20"
  42         stroke="#00f" stroke-width="21"
  43         fill="#f00">
  44           <animateMotion
  45             dur="4s"
  46             path="M100,100L100,500 500,500 500,100 100,100"
  47             repeatDur="16s"
  48             accumulate="sum"
  49             fill="freeze"
  50             rotate="60" />
  51         </circle>
  52
  53       </g>
  54
  55       <g fill="none" stroke-width="20"
  56         stroke="#888" stroke-linecap="round" stroke-linejoin="round">
  57         <rect x="100" y="100" width="400" height="400">
  58           <set attributeName="display" to="none" begin="4s" />
  59         </rect>
  60         <rect x="200" y="200" width="400" height="400">
  61           <set attributeName="display" to="none" begin="8s" />
  62         </rect>
  63         <rect x="300" y="300" width="400" height="400">
  64           <set attributeName="display" to="none" begin="12s" />
  65         </rect>
  66         <rect x="400" y="400" width="400" height="400" />
  67       </g>
  68     </g>
  69   </g>
  70   <script>
  71     if (window.testRunner)
  72         testRunner.waitUntilDone();
  73
  74     function loaded() {
  75         document.documentElement.setCurrentTime(16);
  76
  77         if (window.testRunner)
  78             testRunner.notifyDone();
  79     }
  80   </script>
  81 </svg>