From 7e8fb5866ddc04edf1f09f0413f3f2061b39b333 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 7 Mar 2025 12:23:06 -0500
Subject: [PATCH] Limit the scope of cancellations to documentElement

This is in preparation for nested View Transitions. In that case we
shouldn't cancel other nested View Transitions than the one we started.
---
 .../src/client/ReactFiberConfigDOM.js                  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 39d50d617c7d7..fde3426bf19ff 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1550,16 +1550,16 @@ export function hasInstanceAffectedParent(
   return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
 }
 
-function cancelAllViewTransitionAnimations(ownerDocument: Document) {
+function cancelAllViewTransitionAnimations(scope: Element) {
   // In Safari, we need to manually cancel all manually start animations
   // or it'll block or interfer with future transitions.
-  const animations = ownerDocument.getAnimations();
+  const animations = scope.getAnimations({ subtree: true });
   for (let i = 0; i < animations.length; i++) {
     const anim = animations[i];
     const effect: KeyframeEffect = (anim.effect: any);
     // $FlowFixMe
     const pseudo: ?string = effect.pseudoElement;
-    if (pseudo != null && pseudo.startsWith('::view-transition')) {
+    if (pseudo != null && pseudo.startsWith('::view-transition') && effect.target === scope) {
       anim.cancel();
     }
   }
@@ -1655,7 +1655,7 @@ export function startViewTransition(
     }
     transition.ready.then(spawnedWorkCallback, spawnedWorkCallback);
     transition.finished.then(() => {
-      cancelAllViewTransitionAnimations(ownerDocument);
+      cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
       // $FlowFixMe[prop-missing]
       if (ownerDocument.__reactViewTransition === transition) {
         // $FlowFixMe[prop-missing]
@@ -1932,7 +1932,7 @@ export function startGestureTransition(
         : readyCallback;
     transition.ready.then(readyForAnimations, readyCallback);
     transition.finished.then(() => {
-      cancelAllViewTransitionAnimations(ownerDocument);
+      cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
       // $FlowFixMe[prop-missing]
       if (ownerDocument.__reactViewTransition === transition) {
         // $FlowFixMe[prop-missing]