Fix documentElement methods for element not working correctly (#49898)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49898

Changelog: [internal]

In the method to access the native node reference from elements, we weren't considering the case where the element is the `documentElement`, which is a special case we were handling correctly in the case of native node references from nodes (where we also handle it possibly being a document node).

Because of this, methods in `Element` and `ReactNativeElement` weren't working correctly on the `documentElement`. We didn't catch this initially because we only tested the traversal methods defined in node in the test for `ReactNativeDocument`.

This fixes the issue.

Reviewed By: javache

Differential Revision: D70792748

fbshipit-source-id: c42d05a066efaffccade94e9d3835fb7172e2335

packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js

@@ -125,6 +125,32 @@ describe('ReactNativeDocument', () => {
     expect(document.textContent).toBe(null);
   });
 
+  it('provides a documentElement node that behaves like a regular element', () => {
+    let lastNode;
+
+    const root = Fantom.createRoot({viewportWidth: 200, viewportHeight: 100});
+    Fantom.runTask(() => {
+      root.render(
+        <View
+          ref={node => {
+            lastNode = node;
+          }}
+        />,
+      );
+    });
+
+    const element = ensureInstance(lastNode, ReactNativeElement);
+    const document = ensureInstance(element.ownerDocument, ReactNativeDocument);
+
+    const {x, y, width, height} =
+      document.documentElement.getBoundingClientRect();
+
+    expect(x).toBe(0);
+    expect(y).toBe(0);
+    expect(width).toBe(200);
+    expect(height).toBe(100);
+  });
+
   it('implements compareDocumentPosition correctly', () => {
     let lastNode;
 

packages/react-native/src/private/webapis/dom/nodes/internals/NodeInternals.js

@@ -129,6 +129,12 @@ export function getNativeElementReference(
   // $FlowExpectedError[incompatible-cast] We know ReadOnlyElement instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
+  if (isReactNativeDocumentElementInstanceHandle(instanceHandle)) {
+    return getNativeElementReferenceFromReactNativeDocumentElementInstanceHandle(
+      instanceHandle,
+    );
+  }
+
   // $FlowExpectedError[incompatible-return]
   return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
 }