third_party/WebKit/LayoutTests/svg/animations/mozilla/animateMotion-to-overridden-1.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
   2   <!-- Big green background to match lime.svg -->
   3   <rect fill="lime" width="100%" height="100%" />
   4
   5   <!-- In the following pairs of rects, the only pairwise differences are the
   6        fill-color and the presence of the "to" attribute on the animateMotion
   7        element.  "to" shouldn't have any effect in these cases, since it has
   8        lower priority than "values," "path," and "mpath". So in each case, the
   9        lime rect should cover up the red rect at all times. -->
  10
  11   <!-- Single-point path specified with "values" attribute: -->
  12   <g transform="translate(0,0)">
  13     <rect width="20" height="20" fill="red">
  14       <animateMotion values="20,0" dur="2"/>
  15     </rect>
  16     <rect width="20" height="20" fill="lime">
  17       <animateMotion values="20,0" dur="2" to="-50,0"/>
  18     </rect>
  19   </g>
  20
  21   <!-- Multi-point path specified with "values" attribute: -->
  22   <g transform="translate(0,30)">
  23     <rect width="20" height="20" fill="red">
  24       <animateMotion values="20,0; 80,0" dur="2"/>
  25     </rect>
  26     <rect width="20" height="20" fill="lime">
  27       <animateMotion values="20,0; 80,0" dur="2" to="-50,0"/>
  28     </rect>
  29   </g>
  30
  31   <!-- Path specified with "path" attribute: -->
  32   <g transform="translate(0,60)">
  33     <rect width="20" height="20" fill="red">
  34       <animateMotion path="m0,0 h100" dur="2"/>
  35     </rect>
  36     <rect width="20" height="20" fill="lime">
  37       <animateMotion path="m0,0 h100" dur="2" to="-50,0"/>
  38     </rect>
  39   </g>
  40
  41   <!-- Path specified with "mpath" subelement: -->
  42   <path id="p" d="m0,0 h100"/>
  43   <g transform="translate(0,90)">
  44     <rect width="20" height="20" fill="red">
  45       <animateMotion dur="2"><mpath xlink:href="#p"/></animateMotion>
  46     </rect>
  47     <rect width="20" height="20" fill="lime">
  48       <animateMotion dur="2" to="-50,0"><mpath xlink:href="#p"/></animateMotion>
  49     </rect>
  50   </g>
  51
  52 <script>
  53 if (window.testRunner)
  54     testRunner.waitUntilDone();
  55
  56 function loaded() {
  57     document.documentElement.setCurrentTime(1);
  58     document.documentElement.pauseAnimations();
  59
  60     if (window.testRunner)
  61         testRunner.notifyDone();
  62 }
  63 </script>
  64 </svg>