Support {Element|DocumentOrShadowRoot}.getAnimations({subtree: true})…

… for view-transitions. There are two reasons we cannot use the original version of pseudo-element-animaiton.html: 1. Our finished promise is never resolved (Bug 1914322). 2. We haven't imported the UA stylesheet (Bug 1914323, Bug 1914324). So I need to write a new test based on our current implementation, and rename the original pseudo-element-animations.html as pseudo-element-animations-rerun.html. Differential Revision: https://phabricator.services.mozilla.com/D231345 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1921109 gecko-commit: 2a99eda179fe52e825c1fa813df4524eaf3e76b3 gecko-reviewers: view-transitions-reviewers, emilio
web-platform-tests · Jan 22, 2025 · 650b858 · 650b858
1 parent 41bcf67
commit 650b858
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 20 deletions.
diff --git a/css/css-view-transitions/pseudo-element-animations-rerun.html b/css/css-view-transitions/pseudo-element-animations-rerun.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Animations on view transition pseudos run more than once</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+<style>
+:root::view-transition,
+:root::view-transition-group(root),
+:root::view-transition-image-pair(root),
+:root::view-transition-old(root),
+:root::view-transition-new(root) {
+    animation: view-transition-animation 1ms;
+}
+@keyframes view-transition-animation {
+    to { opacity: 0 }
+}
+</style>
+<div id="log"></div>
+<script>
+"use strict";
+promise_test(async t => {
+    let viewTransition = document.startViewTransition(() => {});
+    await viewTransition.ready;
+    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Starting a view transition should start related animations.");
+
+    await viewTransition.finished;
+    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 0, "Stopping a view transition should stop related animations.");
+
+    await waitForNextFrame();
+    viewTransition = document.startViewTransition(() => {});
+    await viewTransition.ready;
+    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Re-starting a view-transition should restart related animations.");
+}, "CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.");
+</script>
diff --git a/css/css-view-transitions/pseudo-element-animations.html b/css/css-view-transitions/pseudo-element-animations.html
@@ -1,36 +1,138 @@
 <!doctype html>
 <meta charset=utf-8>
-<title>CSS Animations on view transition pseudos run more than once</title>
+<title>CSS Animations and Web Animations on view transition pseudos</title>
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/">
+<link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-animatable-animate">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../css-animations/support/testcommon.js"></script>
 <style>
+/* Override UA stylesheet to avoid any impact on our tests */
+:root {
+  view-transition-name: none;
+}
 :root::view-transition,
