@editframe/elements 0.25.1-beta.0 → 0.26.0-beta.0

package/src/elements/updateAnimations.browsertest.ts

@@ -1080,4 +1080,805 @@ describe("Timeline Element Synchronizer", () => {
       );
     });
   });
+
+  describe("animation-direction support", () => {
+    test("normal direction: maintains forward playback at start", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 0,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "normal",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(animation.currentTime, 0);
+    });
+
+    test("normal direction: maintains forward playback at middle", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "normal",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 500, 1);
+    });
+
+    test("normal direction: maintains forward playback near end", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 999,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "normal",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 999, 1);
+    });
+
+    test("reverse direction: shows end frame at start", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 0,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 1000, 1);
+    });
+
+    test("reverse direction: shows reversed progress at middle", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 300,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 700, 1);
+    });
+
+    test("reverse direction: shows start frame near end", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 999,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 1, 2);
+    });
+
+    test("alternate direction: plays forward in iteration 0", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 250, 1);
+    });
+
+    test("alternate direction: plays backward in iteration 1", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 750, 1);
+    });
+
+    test("alternate direction: plays forward in iteration 2", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 2250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 250, 1);
+    });
+
+    test("alternate-reverse direction: plays backward in iteration 0", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate-reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 750, 1);
+    });
+
+    test("alternate-reverse direction: plays forward in iteration 1", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate-reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 250, 1);
+    });
+
+    test("alternate-reverse direction: plays backward in iteration 2", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 2250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate-reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 750, 1);
+    });
+
+    test("alternate direction at exact iteration boundary (start of iteration 1)", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1000,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 1000, 1);
+    });
+
+    test("alternate direction at exact iteration boundary (start of iteration 2)", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 2000,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 0, 1);
+    });
+
+    test("reverse direction with single iteration", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 400,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 1,
+        direction: "reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 600, 1);
+    });
+
+    test("multiple animations with different directions on same element", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 300,
+      });
+
+      const normalAnimation = element.animate(
+        [{ opacity: 0 }, { opacity: 1 }],
+        {
+          duration: 1000,
+          direction: "normal",
+        },
+      );
+
+      const reverseAnimation = element.animate(
+        [{ transform: "scale(1)" }, { transform: "scale(2)" }],
+        {
+          duration: 1000,
+          direction: "reverse",
+        },
+      );
+
+      const alternateAnimation = element.animate(
+        [{ color: "red" }, { color: "blue" }],
+        {
+          duration: 1000,
+          iterations: 3,
+          direction: "alternate",
+        },
+      );
+
+      updateAnimations(element);
+
+      assert.approximately(normalAnimation.currentTime as number, 300, 1);
+      assert.approximately(reverseAnimation.currentTime as number, 700, 1);
+      assert.approximately(alternateAnimation.currentTime as number, 300, 1);
+    });
+
+    test("alternate direction with delay: iteration 0 plays forward", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 750,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 750, 1);
+    });
+
+    test("alternate direction with delay: iteration 1 plays backward", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1750,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 1250, 1);
+    });
+
+    test("reverse direction respects precision offset to prevent completion", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1000,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+      });
+
+      updateAnimations(element);
+
+      assert.isBelow(
+        animation.currentTime as number,
+        1000,
+        "Animation should not reach exact completion",
+      );
+      assert.approximately(animation.currentTime as number, 999, 1);
+    });
+
+    test("alternate direction at end of final iteration respects precision offset", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 2999,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+      });
+
+      updateAnimations(element);
+
+      assert.isBelow(
+        animation.currentTime as number,
+        1000,
+        "Animation should not reach iteration completion",
+      );
+      assert.approximately(
+        animation.currentTime as number,
+        999,
+        1,
+        "Should be at end of iteration 2 with precision offset",
+      );
+    });
+  });
+
+  describe("animation-fill-mode support", () => {
+    test("fill-mode none: animation before delay shows no effect", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        fill: "none",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(
+        animation.currentTime,
+        0,
+        "Animation should be at start when before delay with fill: none",
+      );
+    });
+
+    test("fill-mode backwards: animation before delay applies starting values", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        fill: "backwards",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(
+        animation.currentTime,
+        0,
+        "Animation should be at start when before delay with fill: backwards",
+      );
+    });
+
+    test("fill-mode forwards: animation after completion holds final state", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        fill: "forwards",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        999,
+        1,
+        "Animation should be held at end with precision offset",
+      );
+    });
+
+    test("fill-mode both: applies both backwards and forwards behavior", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        fill: "both",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(
+        animation.currentTime,
+        0,
+        "Animation should be at start when before delay with fill: both",
+      );
+    });
+
+    test("fill-mode forwards with element at exact end boundary", () => {
+      const rootTimegroup = {
+        currentTimeMs: 1000,
+        durationMs: 1000,
+        startTimeMs: 0,
+        endTimeMs: 1000,
+        tagName: "EF-TIMEGROUP",
+      } as any;
+
+      const element = createTestElement({
+        startTimeMs: 0,
+        endTimeMs: 1000,
+        durationMs: 1000,
+        ownCurrentTimeMs: 1000,
+        rootTimegroup,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        fill: "forwards",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(
+        element.style.display,
+        "",
+        "Element should be visible at exact end boundary (root element)",
+      );
+
+      assert.approximately(
+        animation.currentTime as number,
+        999,
+        1,
+        "Animation should be coordinated near completion with precision offset",
+      );
+    });
+
+    test("fill-mode none: animation past completion has no effect", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        fill: "none",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        999,
+        1,
+        "Animation should still be coordinated at end even with fill: none",
+      );
+    });
+
+    test("fill-mode forwards with reverse direction", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+        fill: "forwards",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        999,
+        1,
+        "Reverse animation with forwards fill should hold at logical end (visual start)",
+      );
+    });
+
+    test("fill-mode backwards with reverse direction", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        delay: 500,
+        direction: "reverse",
+        fill: "backwards",
+      });
+
+      updateAnimations(element);
+
+      assert.equal(
+        animation.currentTime,
+        0,
+        "Reverse animation with backwards fill should apply logical start (visual end) during delay",
+      );
+    });
+  });
+
+  describe("animation-timing-function support", () => {
+    test("ease timing function: correctly interpolates at midpoint", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "ease",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        500,
+        1,
+        "Timeline position should be correct regardless of easing",
+      );
+    });
+
+    test("linear timing function: evenly distributes time", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "linear",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 500, 1);
+    });
+
+    test("ease-in timing function: slow start", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "ease-in",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        250,
+        1,
+        "Timeline coordination should be independent of easing curve",
+      );
+    });
+
+    test("ease-out timing function: slow end", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 750,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "ease-out",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 750, 1);
+    });
+
+    test("ease-in-out timing function: slow start and end", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 500,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "ease-in-out",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 500, 1);
+    });
+
+    test("cubic-bezier timing function: custom curve", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 400,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "cubic-bezier(0.42, 0, 0.58, 1)",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 400, 1);
+    });
+
+    test("steps timing function: start - discrete jumps at interval starts", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "steps(4, start)",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        250,
+        1,
+        "Steps timing should work with timeline coordination",
+      );
+    });
+
+    test("steps timing function: end - discrete jumps at interval ends", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 250,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "steps(4, end)",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 250, 1);
+    });
+
+    test("step-start timing function: immediate jump to end value", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 100,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "step-start",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        100,
+        1,
+        "Step-start should work with timeline coordination",
+      );
+    });
+
+    test("step-end timing function: hold start value until end", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 999,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        easing: "step-end",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(animation.currentTime as number, 999, 1);
+    });
+
+    test("timing function with reverse direction", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 300,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        direction: "reverse",
+        easing: "ease-in",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        700,
+        1,
+        "Reverse direction should correctly invert time with easing",
+      );
+    });
+
+    test("timing function with alternate direction", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 1300,
+      });
+
+      const animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 1000,
+        iterations: 3,
+        direction: "alternate",
+        easing: "ease-out",
+      });
+
+      updateAnimations(element);
+
+      assert.approximately(
+        animation.currentTime as number,
+        700,
+        1,
+        "Alternate direction should work with easing on reversed iterations",
+      );
+    });
+
+    test("multiple animations with different timing functions", () => {
+      const element = createTestElement({
+        ownCurrentTimeMs: 500,
+      });
+
+      const linearAnimation = element.animate(
+        [{ opacity: 0 }, { opacity: 1 }],
+        {
+          duration: 1000,
+          easing: "linear",
+        },
+      );
+
+      const easeAnimation = element.animate(
+        [{ transform: "scale(1)" }, { transform: "scale(2)" }],
+        {
+          duration: 1000,
+          easing: "ease-in-out",
+        },
+      );
+
+      const stepsAnimation = element.animate(
+        [{ color: "red" }, { color: "blue" }],
+        {
+          duration: 1000,
+          easing: "steps(5, end)",
+        },
+      );
+
+      updateAnimations(element);
+
+      assert.approximately(
+        linearAnimation.currentTime as number,
+        500,
+        1,
+        "Linear animation should be at midpoint",
+      );
+      assert.approximately(
+        easeAnimation.currentTime as number,
+        500,
+        1,
+        "Ease animation should be at midpoint timeline",
+      );
+      assert.approximately(
+        stepsAnimation.currentTime as number,
+        500,
+        1,
+        "Steps animation should be at midpoint timeline",
+      );
+    });
+  });
 });