[animation-trigger] Ensure getAnimations includes yet-to-trigger animations

David Awogbemila · chromium-wpt-export-bot · commit 3325432c1584 · 2025-03-28T09:42:33.000-07:00
getAnimations should account for animations which could still be played due to their having a trigger. The current intent is to modify "relevant animations" (which is what getAnimations returns) using the criteria at [1]. [1] w3c/csswg-drafts#11971 (comment) Bug: 406190895, 390314945 Change-Id: I41183fb7ba14df9218ca1360b0f890d666c58f98 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6393216 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1439452}
diff --git a/scroll-animations/animation-trigger/animation-trigger-getanimations.tentative.html b/scroll-animations/animation-trigger/animation-trigger-getanimations.tentative.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="help" href="https://drafts.csswg.org/web-animations-2#animation-trigger">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <style>
+      .scroller {
+        overflow-y: scroll;
+        border: solid 1px;
+        place-self: center;
+        height: 300px;
+        width: 200px;
+      }
+      @keyframes slide-in {
+        from {
+          transform: translateX(-50px);
+        }
+      }
+      .target {
+        height: 100px;
+        width: 100%;
+        background-color: blue;
+        animation: slide-in 3s;
+        animation-trigger: view() alternate contain 0% contain 100%;
+      }
+      .target {
+        height: 100px;
+        width: 100%;
+        background-color: blue;
+      }
+      .space {
+        height: 250px;
+        width: 50%;
+      }
+
+      .active {
+        animation-fill-mode: both;
+      }
+      .idle {
+        animation-fill-mode: none;
+      }
+
+    </style>
+    <div id="scroller" class="scroller">
+      <div class="space"></div>
+      <div id="subject"></div>
+      <div class="space"></div>
+      <div id="active_target" class="active target"></div>
+      <div id="idle_target" class="idle target"></div>
+    </div>
+    <script>
+      promise_test(async () => {
+        assert_equals(idle_target.getAnimations().length, 1,
+        "idle target has an animation");
+      }, "getAnimations includes an untriggered " +
+         "'fill-mode: none' animation.");
+
+      promise_test(async () => {
+        assert_equals(active_target.getAnimations().length, 1,
+          "active target has an animation");
+      }, "getAnimations does include an untriggered " +
+          "'fill-mode: both' animation.");
+    </script>
+  </body>
+</html>
diff --git a/scroll-animations/animation-trigger/animation-trigger.html b/scroll-animations/animation-trigger/animation-trigger.html
@@ -24,13 +24,13 @@
       .target {
         animation: myAnim linear 0.5s forwards;
       }
-      .scroll_target {
+      #scroll_target {
         animation-trigger: repeat scroll(inline) 150px 200px 100px 250px;
       }
-      .view_target {
+      #view_target {
         animation-trigger: state view(x) contain 10% contain 90% cover 10% cover 90%;
       }
-      .deferred_target {
+      #deferred_target {
         animation-trigger: alternate --viewtimeline contain 5% contain 80% cover 5% cover 80%;
       }
       .scroller {
@@ -108,15 +108,7 @@
 
       promise_test(async() => {
         await waitForNextFrame();
-        // Grabbing a reference to the animation and *then* adding the class
-        // which confers the trigger properties is a workaround to the fact that
-        // if the scroll-based trigger were already in place, the animation
-        // would be idle, getAnimations would not include it, and we would not
-        // be able to get a reference to it.
-        // TODO: if the definition for getAnimations changes such that it should
-        // include un-triggered animations, we should remove this workaround.
         const animation = scroll_target.getAnimations()[0];
-        scroll_target.classList.add("scroll_target");
         const trigger = animation.trigger;
         await waitForNextFrame();
 
@@ -136,7 +128,6 @@
       promise_test(async() => {
         await waitForNextFrame();
         const animation = view_target.getAnimations()[0];
-        view_target.classList.add("view_target");
         const trigger = animation.trigger;
         await waitForNextFrame();
 
@@ -157,7 +148,6 @@
       promise_test(async() => {
         await waitForNextFrame();
         const animation = deferred_target.getAnimations()[0];
-        deferred_target.classList.add("deferred_target");
         const trigger = animation.trigger;
         await waitForNextFrame();
 
