From b0a0007d6e94cd8211881f4fbd1061c15f3ecd7f Mon Sep 17 00:00:00 2001
From: Sidharth Guglani <sidharthguglani@fb.com>
Date: Wed, 13 Nov 2019 05:27:00 -0800
Subject: [PATCH] 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
---
 yoga/Yoga.cpp | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/yoga/Yoga.cpp b/yoga/Yoga.cpp
index 016ab0ac..04d199a3 100644
--- a/yoga/Yoga.cpp
+++ b/yoga/Yoga.cpp
@@ -1868,15 +1868,17 @@ static float YGNodeCalculateAvailableInnerDim(
     const YGNodeConstRef node,
     YGFlexDirection axis,
     float availableDim,
-    float ownerDim) {
+    float ownerDim,
+    float ownerDimForMarginPadding) {
   YGFlexDirection direction =
       YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn;
   YGDimension dimension =
       YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight;
 
-  const float margin = node->getMarginForAxis(direction, ownerDim).unwrap();
+  const float margin =
+      node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap();
   const float paddingAndBorder =
-      YGNodePaddingAndBorderForAxis(node, direction, ownerDim);
+      YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding);
 
   float availableInnerDim = availableDim - margin - paddingAndBorder;
   // 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
 
   float availableInnerWidth = YGNodeCalculateAvailableInnerDim(
-      node, YGFlexDirectionRow, availableWidth, ownerWidth);
+      node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth);
   float availableInnerHeight = YGNodeCalculateAvailableInnerDim(
-      node, YGFlexDirectionColumn, availableHeight, ownerHeight);
+      node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth);
 
   float availableInnerMainDim =
       isMainAxisRow ? availableInnerWidth : availableInnerHeight;