[animation-trigger] Ensure triggered CSS animations are exposed

Normally, we pause a triggered CSS animation at the time of attaching
the trigger. However, this means we will leave as idle a CSS animation
whose trigger name we didn't find. This results in the animation being
idle and not showing up in getAnimations.

We should:

- make them show up in getAnimations by pausing in anticipation of
  finding the trigger (which may show up later), and
- spec this behavior.

This CL also addresses the fact that pause() likely should not change
the paused_for_trigger state of the animation.

Bug: 390314945, 465915372
Change-Id: I381ea0cc42772a1e4afb5e13d27631982c8be97d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7228342
Reviewed-by: Kevin Ellis <[email protected]>
Reviewed-by: David Awogbemila <[email protected]>
Commit-Queue: David Awogbemila <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1554739}

Author: David Awogbemila

scroll-animations/animation-trigger/animation-trigger-untriggered-animations-exposed.tentative.html

@@ -20,18 +20,18 @@
           transform: translateX(-50px);
         }
       }
-      .target {
+      #subject {
         height: 100px;
-        width: 100%;
-        background-color: blue;
-        animation: slide-in 3s;
+        width: 100px;
+        background-color: purple;
         timeline-trigger: --trigger view() contain 0% contain 100%;
-        animation-trigger: --trigger;
       }
       .target {
         height: 100px;
         width: 100%;
         background-color: blue;
+        animation: slide-in 3s;
+        color: white;
       }
       .space {
         height: 250px;
@@ -45,20 +45,28 @@
         animation-fill-mode: none;
       }
 
+      .valid {
+        animation-trigger: --trigger play-once;
+      }
+      .invalid {
+        animation-trigger: --nonexistent-trigger play-once;
+      }
+
     </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 id="active_target" class="active valid target">Active</div>
+      <div id="idle_target" class="idle valid target">Idle</div>
+      <div id="invalid_target" class="invalid target">Invalid</div>
     </div>
     <script>
       promise_test(async () => {
-        assert_equals(idle_target.getAnimations().length, 1,
-          "idle target has an animation");
-        assert_equals(active_target.getAnimations().length, 1,
-          "active target has an animation");
+        for (const target of document.querySelectorAll(".target")) {
+          assert_equals(target.getAnimations().length, 1,
+            `animation on ${target.id} is exposed`);
+        }
       }, "getAnimations includes an untriggered " +
          "'fill-mode: none' and 'fill-mode: both' animations.");
     </script>