<!DOCTYPE html>
<html>
  <head>
    <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger">
    <script src="/resources/testdriver.js"></script>
    <script src="/resources/testdriver-vendor.js"></script>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/web-animations/testcommon.js"></script>
  </head>
  <body>
    <div id="event-target">Click me!</div>

    <div id="animation-target">Watch me!</div>
    <script>
      promise_test(async (test) => {
        const eventTarget = document.getElementById("event-target");
        const animationTarget = document.getElementById("animation-target");
        const ANIMATION_DURATION_MS = 10000;
        const animation = new Animation(
          new KeyframeEffect(
            animationTarget,
            [
              { transform: "translateY(0)" },
              { transform: "translateY(3rem)" },
            ],
            { duration: ANIMATION_DURATION_MS, fill: "both" }
          ));
        const trigger = new EventTrigger({
          eventType: "click",
          eventTarget: eventTarget
        });
        trigger.addAnimation(animation, "replay");
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "idle", "animation is idle");
        await test_driver.click(eventTarget);
        await waitForAnimationFrames(3);
        assert_equals(animation.playState, "running", "animation is running");
        assert_less_than(0, animation.overallProgress, "Animation has progressed");
        let progress = animation.overallProgress;
        await test_driver.click(eventTarget);
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "running", "animation is still running");
        assert_less_than(animation.overallProgress, progress, "Progress has been reset");
        animation.finish();
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "finished", "Animation has finished");
        await test_driver.click(eventTarget);
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "running", "animation is running again");
        animation.pause();
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "paused", "Animation is paused");
        await test_driver.click(eventTarget);
        await waitForAnimationFrames(1);
        assert_equals(animation.playState, "running", "animation is running after pause");
      }, "Basic event-based animation-trigger with 'repeat' behavior");
    </script>
  </body>
</html>