[DOM] Fix Fragment compareDocumentPosition for the root container (react#37613)

## Summary

`FragmentInstance.compareDocumentPosition()` returns
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` instead of `CONTAINS |
PRECEDING` for the container passed to `createRoot()`, and for any
element between that container and `document.body`:

```js
const container = document.getElementById('root');
createRoot(container).render(<div><Fragment ref={ref}><div /></Fragment></div>);

ref.current.compareDocumentPosition(document.body); // contains
ref.current.compareDocumentPosition(container);     // implementationSpecific
```

The `CONTAINS` fiber validation enumerates the nodes that have no fiber
as `document`, `documentElement` and `body`. That list is never
complete: the root container has no fiber either, and neither does any
non-React element above it, so both fall through and are reported as
implementation specific.

This checks that `otherNode` contains the root container instead, which
covers all of those uniformly.

Adjacent to react#37579, which fixed a `null` dereference in the same branch.

Author: BlackHatMan

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

@@ -71,6 +71,7 @@ import {
   traverseFragmentInstancesAndTextInstancesDeeply,
   fiberIsPortaledIntoHost,
   getFragmentPortalContainerInfo,
+  getFragmentRootContainerInfo,
   isFiberContainedByFragment,
   isFragmentContainedByFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
@@ -3715,13 +3716,13 @@ function validateDocumentPositionWithFiberTree(
   }
   if (documentPosition & Node.DOCUMENT_POSITION_CONTAINS) {
     if (otherFiber === null) {
-      // otherFiber could be null if its the document, documentElement, or body
-      const ownerDocument = getOwnerDocumentFromRootContainer(otherNode);
-      return (
-        (otherNode as Instance | Document) === ownerDocument ||
-        otherNode === ownerDocument.documentElement ||
-        otherNode === ownerDocument.body
-      );
+      // otherFiber is null when otherNode is not part of a React tree. That
+      // includes the document, documentElement and body, but also the root
+      // container and any element above it. All of them contain the whole
+      // React tree, so check containment of the root container rather than
+      // enumerating the nodes above it.
+      const rootContainer = getFragmentRootContainerInfo(fragmentFiber);
+      return rootContainer !== null && otherNode.contains(rootContainer);
     }
     return isFragmentContainedByFiber(fragmentFiber, otherFiber);
   }

packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js

@@ -2534,6 +2534,56 @@ describe('FragmentRefs', () => {
       );
     });
 
+    it('handles the root container and other ancestors above the React tree', async () => {
+      // The root container and anything above it are outside of the React tree,
+      // the same as document, documentElement and body.
+      const outerElement = document.createElement('div');
+      const rootContainer = document.createElement('div');
+      container.appendChild(outerElement);
+      outerElement.appendChild(rootContainer);
+
+      const fragmentRef = React.createRef();
+      const root = ReactDOMClient.createRoot(rootContainer);
+
+      function Test() {
+        return (
+          <div>
+            <Fragment ref={fragmentRef}>
+              <div />
+            </Fragment>
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+
+      // The root container precedes and contains the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(rootContainer),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // So does an element between the root container and body
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(outerElement),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+    });
+
     it('handles fragment instances with one child', async () => {
       const fragmentRef = React.createRef();
       const beforeRef = React.createRef();

packages/react-reconciler/src/ReactFiberTreeReflection.js

@@ -440,6 +440,17 @@ export function getFragmentParentInstanceOrContainerFiber(
   return null;
 }
 
+export function getFragmentRootContainerInfo(fiber: Fiber): null | Container {
+  let parent = fiber.return;
+  while (parent !== null) {
+    if (parent.tag === HostRoot) {
+      return parent.stateNode.containerInfo as Container;
+    }
+    parent = parent.return;
+  }
+  return null;
+}
+
 export function fiberIsPortaledIntoHost(fiber: Fiber): boolean {
   let foundPortalParent = false;
   let parent = fiber.return;