From b84a220e63dc21365dc045ceb50e9fda011e2182 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@fb.com>
Date: Wed, 15 Nov 2023 10:45:26 -0800
Subject: [PATCH] Insets no longer apply to statically positioned nodes (#1454)

Summary:

X-link: https://github.com/facebook/react-native/pull/41369

One of the most basic aspects of statically positioned nodes is that [insets do not apply to them](https://developer.mozilla.org/en-US/docs/Web/CSS/position#static). So I put a guard inside `Node::relativePosition` where we take that into account when setting the position.

Reviewed By: NickGerleman

Differential Revision: D50507808
---
 gentest/fixtures/YGStaticPositionTest.html             |  4 ++--
 java/tests/com/facebook/yoga/YGStaticPositionTest.java |  2 --
 .../tests/generated/YGStaticPositionTest.test.ts       |  4 ++--
 tests/generated/YGStaticPositionTest.cpp               |  4 ----
 yoga/node/Node.cpp                                     | 10 +++++++---
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/gentest/fixtures/YGStaticPositionTest.html b/gentest/fixtures/YGStaticPositionTest.html
index e73e35f3a5..30b781172b 100644
--- a/gentest/fixtures/YGStaticPositionTest.html
+++ b/gentest/fixtures/YGStaticPositionTest.html
@@ -1,11 +1,11 @@
 <!-- The top level divs in each test are needed so that each div overlays each
      other and the top measurement is accurate -->
-<div id="static_position_insets_have_no_effect_left_top" data-disabled="true">
+<div id="static_position_insets_have_no_effect_left_top">
     <div style="width: 100px; height: 100px; position: static; top: 50px; left: 50px;">
     </div>
 </div>
 
-<div id="static_position_insets_have_no_effect_right_bottom" data-disabled="true">
+<div id="static_position_insets_have_no_effect_right_bottom">
     <div style="width: 100px; height: 100px; position: static; bottom: 50px; right: 50px;">
     </div>
 </div>
diff --git a/java/tests/com/facebook/yoga/YGStaticPositionTest.java b/java/tests/com/facebook/yoga/YGStaticPositionTest.java
index 3cc2f5459e..4b9635f973 100644
--- a/java/tests/com/facebook/yoga/YGStaticPositionTest.java
+++ b/java/tests/com/facebook/yoga/YGStaticPositionTest.java
@@ -26,7 +26,6 @@ public static Iterable<TestParametrization.NodeFactory> nodeFactories() {
   @Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;
 
   @Test
-  @Ignore
   public void test_static_position_insets_have_no_effect_left_top() {
     YogaConfig config = YogaConfigFactory.create();
     config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
@@ -68,7 +67,6 @@ public void test_static_position_insets_have_no_effect_left_top() {
   }
 
   @Test
-  @Ignore
   public void test_static_position_insets_have_no_effect_right_bottom() {
     YogaConfig config = YogaConfigFactory.create();
     config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
diff --git a/javascript/tests/generated/YGStaticPositionTest.test.ts b/javascript/tests/generated/YGStaticPositionTest.test.ts
index 5cd3eb62d4..c3628fc8f1 100644
--- a/javascript/tests/generated/YGStaticPositionTest.test.ts
+++ b/javascript/tests/generated/YGStaticPositionTest.test.ts
@@ -25,7 +25,7 @@ import {
   Wrap,
 } from 'yoga-layout';
 
-test.skip('static_position_insets_have_no_effect_left_top', () => {
+test('static_position_insets_have_no_effect_left_top', () => {
   const config = Yoga.Config.create();
   let root;
 
@@ -72,7 +72,7 @@ test.skip('static_position_insets_have_no_effect_left_top', () => {
     config.free();
   }
 });
-test.skip('static_position_insets_have_no_effect_right_bottom', () => {
+test('static_position_insets_have_no_effect_right_bottom', () => {
   const config = Yoga.Config.create();
   let root;
 
diff --git a/tests/generated/YGStaticPositionTest.cpp b/tests/generated/YGStaticPositionTest.cpp
index 21094c9908..3bdade9f47 100644
--- a/tests/generated/YGStaticPositionTest.cpp
+++ b/tests/generated/YGStaticPositionTest.cpp
@@ -12,8 +12,6 @@
 #include <yoga/Yoga.h>
 
 TEST(YogaTest, static_position_insets_have_no_effect_left_top) {
-  GTEST_SKIP();
-
   const YGConfigRef config = YGConfigNew();
   YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true);
 
@@ -56,8 +54,6 @@ TEST(YogaTest, static_position_insets_have_no_effect_left_top) {
 }
 
 TEST(YogaTest, static_position_insets_have_no_effect_right_bottom) {
-  GTEST_SKIP();
-
   const YGConfigRef config = YGConfigNew();
   YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true);
 
diff --git a/yoga/node/Node.cpp b/yoga/node/Node.cpp
index e5100ee281..b04c05a578 100644
--- a/yoga/node/Node.cpp
+++ b/yoga/node/Node.cpp
@@ -502,11 +502,16 @@ void Node::setLayoutDimension(float dimensionValue, Dimension dimension) {
 }
 
 // If both left and right are defined, then use left. Otherwise return +left or
-// -right depending on which is defined.
+// -right depending on which is defined. Ignore statically positioned nodes as
+// insets do not apply to them.
 float Node::relativePosition(
     FlexDirection axis,
     Direction direction,
     float axisSize) const {
+  if (style_.positionType() == PositionType::Static &&
+      !hasErrata(Errata::PositionStaticBehavesLikeRelative)) {
+    return 0;
+  }
   if (isInlineStartPositionDefined(axis, direction)) {
     return getInlineStartPosition(axis, direction, axisSize);
   }
@@ -528,8 +533,7 @@ void Node::setPosition(
   const FlexDirection crossAxis =
       yoga::resolveCrossDirection(mainAxis, directionRespectingRoot);
 
-  // Here we should check for `PositionType::Static` and in this case zero inset
-  // properties (left, right, top, bottom, begin, end).
+  // In the case of position static these are just 0. See:
   // https://www.w3.org/TR/css-position-3/#valdef-position-static
   const float relativePositionMain =
       relativePosition(mainAxis, directionRespectingRoot, mainSize);