fix bug with negative margin inside of a justifyContent: center container

src/Layout.js

@@ -362,74 +362,74 @@ var computeLayout = (function() {
     var/*float*/ leadingMainDim = 0;
     var/*float*/ betweenMainDim = 0;
 
-    // If the dimensions of the current node is defined by its children, they
+    var/*float*/ definedMainDim = 0;
-    // are all going to be packed together and we don't need to compute
-    // anything.
     if (!isUndefined(node.layout[dim[mainAxis]])) {
-      // The remaining available space that needs to be allocated
+      definedMainDim = node.layout[dim[mainAxis]];
-      var/*float*/ remainingMainDim = node.layout[dim[mainAxis]] -
+    }
-        getPaddingAndBorderAxis(node, mainAxis) -
-        mainContentDim;
 
-      // If there are flexible children in the mix, they are going to fill the
+    // The remaining available space that needs to be allocated
-      // remaining space
+    var/*float*/ remainingMainDim = definedMainDim -
-      if (flexibleChildrenCount != 0) {
+      getPaddingAndBorderAxis(node, mainAxis) -
-        var/*float*/ flexibleMainDim = remainingMainDim / totalFlexible;
+      mainContentDim;
 
-        // The non flexible children can overflow the container, in this case
+    // If there are flexible children in the mix, they are going to fill the
-        // we should just assume that there is no space available.
+    // remaining space
-        if (flexibleMainDim < 0) {
+    if (flexibleChildrenCount != 0) {
-          flexibleMainDim = 0;
+      var/*float*/ flexibleMainDim = remainingMainDim / totalFlexible;
-        }
-        // We iterate over the full array and only apply the action on flexible
-        // children. This is faster than actually allocating a new array that
-        // contains only flexible children.
-        for (var/*int*/ i = 0; i < node.children.length; ++i) {
-          var/*css_node_t**/ child = node.children[i];
-          if (isFlex(child)) {
-            // At this point we know the final size of the element in the main
-            // dimension
-            child.layout[dim[mainAxis]] = flexibleMainDim * getFlex(child) +
-              getPaddingAndBorderAxis(child, mainAxis);
 
-            var/*float*/ maxWidth = CSS_UNDEFINED;
+      // The non flexible children can overflow the container, in this case
-            if (mainAxis === CSS_FLEX_DIRECTION_ROW) {
+      // we should just assume that there is no space available.
-              // do nothing
+      if (flexibleMainDim < 0) {
-            } else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
+        flexibleMainDim = 0;
-              maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
+      }
-                getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+      // We iterate over the full array and only apply the action on flexible
-            } else {
+      // children. This is faster than actually allocating a new array that
-              maxWidth = parentMaxWidth -
+      // contains only flexible children.
-                getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
+      for (var/*int*/ i = 0; i < node.children.length; ++i) {
-                getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+        var/*css_node_t**/ child = node.children[i];
-            }
+        if (isFlex(child)) {
+          // At this point we know the final size of the element in the main
+          // dimension
+          child.layout[dim[mainAxis]] = flexibleMainDim * getFlex(child) +
+            getPaddingAndBorderAxis(child, mainAxis);
 
-            // And we recursively call the layout algorithm for this child
+          var/*float*/ maxWidth = CSS_UNDEFINED;
-            layoutNode(child, maxWidth);
+          if (mainAxis === CSS_FLEX_DIRECTION_ROW) {
+            // do nothing
+          } else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
+            maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
+              getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+          } else {
+            maxWidth = parentMaxWidth -
+              getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
+              getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
           }
-        }
 
-      // We use justifyContent to figure out how to allocate the remaining
+          // And we recursively call the layout algorithm for this child
-      // space available
+          layoutNode(child, maxWidth);
-      } else {
-        var/*css_justify_t*/ justifyContent = getJustifyContent(node);
-        if (justifyContent === CSS_JUSTIFY_FLEX_START) {
-          // Do nothing
-        } else if (justifyContent === CSS_JUSTIFY_CENTER) {
-          leadingMainDim = remainingMainDim / 2;
-        } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
-          leadingMainDim = remainingMainDim;
-        } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
-          remainingMainDim = fmaxf(remainingMainDim, 0);
-          betweenMainDim = remainingMainDim /
-            (flexibleChildrenCount + nonFlexibleChildrenCount - 1);
-        } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
-          // Space on the edges is half of the space between elements
-          betweenMainDim = remainingMainDim /
-            (flexibleChildrenCount + nonFlexibleChildrenCount);
-          leadingMainDim = betweenMainDim / 2;
         }
       }
+
+    // We use justifyContent to figure out how to allocate the remaining
+    // space available
+    } else {
+      var/*css_justify_t*/ justifyContent = getJustifyContent(node);
+      if (justifyContent === CSS_JUSTIFY_FLEX_START) {
+        // Do nothing
+      } else if (justifyContent === CSS_JUSTIFY_CENTER) {
+        leadingMainDim = remainingMainDim / 2;
+      } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
+        leadingMainDim = remainingMainDim;
+      } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
+        remainingMainDim = fmaxf(remainingMainDim, 0);
+        betweenMainDim = remainingMainDim /
+          (flexibleChildrenCount + nonFlexibleChildrenCount - 1);
+      } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
+        // Space on the edges is half of the space between elements
+        betweenMainDim = remainingMainDim /
+          (flexibleChildrenCount + nonFlexibleChildrenCount);
+        leadingMainDim = betweenMainDim / 2;
+      }
     }
 
     // <Loop C> Position elements in the main axis and compute dimensions

src/__tests__/Layout-test.js

@@ -1055,6 +1055,17 @@ describe('Layout', function() {
     );
   });
 
+  it('should layout negative margin top and center justify content', function() {
+    testLayout(
+      {style: {justifyContent: 'center'}, children: [
+        {style: {marginTop: -6}}
+      ]},
+      {width: 0, height: 0, top: 0, left: 0, children: [
+        {width: 0, height: 0, top: -3, left: 0}
+      ]}
+    );
+  });
+
   xit('should layout flex-wrap', function() {
     testLayout(
       {style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [