<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
  <!-- Big green background to match lime.svg -->
  <rect fill="lime" width="100%" height="100%" />

  <!-- In the following pairs of rects, the only pairwise differences are the
       fill-color and the presence of the "to" attribute on the animateMotion
       element.  "to" shouldn't have any effect in these cases, since it has
       lower priority than "values," "path," and "mpath". So in each case, the
       lime rect should cover up the red rect at all times. -->

  <!-- Single-point path specified with "values" attribute: -->
  <g transform="translate(0,0)">
    <rect width="20" height="20" fill="red">
      <animateMotion values="20,0" dur="2"/>
    </rect>
    <rect width="20" height="20" fill="lime">
      <animateMotion values="20,0" dur="2" to="-50,0"/>
    </rect>
  </g>

  <!-- Multi-point path specified with "values" attribute: -->
  <g transform="translate(0,30)">
    <rect width="20" height="20" fill="red">
      <animateMotion values="20,0; 80,0" dur="2"/>
    </rect>
    <rect width="20" height="20" fill="lime">
      <animateMotion values="20,0; 80,0" dur="2" to="-50,0"/>
    </rect>
  </g>

  <!-- Path specified with "path" attribute: -->
  <g transform="translate(0,60)">
    <rect width="20" height="20" fill="red">
      <animateMotion path="m0,0 h100" dur="2"/>
    </rect>
    <rect width="20" height="20" fill="lime">
      <animateMotion path="m0,0 h100" dur="2" to="-50,0"/>
    </rect>
  </g>

  <!-- Path specified with "mpath" subelement: -->
  <path id="p" d="m0,0 h100"/>
  <g transform="translate(0,90)">
    <rect width="20" height="20" fill="red">
      <animateMotion dur="2"><mpath xlink:href="#p"/></animateMotion>
    </rect>
    <rect width="20" height="20" fill="lime">
      <animateMotion dur="2" to="-50,0"><mpath xlink:href="#p"/></animateMotion>
    </rect>
  </g>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function loaded() {
    document.documentElement.setCurrentTime(1);
    document.documentElement.pauseAnimations();

    if (window.testRunner)
        testRunner.notifyDone();
}
</script>
</svg>