-:root::view-transition-group(root),
-:root::view-transition-image-pair(root),
-:root::view-transition-old(root),
-:root::view-transition-new(root) {
-    animation: view-transition-animation 1ms;
+:root::view-transition-group(*),
+:root::view-transition-image-pair(*),
+:root::view-transition-old(*),
+:root::view-transition-new(*) {
+  animation: unset;
 }
-@keyframes view-transition-animation {
-    to { opacity: 0 }
+
+@keyframes css-anim {
+  from { margin-left: 100px; }
+  to { margin-left: 100px; }
 }
 </style>
 <div id="log"></div>
 <script>
 "use strict";
+
+promise_test(async t => {
+  document.documentElement.style.viewTransitionName = "test";
+  const ruleText =
+    ":root::view-transition, :root::view-transition-group(test) {" +
+    "  animation: css-anim 10s;"
+    "}";
+  const index = document.styleSheets[0].cssRules.length;
+  document.styleSheets[0].insertRule(ruleText, index);
+
+  let viewTransition = document.startViewTransition(() => {});
+  await viewTransition.ready;
+
+  let anims = document.documentElement.getAnimations({ subtree: true });
+  assert_equals(anims.length, 2, "Has 2 CSS Animations.");
+  let style = getComputedStyle(document.documentElement,
+    "::view-transition-group(test)");
+  assert_equals(style.marginLeft, "100px");
+
+  viewTransition.skipTransition();
+  document.styleSheets[0].deleteRule(index);
+  document.documentElement.style.viewTransitionName = "none";
+}, "The specified CSS Animations work on view transition pseudos.");
+
+promise_test(async t => {
+  document.documentElement.style.viewTransitionName = "test";
+  const ruleText =
+    ":root::view-transition, :root::view-transition-group(test) {" +
+    "animation: css-anim 10s;"
+    "}";
+  const index = document.styleSheets[0].cssRules.length;
+  document.styleSheets[0].insertRule(ruleText, index);
+
+  let viewTransition = document.startViewTransition(() => {});
+  await viewTransition.ready;
+
+  let anim1 = document.documentElement.animate(
+    { opacity: [0.5, 0.5] },
+    { duration: 10000, pseudoElement: '::view-transition-group(test)' }
+  );
+  await anim1.ready;
+
+  let kf = new KeyframeEffect(
+    document.documentElement,
+    { translate: ["200px", "200px"] },
+    { duration: 10000, pseudoElement: '::view-transition-old(test)' }
+  );
+  let anim2 = new Animation(kf, document.timeline);
+  anim2.play();
+  await anim2.ready;
+
+  let anims = document.documentElement.getAnimations({ subtree: true });
+  assert_equals(anims.length, 4,
+    "Has 2 CSS Animations and 2 script animations.");
+
+  let style = getComputedStyle(document.documentElement,
+    "::view-transition-group(test)");
+  assert_equals(style.marginLeft, "100px");
+  assert_equals(style.opacity, "0.5");
+  assert_equals(
+    getComputedStyle(document.documentElement,
+      "::view-transition-old(test)").translate,
+    "200px"
+  );
+
+  anim1.finish();
+  anim2.finish();
+  viewTransition.skipTransition();
+  document.styleSheets[0].deleteRule(index);
+  document.documentElement.style.viewTransitionName = "none";
+}, "The specified CSS Animations and script animations work on view "+
+   "transition pseudos");
+
 promise_test(async t => {
-    let viewTransition = document.startViewTransition(() => {});
-    await viewTransition.ready;
-    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Starting a view transition should start related animations.");
-
-    await viewTransition.finished;
-    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 0, "Stopping a view transition should stop related animations.");
-
-    await waitForNextFrame();
-    viewTransition = document.startViewTransition(() => {});
-    await viewTransition.ready;
-    assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Re-starting a view-transition should restart related animations.");
-}, "CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.");
+  document.documentElement.style.viewTransitionName = "test";
+  let ruleText =
+    ":root::view-transition, " +
+    ":root::view-transition-group(test), " +
+    ":root::view-transition-image-pair(test) {" +
+    "  animation: css-anim 10s;"
+    "}";
+  const index = document.styleSheets[0].cssRules.length;
+  document.styleSheets[0].insertRule(ruleText, index);
+
+  let viewTransition = document.startViewTransition(() => {});
+  await viewTransition.ready;
+
+  let anims = document.documentElement.getAnimations({ subtree: true });
+  assert_equals(anims.length, 3, "Has 3 CSS Animations.");
+
+  // Make the pseudo-element display:none.
+  ruleText = ":root::view-transition-image-pair(test) { display: none; }";
+  document.styleSheets[0].insertRule(ruleText, index + 1);
+  anims = document.documentElement.getAnimations({ subtree: true });
+  assert_equals(anims.length, 2, "One CSS Animation was removed.");
+
+  // Destroy all frames.
+  document.documentElement.style.display = "none";
+  anims = document.documentElement.getAnimations({ subtree: true });
+  assert_equals(anims.length, 0, "All CSS Animation were removed.");
+
+  viewTransition.skipTransition();
+  document.styleSheets[0].deleteRule(index + 1);
+  document.styleSheets[0].deleteRule(index);
+  document.documentElement.style.viewTransitionName = "none";
+  document.documentElement.style.display = "inline";
+}, "The specified CSS Animations are removed if setting display:none.");
+
 </script>