[view-transitions] Allow animations to run more than once

https://bugs.webkit.org/show_bug.cgi?id=269460 rdar://123005914 Reviewed by Antoine Quint. We need to cancel animations when the view transition ends, so they can be re-ran when the view transition is restarted. Also add (incomplete) code to sort web animations for view transition pseudo-elements in tree order to avoid assertions. * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations.html: Added. * Source/WebCore/animation/WebAnimationUtilities.cpp: (WebCore::compareStyleOriginatedAnimationOwningElementPositionsInDocumentTreeOrder): * Source/WebCore/dom/ViewTransition.cpp: (WebCore::ViewTransition::clearViewTransition): Canonical link: https://commits.webkit.org/274734@main
WebKit · Feb 15, 2024 · 4ea01d7 · 4ea01d7
1 parent 0951ebd
commit 4ea01d7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 1 deletion.
diff --git a/...ed/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations-expected.txt b/...ed/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations-expected.txt
@@ -0,0 +1,3 @@
+
+PASS CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.
+
diff --git a/...s/imported/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations.html b/...s/imported/w3c/web-platform-tests/css/css-view-transitions/pseudo-element-animations.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/Source/WebCore/animation/WebAnimationUtilities.cpp b/Source/WebCore/animation/WebAnimationUtilities.cpp
@@ -61,7 +61,8 @@ static bool compareStyleOriginatedAnimationOwningElementPositionsInDocumentTreeO
     //     - any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector
     //     - ::after
     //     - element children
-    enum SortingIndex : uint8_t { NotPseudo, Marker, Before, FirstLetter, FirstLine, GrammarError, Highlight, WebKitScrollbar, Selection, SpellingError, After, Other };
+    // FIXME: Tree order should account for the name argument of view transitions.
+    enum SortingIndex : uint8_t { NotPseudo, Marker, Before, FirstLetter, FirstLine, GrammarError, Highlight, WebKitScrollbar, Selection, SpellingError, After, ViewTransition, ViewTransitionGroup, ViewTransitionImagePair, ViewTransitionOld, ViewTransitionNew, Other };
     auto sortingIndex = [](const std::optional<Style::PseudoElementIdentifier>& pseudoElementIdentifier) -> SortingIndex {
         if (!pseudoElementIdentifier)
             return NotPseudo;
@@ -87,6 +88,16 @@ static bool compareStyleOriginatedAnimationOwningElementPositionsInDocumentTreeO
             return SpellingError;
         case PseudoId::After:
             return After;
+        case PseudoId::ViewTransition:
+            return ViewTransition;
+        case PseudoId::ViewTransitionGroup:
+            return ViewTransitionGroup;
+        case PseudoId::ViewTransitionImagePair:
+            return ViewTransitionImagePair;
+        case PseudoId::ViewTransitionOld:
+            return ViewTransitionOld;
+        case PseudoId::ViewTransitionNew:
+            return ViewTransitionNew;
         default:
             ASSERT_NOT_REACHED();
             return Other;

diff --git a/Source/WebCore/dom/ViewTransition.cpp b/Source/WebCore/dom/ViewTransition.cpp
@@ -31,6 +31,7 @@
 #include "JSDOMPromise.h"
 #include "JSDOMPromiseDeferred.h"
 #include "PseudoElementRequest.h"
+#include "Styleable.h"
 #include "TypedElementDescendantIteratorInlines.h"
 
 namespace WebCore {
@@ -377,6 +378,17 @@ void ViewTransition::clearViewTransition()
 
     // FIXME: Implement step 3.
 
+    // End animations on pseudo-elements so they can run again.
+    if (RefPtr documentElement = m_document->documentElement()) {
+        Styleable(*documentElement, Style::PseudoElementIdentifier { PseudoId::ViewTransition }).cancelStyleOriginatedAnimations();
+        for (auto& name : namedElements().keys()) {
+            Styleable(*documentElement, Style::PseudoElementIdentifier { PseudoId::ViewTransitionGroup, name }).cancelStyleOriginatedAnimations();
+            Styleable(*documentElement, Style::PseudoElementIdentifier { PseudoId::ViewTransitionImagePair, name }).cancelStyleOriginatedAnimations();
+            Styleable(*documentElement, Style::PseudoElementIdentifier { PseudoId::ViewTransitionNew, name }).cancelStyleOriginatedAnimations();
+            Styleable(*documentElement, Style::PseudoElementIdentifier { PseudoId::ViewTransitionOld, name }).cancelStyleOriginatedAnimations();
+        }
+    }
+
     protectedDocument()->setHasViewTransitionPseudoElementTree(false);
     protectedDocument()->setActiveViewTransition(nullptr);