using width for calculating margin top percent

Summary:
In Yoga, margin is not calculated correctly when defined in terms of percentage at one place.
According to CSS docs , margin percentage should be calculated according to width of container's block in case of horizontal writing mode. (https://fburl.com/5imus0it)
We were using height of container causing some issues in both android and iOS.

## Changelog:

[Yoga] [Fixed] - margin if defined in percentage should use container's width in horizontal writing mode

Reviewed By: alickbass

Differential Revision: D18395285

fbshipit-source-id: 87ebd013e3cba36da45f6548e4dff1bce69cce9b
This commit is contained in:
Sidharth Guglani
2019-11-13 05:27:00 -08:00
committed by Facebook Github Bot
parent 73a4a6d29f
commit b0a0007d6e

View File

@@ -1868,15 +1868,17 @@ static float YGNodeCalculateAvailableInnerDim(
const YGNodeConstRef node, const YGNodeConstRef node,
YGFlexDirection axis, YGFlexDirection axis,
float availableDim, float availableDim,
float ownerDim) { float ownerDim,
float ownerDimForMarginPadding) {
YGFlexDirection direction = YGFlexDirection direction =
YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn; YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn;
YGDimension dimension = YGDimension dimension =
YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight; YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight;
const float margin = node->getMarginForAxis(direction, ownerDim).unwrap(); const float margin =
node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap();
const float paddingAndBorder = const float paddingAndBorder =
YGNodePaddingAndBorderForAxis(node, direction, ownerDim); YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding);
float availableInnerDim = availableDim - margin - paddingAndBorder; float availableInnerDim = availableDim - margin - paddingAndBorder;
// Max dimension overrides predefined dimension value; Min dimension in turn // Max dimension overrides predefined dimension value; Min dimension in turn
@@ -2894,9 +2896,9 @@ static void YGNodelayoutImpl(
// STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS // STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS
float availableInnerWidth = YGNodeCalculateAvailableInnerDim( float availableInnerWidth = YGNodeCalculateAvailableInnerDim(
node, YGFlexDirectionRow, availableWidth, ownerWidth); node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth);
float availableInnerHeight = YGNodeCalculateAvailableInnerDim( float availableInnerHeight = YGNodeCalculateAvailableInnerDim(
node, YGFlexDirectionColumn, availableHeight, ownerHeight); node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth);
float availableInnerMainDim = float availableInnerMainDim =
isMainAxisRow ? availableInnerWidth : availableInnerHeight; isMainAxisRow ? availableInnerWidth : availableInnerHeight;