Make it so that a view with a filter forms a stacking context and con…

…taining block (#44456)

Summary:
Pull Request resolved: #44456

Self explanatory: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context#description and https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D55044674

fbshipit-source-id: fcc3b04f5b1d5dd11b8e9e15b3c5bdbf9b609f7c

packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp

@@ -61,6 +61,7 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.accessibilityViewIsModal ||
       viewProps.importantForAccessibility != ImportantForAccessibility::Auto ||
       viewProps.removeClippedSubviews || viewProps.cursor != Cursor::Auto ||
+      !viewProps.filter.empty() ||
       HostPlatformViewTraitsInitializer::formsStackingContext(viewProps);
 
   bool formsView = formsStackingContext ||

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -376,8 +376,11 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   yogaNode_.setStyle(styleResult);
   if (getTraits().check(ShadowNodeTraits::ViewKind)) {
     auto& viewProps = static_cast<const ViewProps&>(*props_);
-    YGNodeSetAlwaysFormsContainingBlock(
-        &yogaNode_, viewProps.transform != Transform::Identity());
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+    bool alwaysFormsContainingBlock =
+        viewProps.transform != Transform::Identity() ||
+        !viewProps.filter.empty();
+    YGNodeSetAlwaysFormsContainingBlock(&yogaNode_, alwaysFormsContainingBlock);
   }
 }