From a65f5a550b7e98f2a7c0de69a880a68136319c55 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 7 Dec 2023 14:06:53 -0800 Subject: [PATCH] Fix issue where percentages were off of the border box, not padding box (#1485) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1485 X-link: https://github.com/facebook/react-native/pull/41686 The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this. Added a test that was failing before this change as well Differential Revision: https://www.internalfb.com/diff/D51330526?entry_point=27 fbshipit-source-id: 42df6388386359998fffd34c0920468d84856179 --- gentest/fixtures/YGAbsolutePositionTest.html | 2 +- gentest/fixtures/YGStaticPositionTest.html | 10 +++ .../facebook/yoga/YGStaticPositionTest.java | 79 +++++++++++++++++ .../generated/YGStaticPositionTest.test.ts | 85 +++++++++++++++++++ tests/generated/YGStaticPositionTest.cpp | 80 +++++++++++++++++ yoga/algorithm/AbsoluteLayout.cpp | 9 +- yoga/node/Node.cpp | 5 ++ yoga/node/Node.h | 1 + 8 files changed, 267 insertions(+), 4 deletions(-) diff --git a/gentest/fixtures/YGAbsolutePositionTest.html b/gentest/fixtures/YGAbsolutePositionTest.html index 16bd6e3909..71aa3a15b6 100644 --- a/gentest/fixtures/YGAbsolutePositionTest.html +++ b/gentest/fixtures/YGAbsolutePositionTest.html @@ -93,7 +93,7 @@
-
+
diff --git a/gentest/fixtures/YGStaticPositionTest.html b/gentest/fixtures/YGStaticPositionTest.html index 3cb5e55599..345c11cede 100644 --- a/gentest/fixtures/YGStaticPositionTest.html +++ b/gentest/fixtures/YGStaticPositionTest.html @@ -324,3 +324,13 @@
+ +
+
+
+
+
+
+
+
diff --git a/java/tests/com/facebook/yoga/YGStaticPositionTest.java b/java/tests/com/facebook/yoga/YGStaticPositionTest.java index efa19ace25..87052d51f5 100644 --- a/java/tests/com/facebook/yoga/YGStaticPositionTest.java +++ b/java/tests/com/facebook/yoga/YGStaticPositionTest.java @@ -2653,6 +2653,85 @@ public void test_static_position_static_child_containing_block_content_box() { assertEquals(50f, root_child0_child0.getLayoutHeight(), 0.0f); } + @Test + public void test_static_position_containing_block_padding_and_border() { + YogaConfig config = YogaConfigFactory.create(); + config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true); + + final YogaNode root = createNode(config); + root.setPositionType(YogaPositionType.ABSOLUTE); + + final YogaNode root_child0 = createNode(config); + root_child0.setPadding(YogaEdge.LEFT, 9); + root_child0.setPadding(YogaEdge.TOP, 8); + root_child0.setPadding(YogaEdge.RIGHT, 1); + root_child0.setPadding(YogaEdge.BOTTOM, 4); + root_child0.setBorder(YogaEdge.LEFT, 2f); + root_child0.setBorder(YogaEdge.TOP, 5f); + root_child0.setBorder(YogaEdge.RIGHT, 7f); + root_child0.setBorder(YogaEdge.BOTTOM, 4f); + root_child0.setWidth(400f); + root_child0.setHeight(400f); + root.addChildAt(root_child0, 0); + + final YogaNode root_child0_child0 = createNode(config); + root_child0_child0.setPositionType(YogaPositionType.STATIC); + root_child0_child0.setWidth(100f); + root_child0_child0.setHeight(100f); + root_child0.addChildAt(root_child0_child0, 0); + + final YogaNode root_child0_child0_child0 = createNode(config); + root_child0_child0_child0.setPositionType(YogaPositionType.ABSOLUTE); + root_child0_child0_child0.setWidthPercent(41f); + root_child0_child0_child0.setHeightPercent(61f); + root_child0_child0.addChildAt(root_child0_child0_child0, 0); + root.setDirection(YogaDirection.LTR); + root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED); + + assertEquals(0f, root.getLayoutX(), 0.0f); + assertEquals(0f, root.getLayoutY(), 0.0f); + assertEquals(400f, root.getLayoutWidth(), 0.0f); + assertEquals(400f, root.getLayoutHeight(), 0.0f); + + assertEquals(0f, root_child0.getLayoutX(), 0.0f); + assertEquals(0f, root_child0.getLayoutY(), 0.0f); + assertEquals(400f, root_child0.getLayoutWidth(), 0.0f); + assertEquals(400f, root_child0.getLayoutHeight(), 0.0f); + + assertEquals(11f, root_child0_child0.getLayoutX(), 0.0f); + assertEquals(13f, root_child0_child0.getLayoutY(), 0.0f); + assertEquals(100f, root_child0_child0.getLayoutWidth(), 0.0f); + assertEquals(100f, root_child0_child0.getLayoutHeight(), 0.0f); + + assertEquals(0f, root_child0_child0_child0.getLayoutX(), 0.0f); + assertEquals(0f, root_child0_child0_child0.getLayoutY(), 0.0f); + assertEquals(160f, root_child0_child0_child0.getLayoutWidth(), 0.0f); + assertEquals(239f, root_child0_child0_child0.getLayoutHeight(), 0.0f); + + root.setDirection(YogaDirection.RTL); + root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED); + + assertEquals(0f, root.getLayoutX(), 0.0f); + assertEquals(0f, root.getLayoutY(), 0.0f); + assertEquals(400f, root.getLayoutWidth(), 0.0f); + assertEquals(400f, root.getLayoutHeight(), 0.0f); + + assertEquals(0f, root_child0.getLayoutX(), 0.0f); + assertEquals(0f, root_child0.getLayoutY(), 0.0f); + assertEquals(400f, root_child0.getLayoutWidth(), 0.0f); + assertEquals(400f, root_child0.getLayoutHeight(), 0.0f); + + assertEquals(292f, root_child0_child0.getLayoutX(), 0.0f); + assertEquals(13f, root_child0_child0.getLayoutY(), 0.0f); + assertEquals(100f, root_child0_child0.getLayoutWidth(), 0.0f); + assertEquals(100f, root_child0_child0.getLayoutHeight(), 0.0f); + + assertEquals(-60f, root_child0_child0_child0.getLayoutX(), 0.0f); + assertEquals(0f, root_child0_child0_child0.getLayoutY(), 0.0f); + assertEquals(160f, root_child0_child0_child0.getLayoutWidth(), 0.0f); + assertEquals(239f, root_child0_child0_child0.getLayoutHeight(), 0.0f); + } + private YogaNode createNode(YogaConfig config) { return mNodeFactory.create(config); } diff --git a/javascript/tests/generated/YGStaticPositionTest.test.ts b/javascript/tests/generated/YGStaticPositionTest.test.ts index 023f8d28fb..16a57ced16 100644 --- a/javascript/tests/generated/YGStaticPositionTest.test.ts +++ b/javascript/tests/generated/YGStaticPositionTest.test.ts @@ -2874,3 +2874,88 @@ test('static_position_static_child_containing_block_content_box', () => { config.free(); } }); +test('static_position_containing_block_padding_and_border', () => { + const config = Yoga.Config.create(); + let root; + + config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true); + + try { + root = Yoga.Node.create(config); + root.setPositionType(PositionType.Absolute); + + const root_child0 = Yoga.Node.create(config); + root_child0.setPadding(Edge.Left, 9); + root_child0.setPadding(Edge.Top, 8); + root_child0.setPadding(Edge.Right, 1); + root_child0.setPadding(Edge.Bottom, 4); + root_child0.setBorder(Edge.Left, 2); + root_child0.setBorder(Edge.Top, 5); + root_child0.setBorder(Edge.Right, 7); + root_child0.setBorder(Edge.Bottom, 4); + root_child0.setWidth(400); + root_child0.setHeight(400); + root.insertChild(root_child0, 0); + + const root_child0_child0 = Yoga.Node.create(config); + root_child0_child0.setPositionType(PositionType.Static); + root_child0_child0.setWidth(100); + root_child0_child0.setHeight(100); + root_child0.insertChild(root_child0_child0, 0); + + const root_child0_child0_child0 = Yoga.Node.create(config); + root_child0_child0_child0.setPositionType(PositionType.Absolute); + root_child0_child0_child0.setWidth("41%"); + root_child0_child0_child0.setHeight("61%"); + root_child0_child0.insertChild(root_child0_child0_child0, 0); + root.calculateLayout(undefined, undefined, Direction.LTR); + + expect(root.getComputedLeft()).toBe(0); + expect(root.getComputedTop()).toBe(0); + expect(root.getComputedWidth()).toBe(400); + expect(root.getComputedHeight()).toBe(400); + + expect(root_child0.getComputedLeft()).toBe(0); + expect(root_child0.getComputedTop()).toBe(0); + expect(root_child0.getComputedWidth()).toBe(400); + expect(root_child0.getComputedHeight()).toBe(400); + + expect(root_child0_child0.getComputedLeft()).toBe(11); + expect(root_child0_child0.getComputedTop()).toBe(13); + expect(root_child0_child0.getComputedWidth()).toBe(100); + expect(root_child0_child0.getComputedHeight()).toBe(100); + + expect(root_child0_child0_child0.getComputedLeft()).toBe(0); + expect(root_child0_child0_child0.getComputedTop()).toBe(0); + expect(root_child0_child0_child0.getComputedWidth()).toBe(160); + expect(root_child0_child0_child0.getComputedHeight()).toBe(239); + + root.calculateLayout(undefined, undefined, Direction.RTL); + + expect(root.getComputedLeft()).toBe(0); + expect(root.getComputedTop()).toBe(0); + expect(root.getComputedWidth()).toBe(400); + expect(root.getComputedHeight()).toBe(400); + + expect(root_child0.getComputedLeft()).toBe(0); + expect(root_child0.getComputedTop()).toBe(0); + expect(root_child0.getComputedWidth()).toBe(400); + expect(root_child0.getComputedHeight()).toBe(400); + + expect(root_child0_child0.getComputedLeft()).toBe(292); + expect(root_child0_child0.getComputedTop()).toBe(13); + expect(root_child0_child0.getComputedWidth()).toBe(100); + expect(root_child0_child0.getComputedHeight()).toBe(100); + + expect(root_child0_child0_child0.getComputedLeft()).toBe(-60); + expect(root_child0_child0_child0.getComputedTop()).toBe(0); + expect(root_child0_child0_child0.getComputedWidth()).toBe(160); + expect(root_child0_child0_child0.getComputedHeight()).toBe(239); + } finally { + if (typeof root !== 'undefined') { + root.freeRecursive(); + } + + config.free(); + } +}); diff --git a/tests/generated/YGStaticPositionTest.cpp b/tests/generated/YGStaticPositionTest.cpp index 7ff13b6668..f622a80967 100644 --- a/tests/generated/YGStaticPositionTest.cpp +++ b/tests/generated/YGStaticPositionTest.cpp @@ -2676,3 +2676,83 @@ TEST(YogaTest, static_position_static_child_containing_block_content_box) { YGConfigFree(config); } + +TEST(YogaTest, static_position_containing_block_padding_and_border) { + const YGConfigRef config = YGConfigNew(); + YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true); + + const YGNodeRef root = YGNodeNewWithConfig(config); + YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute); + + const YGNodeRef root_child0 = YGNodeNewWithConfig(config); + YGNodeStyleSetPadding(root_child0, YGEdgeLeft, 9); + YGNodeStyleSetPadding(root_child0, YGEdgeTop, 8); + YGNodeStyleSetPadding(root_child0, YGEdgeRight, 1); + YGNodeStyleSetPadding(root_child0, YGEdgeBottom, 4); + YGNodeStyleSetBorder(root_child0, YGEdgeLeft, 2); + YGNodeStyleSetBorder(root_child0, YGEdgeTop, 5); + YGNodeStyleSetBorder(root_child0, YGEdgeRight, 7); + YGNodeStyleSetBorder(root_child0, YGEdgeBottom, 4); + YGNodeStyleSetWidth(root_child0, 400); + YGNodeStyleSetHeight(root_child0, 400); + YGNodeInsertChild(root, root_child0, 0); + + const YGNodeRef root_child0_child0 = YGNodeNewWithConfig(config); + YGNodeStyleSetPositionType(root_child0_child0, YGPositionTypeStatic); + YGNodeStyleSetWidth(root_child0_child0, 100); + YGNodeStyleSetHeight(root_child0_child0, 100); + YGNodeInsertChild(root_child0, root_child0_child0, 0); + + const YGNodeRef root_child0_child0_child0 = YGNodeNewWithConfig(config); + YGNodeStyleSetPositionType(root_child0_child0_child0, YGPositionTypeAbsolute); + YGNodeStyleSetWidthPercent(root_child0_child0_child0, 41); + YGNodeStyleSetHeightPercent(root_child0_child0_child0, 61); + YGNodeInsertChild(root_child0_child0, root_child0_child0_child0, 0); + YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR); + + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetWidth(root)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetHeight(root)); + + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetWidth(root_child0)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetHeight(root_child0)); + + ASSERT_FLOAT_EQ(11, YGNodeLayoutGetLeft(root_child0_child0)); + ASSERT_FLOAT_EQ(13, YGNodeLayoutGetTop(root_child0_child0)); + ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0_child0)); + ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0_child0)); + + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(160, YGNodeLayoutGetWidth(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(239, YGNodeLayoutGetHeight(root_child0_child0_child0)); + + YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL); + + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetWidth(root)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetHeight(root)); + + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetWidth(root_child0)); + ASSERT_FLOAT_EQ(400, YGNodeLayoutGetHeight(root_child0)); + + ASSERT_FLOAT_EQ(292, YGNodeLayoutGetLeft(root_child0_child0)); + ASSERT_FLOAT_EQ(13, YGNodeLayoutGetTop(root_child0_child0)); + ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0_child0)); + ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0_child0)); + + ASSERT_FLOAT_EQ(-60, YGNodeLayoutGetLeft(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(160, YGNodeLayoutGetWidth(root_child0_child0_child0)); + ASSERT_FLOAT_EQ(239, YGNodeLayoutGetHeight(root_child0_child0_child0)); + + YGNodeFreeRecursive(root); + + YGConfigFree(config); +} diff --git a/yoga/algorithm/AbsoluteLayout.cpp b/yoga/algorithm/AbsoluteLayout.cpp index cbccf07b9f..d421db5487 100644 --- a/yoga/algorithm/AbsoluteLayout.cpp +++ b/yoga/algorithm/AbsoluteLayout.cpp @@ -25,7 +25,8 @@ static void justifyAbsoluteChild( case Justify::SpaceBetween: child->setLayoutPosition( child->getFlexStartMargin(mainAxis, direction, containingBlockWidth) + - parent->getFlexStartBorder(mainAxis, direction), + parent->getLayout().border(flexStartEdge(mainAxis)) + + parent->getLayout().padding(flexStartEdge(mainAxis)), flexStartEdge(mainAxis)); break; case Justify::FlexEnd: @@ -458,8 +459,10 @@ void layoutAbsoluteDescendants( containingNode, currentNode, child, - containingNode->getLayout().measuredDimension(Dimension::Width), - containingNode->getLayout().measuredDimension(Dimension::Height), + containingNode->getLayout().measuredDimension(Dimension::Width) - + containingNode->getBorderForAxis(FlexDirection::Row), + containingNode->getLayout().measuredDimension(Dimension::Height) - + containingNode->getBorderForAxis(FlexDirection::Column), widthSizingMode, currentNodeDirection, layoutMarkerData, diff --git a/yoga/node/Node.cpp b/yoga/node/Node.cpp index f26a588e17..36eefbb525 100644 --- a/yoga/node/Node.cpp +++ b/yoga/node/Node.cpp @@ -377,6 +377,11 @@ float Node::getFlexEndPaddingAndBorder( getFlexEndBorder(axis, direction); } +float Node::getBorderForAxis(FlexDirection axis) const { + return getInlineStartBorder(axis, Direction::LTR) + + getInlineEndBorder(axis, Direction::LTR); +} + float Node::getMarginForAxis(FlexDirection axis, float widthSize) const { // The total margin for a given axis does not depend on the direction // so hardcoding LTR here to avoid piping direction to this function diff --git a/yoga/node/Node.h b/yoga/node/Node.h index aa60b3d830..bbde5eac36 100644 --- a/yoga/node/Node.h +++ b/yoga/node/Node.h @@ -287,6 +287,7 @@ class YG_EXPORT Node : public ::YGNode { FlexDirection axis, Direction direction, float widthSize) const; + float getBorderForAxis(FlexDirection axis) const; float getMarginForAxis(FlexDirection axis, float widthSize) const; float getGapForAxis(FlexDirection axis) const; // Setters