| <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> |