From dc2e552a9454a367a349c14e4e11ef6efdb49c0a Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Thu, 18 Jan 2024 21:22:05 -0800
Subject: [PATCH] Add static zIndex example and e2e test to Catalyst (#42317)

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

Added a complicated zIndex test and corresponding screenshot test for it.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D52439963

fbshipit-source-id: 54bc8cfc9aa2e3c985279fe43027b3db88057c68
---
 .../rn-tester/js/examples/View/ViewExample.js | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 274937e2ade..d8989b90744 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -230,6 +230,78 @@ class ZIndexExample extends React.Component<
   };
 }
 
+function PositionStaticZIndexExample(): React.Node {
+  return (
+    <View
+      testID="view-test-zindex-with-static"
+      style={{backgroundColor: 'yellow', flexDirection: 'row'}}>
+      <View
+        style={{
+          backgroundColor: 'red',
+          width: 100,
+          height: 100,
+          position: 'relative',
+          left: 10,
+        }}>
+        <View
+          style={{
+            backgroundColor: 'purple',
+            width: 50,
+            height: 50,
+            top: 30,
+            left: 65,
+            position: 'relative',
+          }}
+        />
+      </View>
+      <View
+        style={{
+          backgroundColor: 'blue',
+          width: 100,
+          height: 100,
+          zIndex: 100,
+          position: 'static',
+        }}>
+        <View
+          style={{
+            backgroundColor: 'orange',
+            width: 50,
+            height: 50,
+            top: 10,
+            position: 'relative',
+          }}
+        />
+        <View
+          style={{
+            backgroundColor: 'brown',
+            width: 50,
+            height: 50,
+            position: 'static',
+          }}>
+          <View
+            style={{
+              backgroundColor: 'black',
+              width: 25,
+              height: 25,
+              top: -10,
+              position: 'relative',
+            }}
+          />
+        </View>
+      </View>
+      <View
+        style={{
+          backgroundColor: 'green',
+          width: 100,
+          height: 100,
+          position: 'relative',
+          left: -20,
+        }}
+      />
+    </View>
+  );
+}
+
 class DisplayNoneStyle extends React.Component<
   $ReadOnly<{||}>,
   {|
@@ -663,6 +735,11 @@ export default ({
         return <ZIndexExample />;
       },
     },
+    {
+      title: 'ZIndex With Static',
+      name: 'zindex-with-static',
+      render: PositionStaticZIndexExample,
+    },
     {
       title: '`display: none` style',
       name: 'display-none',