Group animations by their effect target for removal

Animations can only be discarded if they affect the same target. It's
not sufficient to target the same element if they target different
pseudo elements.

Bug: 1418968
Change-Id: Ie6cac7ce11c18a768e587f18a5287cdd194bbc0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4292213
Commit-Queue: Robert Flack <[email protected]>
Reviewed-by: Vladimir Levin <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1109817}

web-animations/interfaces/Animatable/animate.html

@@ -342,5 +342,18 @@
      `SyntaxError`);
 }
 
+promise_test(async t => {
+  const div = createDiv(t);
+  div.classList.add('pseudo');
+  let animBefore = div.animate({opacity: [1, 0]}, {duration: 1, pseudoElement: '::before', fill: 'both'});
+  let animAfter = div.animate({opacity: [1, 0]}, {duration: 1, pseudoElement: '::after', fill: 'both'});
+  await animBefore.finished;
+  await animAfter.finished;
+  // The animation on ::before should not be replaced as it targets a different
+  // pseudo-element.
+  assert_equals(animBefore.replaceState, 'active');
+  assert_equals(animAfter.replaceState, 'active');
+}, 'Finished fill animation doesn\'t replace animation on a different pseudoElement');
+
 </script>
 </body>