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.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -1550,16 +1550,20 @@ 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 +1659,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]
@@ -1841,7 +1845,8 @@ export function startGestureTransition(
         const pseudoElement: ?string = effect.pseudoElement;
         if (
           pseudoElement != null &&
-          pseudoElement.startsWith('::view-transition')
+          pseudoElement.startsWith('::view-transition') &&
+          effect.target === documentElement
         ) {
           // Ideally we could mutate the existing animation but unfortunately
           // the mutable APIs seem less tested and therefore are lacking or buggy.
@@ -1932,7 +1937,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]