correct pathSeg traversal for bezier curves

Differential Revision: https://phabricator.services.mozilla.com/D193607 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1864378 gecko-commit: f270cb9406c7137c12eb006e7e36d1fe95931b16 gecko-reviewers: boris
web-platform-tests · Nov 15, 2023 · a55d7d9 · a55d7d9
1 parent 6759f84
commit a55d7d9
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/svg/animations/animateMotion-mpath.html b/svg/animations/animateMotion-mpath.html
@@ -0,0 +1,51 @@
+<!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>