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
This commit is contained in:
Joe Vilches
2024-01-18 21:22:05 -08:00
committed by Facebook GitHub Bot
parent 690660a620
commit dc2e552a94
@@ -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',