Skip to content

Commit 7863b04

Browse files
Joe Vilchesfacebook-github-bot
authored andcommitted
Fix issue where percentages were off of the border box, not padding box (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
1 parent 6d7affd commit 7863b04

File tree

3 files changed

+12
-3
lines changed

3 files changed

+12
-3
lines changed

packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ static void justifyAbsoluteChild(
2525
case Justify::SpaceBetween:
2626
child->setLayoutPosition(
2727
child->getFlexStartMargin(mainAxis, direction, containingBlockWidth) +
28-
parent->getFlexStartBorder(mainAxis, direction),
28+
parent->getLayout().border(flexStartEdge(mainAxis)) +
29+
parent->getLayout().padding(flexStartEdge(mainAxis)),
2930
flexStartEdge(mainAxis));
3031
break;
3132
case Justify::FlexEnd:
@@ -458,8 +459,10 @@ void layoutAbsoluteDescendants(
458459
containingNode,
459460
currentNode,
460461
child,
461-
containingNode->getLayout().measuredDimension(Dimension::Width),
462-
containingNode->getLayout().measuredDimension(Dimension::Height),
462+
containingNode->getLayout().measuredDimension(Dimension::Width) -
463+
containingNode->getBorderForAxis(FlexDirection::Row),
464+
containingNode->getLayout().measuredDimension(Dimension::Height) -
465+
containingNode->getBorderForAxis(FlexDirection::Column),
463466
widthSizingMode,
464467
currentNodeDirection,
465468
layoutMarkerData,

packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,11 @@ float Node::getFlexEndPaddingAndBorder(
377377
getFlexEndBorder(axis, direction);
378378
}
379379

380+
float Node::getBorderForAxis(FlexDirection axis) const {
381+
return getInlineStartBorder(axis, Direction::LTR) +
382+
getInlineEndBorder(axis, Direction::LTR);
383+
}
384+
380385
float Node::getMarginForAxis(FlexDirection axis, float widthSize) const {
381386
// The total margin for a given axis does not depend on the direction
382387
// so hardcoding LTR here to avoid piping direction to this function

packages/react-native/ReactCommon/yoga/yoga/node/Node.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ class YG_EXPORT Node : public ::YGNode {
287287
FlexDirection axis,
288288
Direction direction,
289289
float widthSize) const;
290+
float getBorderForAxis(FlexDirection axis) const;
290291
float getMarginForAxis(FlexDirection axis, float widthSize) const;
291292
float getGapForAxis(FlexDirection axis) const;
292293
// Setters

0 commit comments

Comments
 (0)