animateMotion-mpath.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/animations/animateMotion-mpath.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>animateMotion with mpath</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/SVGAnimationTestCase-testharness.js"></script>

<svg>

<path id="route" fill="none" stroke="#666" d="M0,300 q100,-100 200,0 t200,0 t200,0 t200,0 t200,-50"/>

<g id="car">

  <path id="body" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z" />

  <circle class="tire" cx="10" cy="20" r="5" />

  <circle class="tire" cx="32" cy="20" r="5" />

  <animateMotion dur="4s" repeatCount="indefinite" fill="remove">

    <mpath href="#route"/>

  </animateMotion>

</g>

</svg>

<script>

const rootSVGElement = document.querySelector('svg');

const car = document.getElementById('car');

function assert_ctm_position(element, x, y) {

  const ctm = element.getCTM();

  const epsilon = 2;

  assert_approx_equals(ctm.e, x, epsilon, 'ctm e');

  assert_approx_equals(ctm.f, y, epsilon, 'ctm f');

function sample1() {

  assert_ctm_position(car, 0, 0);

function sample2() {

  assert_ctm_position(car, 496, 250);

function sample3() {

  assert_ctm_position(car, 0, 300);

smil_async_test(t => {

  const expectedValues = [

    // [animationId, time, sampleCallback]

    ['anim', 0.0, sample1],

    ['anim', 2.0, sample2],

    ['anim', 4.0, sample3],

];

  runAnimationTest(t, expectedValues);

});

window.animationStartsImmediately = true;

</script>