Skip to content

Commit

Permalink
Fix issue where percentages were off of the border box, not padding b…
Browse files Browse the repository at this point in the history
…ox (facebook#41686)

Summary:
X-link: facebook/yoga#1485

Pull Request resolved: facebook#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: fc595cd3f2d525e32b6ccea80d3c99b582d7b922
  • Loading branch information
Joe Vilches authored and facebook-github-bot committed Dec 5, 2023
1 parent 6d7affd commit 7863b04
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/ReactCommon/yoga/yoga/node/Node.h
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 7863b04

Please sign in to comment.