css-layout - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/css-layout.js

@@ -42,3 +42,3 @@ // UMD (Universal Module Definition)
 
-  // var CSS_JUSTIFY_FLEX_START = 'flex-start';
+  var CSS_JUSTIFY_FLEX_START = 'flex-start';
   var CSS_JUSTIFY_CENTER = 'center';
@@ -310,10 +310,6 @@ var CSS_JUSTIFY_FLEX_END = 'flex-end';
 
-  function getFlex(node) {
-    return node.style.flex;
-  }
-
   function isFlex(node) {
     return (
       getPositionType(node) === CSS_POSITION_RELATIVE &&
-      getFlex(node) > 0
+      node.style.flex > 0
     );
@@ -415,5 +411,5 @@ }
     var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
-    var/*css_flex_direction_t*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
-    var/*css_flex_direction_t*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
-    var/*css_flex_direction_t*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
 
@@ -438,7 +434,14 @@ // Handle width and height style attributes
 
+    // Inline immutable values from the target node to avoid excessive method
+    // invocations during the layout calculation.
+    var/*int*/ childCount = node.children.length;
+    var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
+
     if (isMeasureDefined(node)) {
+      var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
+
       var/*float*/ width = CSS_UNDEFINED;
       if (isDimDefined(node, resolvedRowAxis)) {
         width = node.style.width;
-      } else if (!isUndefined(node.layout[dim[resolvedRowAxis]])) {
+      } else if (isResolvedRowDimDefined) {
         width = node.layout[dim[resolvedRowAxis]];
@@ -449,3 +452,3 @@ } else {
       }
-      width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
+      width -= paddingAndBorderAxisResolvedRow;
 
@@ -455,4 +458,3 @@ // We only need to give a dimension for the text if we haven't got any
       // the element is flexible.
-      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
-        isUndefined(node.layout[dim[resolvedRowAxis]]);
+      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
       var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
@@ -470,3 +472,3 @@ isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
           node.layout.width = measureDim.width +
-            getPaddingAndBorderAxis(node, resolvedRowAxis);
+            paddingAndBorderAxisResolvedRow;
         }
@@ -478,3 +480,3 @@ if (isColumnUndefined) {
       }
-      if (node.children.length === 0) {
+      if (childCount === 0) {
         return;
@@ -484,50 +486,26 @@ }
 
+    var/*bool*/ isNodeFlexWrap = isFlexWrap(node);
+
+    var/*css_justify_t*/ justifyContent = getJustifyContent(node);
+
+    var/*float*/ leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
+    var/*float*/ leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
+    var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
+    var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
+
+    var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]);
+    var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]);
+    var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
+
     var/*int*/ i;
     var/*int*/ ii;
     var/*css_node_t**/ child;
-    var/*css_flex_direction_t*/ axis;
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ axis;
 
-    // Pre-fill some dimensions straight from the parent
-    for (i = 0; i < node.children.length; ++i) {
-      child = node.children[i];
-      // Pre-fill cross axis dimensions when the child is using stretch before
-      // we call the recursive layout pass
-      if (getAlignItem(node, child) === CSS_ALIGN_STRETCH &&
-          getPositionType(child) === CSS_POSITION_RELATIVE &&
-          !isUndefined(node.layout[dim[crossAxis]]) &&
-          !isDimDefined(child, crossAxis)) {
-        child.layout[dim[crossAxis]] = fmaxf(
-          boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
-            getPaddingAndBorderAxis(node, crossAxis) -
-            getMarginAxis(child, crossAxis)),
-          // You never want to go smaller than padding
-          getPaddingAndBorderAxis(child, crossAxis)
-        );
-      } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
-        // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
-        // left and right or top and bottom).
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (!isUndefined(node.layout[dim[axis]]) &&
-              !isDimDefined(child, axis) &&
-              isPosDefined(child, leading[axis]) &&
-              isPosDefined(child, trailing[axis])) {
-            child.layout[dim[axis]] = fmaxf(
-              boundAxis(child, axis, node.layout[dim[axis]] -
-                getPaddingAndBorderAxis(node, axis) -
-                getMarginAxis(child, axis) -
-                getPosition(child, leading[axis]) -
-                getPosition(child, trailing[axis])),
-              // You never want to go smaller than padding
-              getPaddingAndBorderAxis(child, axis)
-            );
-          }
-        }
-      }
-    }
+    var/*css_node_t**/ firstAbsoluteChild = null;
+    var/*css_node_t**/ currentAbsoluteChild = null;
 
     var/*float*/ definedMainDim = CSS_UNDEFINED;
-    if (!isUndefined(node.layout[dim[mainAxis]])) {
-      definedMainDim = node.layout[dim[mainAxis]] -
-          getPaddingAndBorderAxis(node, mainAxis);
+    if (isMainDimDefined) {
+      definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain;
     }
@@ -544,3 +522,3 @@
     var/*int*/ linesCount = 0;
-    while (endLine < node.children.length) {
+    while (endLine < childCount) {
       // <Loop A> Layout non flexible children and count children by type
@@ -560,5 +538,78 @@
 
+      // Use the line loop to position children in the main axis for as long
+      // as they are using a simple stacking behaviour. Children that are
+      // immediately stacked in the initial loop will not be touched again
+      // in <Loop C>.
+      var/*bool*/ isSimpleStackMain =
+          (isMainDimDefined && justifyContent == CSS_JUSTIFY_FLEX_START) ||
+          (!isMainDimDefined && justifyContent != CSS_JUSTIFY_CENTER);
+      var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine);
+
+      // Use the initial line loop to position children in the cross axis for
+      // as long as they are relatively positioned with alignment STRETCH or
+      // FLEX_START. Children that are immediately stacked in the initial loop
+      // will not be touched again in <Loop D>.
+      var/*bool*/ isSimpleStackCross = true;
+      var/*int*/ firstComplexCross = childCount;
+
+      var/*css_node_t**/ firstFlexChild = null;
+      var/*css_node_t**/ currentFlexChild = null;
+
+      var/*float*/ mainDim = leadingPaddingAndBorderMain;
+      var/*float*/ crossDim = 0;
+
       var/*float*/ maxWidth;
-      for (i = startLine; i < node.children.length; ++i) {
+      for (i = startLine; i < childCount; ++i) {
         child = node.children[i];
+        child.lineIndex = linesCount;
+
+        child.nextAbsoluteChild = null;
+        child.nextFlexChild = null;
+
+        var/*css_align_t*/ alignItem = getAlignItem(node, child);
+
+        // Pre-fill cross axis dimensions when the child is using stretch before
+        // we call the recursive layout pass
+        if (alignItem === CSS_ALIGN_STRETCH &&
+            getPositionType(child) === CSS_POSITION_RELATIVE &&
+            isCrossDimDefined &&
+            !isDimDefined(child, crossAxis)) {
+          child.layout[dim[crossAxis]] = fmaxf(
+            boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
+              paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
+            // You never want to go smaller than padding
+            getPaddingAndBorderAxis(child, crossAxis)
+          );
+        } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
+          // Store a private linked list of absolutely positioned children
+          // so that we can efficiently traverse them later.
+          if (firstAbsoluteChild === null) {
+            firstAbsoluteChild = child;
+          }
+          if (currentAbsoluteChild !== null) {
+            currentAbsoluteChild.nextAbsoluteChild = child;
+          }
+          currentAbsoluteChild = child;
+
+          // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
+          // left and right or top and bottom).
+          for (ii = 0; ii < 2; ii++) {
+            axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
+            if (!isUndefined(node.layout[dim[axis]]) &&
+                !isDimDefined(child, axis) &&
+                isPosDefined(child, leading[axis]) &&
+                isPosDefined(child, trailing[axis])) {
+              child.layout[dim[axis]] = fmaxf(
+                boundAxis(child, axis, node.layout[dim[axis]] -
+                  getPaddingAndBorderAxis(node, axis) -
+                  getMarginAxis(child, axis) -
+                  getPosition(child, leading[axis]) -
+                  getPosition(child, trailing[axis])),
+                // You never want to go smaller than padding
+                getPaddingAndBorderAxis(child, axis)
+              );
+            }
+          }
+        }
+
         var/*float*/ nextContentDim = 0;
@@ -568,6 +619,16 @@
         // dimension for the node.
-        if (!isUndefined(node.layout[dim[mainAxis]]) && isFlex(child)) {
+        if (isMainDimDefined && isFlex(child)) {
           flexibleChildrenCount++;
-          totalFlexible += getFlex(child);
+          totalFlexible += child.style.flex;
 
+          // Store a private linked list of flexible children so that we can
+          // efficiently traverse them later.
+          if (firstFlexChild === null) {
+            firstFlexChild = child;
+          }
+          if (currentFlexChild !== null) {
+            currentFlexChild.nextFlexChild = child;
+          }
+          currentFlexChild = child;
+
           // Even if we don't know its exact size yet, we already know the padding,
@@ -582,10 +643,10 @@ // border and margin. We'll use this partial information, which represents
           maxWidth = CSS_UNDEFINED;
-          if (!isRowDirection(mainAxis)) {
-            maxWidth = parentMaxWidth -
-              getMarginAxis(node, resolvedRowAxis) -
-              getPaddingAndBorderAxis(node, resolvedRowAxis);
-
+          if (!isMainRowDirection) {
             if (isDimDefined(node, resolvedRowAxis)) {
               maxWidth = node.layout[dim[resolvedRowAxis]] -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
+                paddingAndBorderAxisResolvedRow;
+            } else {
+              maxWidth = parentMaxWidth -
+                getMarginAxis(node, resolvedRowAxis) -
+                paddingAndBorderAxisResolvedRow;
             }
@@ -609,4 +670,4 @@ }
         // The element we are about to add would make us go to the next line
-        if (isFlexWrap(node) &&
-            !isUndefined(node.layout[dim[mainAxis]]) &&
+        if (isNodeFlexWrap &&
+            isMainDimDefined &&
             mainContentDim + nextContentDim > definedMainDim &&
@@ -620,2 +681,40 @@ // If there's only one element, then it's bigger than the content
         }
+
+        // Disable simple stacking in the main axis for the current line as
+        // we found a non-trivial child. The remaining children will be laid out
+        // in <Loop C>.
+        if (isSimpleStackMain &&
+            (getPositionType(child) != CSS_POSITION_RELATIVE || isFlex(child))) {
+          isSimpleStackMain = false;
+          firstComplexMain = i;
+        }
+
+        // Disable simple stacking in the cross axis for the current line as
+        // we found a non-trivial child. The remaining children will be laid out
+        // in <Loop D>.
+        if (isSimpleStackCross &&
+            (getPositionType(child) != CSS_POSITION_RELATIVE ||
+                (alignItem !== CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
+                isUndefined(child.layout[dim[crossAxis]]))) {
+          isSimpleStackCross = false;
+          firstComplexCross = i;
+        }
+
+        if (isSimpleStackMain) {
+          child.layout[pos[mainAxis]] += mainDim;
+          if (isMainDimDefined) {
+            setTrailingPosition(node, child, mainAxis);
+          }
+
+          mainDim += getDimWithMargin(child, mainAxis);
+          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+        }
+
+        if (isSimpleStackCross) {
+          child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
+          if (isCrossDimDefined) {
+            setTrailingPosition(node, child, crossAxis);
+          }
+        }
+
         alreadyComputedNextLayout = 0;
@@ -636,3 +735,3 @@ mainContentDim += nextContentDim;
       var/*float*/ remainingMainDim = 0;
-      if (!isUndefined(node.layout[dim[mainAxis]])) {
+      if (isMainDimDefined) {
         remainingMainDim = definedMainDim - mainContentDim;
@@ -650,17 +749,16 @@ } else {
 
-        // Iterate over every child in the axis. If the flex share of remaining
-        // space doesn't meet min/max bounds, remove this child from flex
-        // calculations.
-        for (i = startLine; i < endLine; ++i) {
-          child = node.children[i];
-          if (isFlex(child)) {
-            baseMainDim = flexibleMainDim * getFlex(child) +
-                getPaddingAndBorderAxis(child, mainAxis);
-            boundMainDim = boundAxis(child, mainAxis, baseMainDim);
+        // If the flex share of remaining space doesn't meet min/max bounds,
+        // remove this child from flex calculations.
+        currentFlexChild = firstFlexChild;
+        while (currentFlexChild !== null) {
+          baseMainDim = flexibleMainDim * currentFlexChild.style.flex +
+              getPaddingAndBorderAxis(currentFlexChild, mainAxis);
+          boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
 
-            if (baseMainDim !== boundMainDim) {
-              remainingMainDim -= boundMainDim;
-              totalFlexible -= getFlex(child);
-            }
+          if (baseMainDim !== boundMainDim) {
+            remainingMainDim -= boundMainDim;
+            totalFlexible -= currentFlexChild.style.flex;
           }
+
+          currentFlexChild = currentFlexChild.nextFlexChild;
         }
@@ -674,27 +772,28 @@ 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 (i = startLine; i < endLine; ++i) {
-          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]] = boundAxis(child, mainAxis,
-              flexibleMainDim * getFlex(child) + getPaddingAndBorderAxis(child, mainAxis)
-            );
 
-            maxWidth = CSS_UNDEFINED;
-            if (isDimDefined(node, resolvedRowAxis)) {
-              maxWidth = node.layout[dim[resolvedRowAxis]] -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
-            } else if (!isRowDirection(mainAxis)) {
-              maxWidth = parentMaxWidth -
-                getMarginAxis(node, resolvedRowAxis) -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
-            }
+        currentFlexChild = firstFlexChild;
+        while (currentFlexChild !== null) {
+          // At this point we know the final size of the element in the main
+          // dimension
+          currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
+            flexibleMainDim * currentFlexChild.style.flex +
+                getPaddingAndBorderAxis(currentFlexChild, mainAxis)
+          );
 
-            // And we recursively call the layout algorithm for this child
-            layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
+          maxWidth = CSS_UNDEFINED;
+          if (isDimDefined(node, resolvedRowAxis)) {
+            maxWidth = node.layout[dim[resolvedRowAxis]] -
+              paddingAndBorderAxisResolvedRow;
+          } else if (!isMainRowDirection) {
+            maxWidth = parentMaxWidth -
+              getMarginAxis(node, resolvedRowAxis) -
+              paddingAndBorderAxisResolvedRow;
           }
+
+          // And we recursively call the layout algorithm for this child
+          layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
+
+          child = currentFlexChild;
+          currentFlexChild = currentFlexChild.nextFlexChild;
+          child.nextFlexChild = null;
         }
@@ -704,4 +803,3 @@
       // space available
-      } else {
-        var/*css_justify_t*/ justifyContent = getJustifyContent(node);
+      } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) {
         if (justifyContent === CSS_JUSTIFY_CENTER) {
@@ -733,9 +831,6 @@ leadingMainDim = remainingMainDim / 2;
       // container!
-      var/*float*/ crossDim = 0;
-      var/*float*/ mainDim = leadingMainDim +
-        getLeadingPaddingAndBorder(node, mainAxis);
+      mainDim += leadingMainDim;
 
-      for (i = startLine; i < endLine; ++i) {
+      for (i = firstComplexMain; i < endLine; ++i) {
         child = node.children[i];
-        child.lineIndex = linesCount;
 
@@ -756,17 +851,17 @@ if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
           // Define the trailing position accordingly.
-          if (!isUndefined(node.layout[dim[mainAxis]])) {
+          if (isMainDimDefined) {
             setTrailingPosition(node, child, mainAxis);
           }
-        }
 
-        // Now that we placed the element, we need to update the variables
-        // We only need to do that for relative elements. Absolute elements
-        // do not take part in that phase.
-        if (getPositionType(child) === CSS_POSITION_RELATIVE) {
-          // The main dimension is the sum of all the elements dimension plus
-          // the spacing.
-          mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
-          // The cross dimension is the max of the elements dimension since there
-          // can only be one element in that cross dimension.
-          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+          // Now that we placed the element, we need to update the variables
+          // We only need to do that for relative elements. Absolute elements
+          // do not take part in that phase.
+          if (getPositionType(child) === CSS_POSITION_RELATIVE) {
+            // The main dimension is the sum of all the elements dimension plus
+            // the spacing.
+            mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
+            // The cross dimension is the max of the elements dimension since there
+            // can only be one element in that cross dimension.
+            crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+          }
         }
@@ -776,3 +871,3 @@ }
       var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]];
-      if (isUndefined(node.layout[dim[crossAxis]])) {
+      if (!isCrossDimDefined) {
         containerCrossAxis = fmaxf(
@@ -782,4 +877,4 @@ // For the cross dim, we add both sides at the end because the value
           // can mess this computation otherwise
-          boundAxis(node, crossAxis, crossDim + getPaddingAndBorderAxis(node, crossAxis)),
-          getPaddingAndBorderAxis(node, crossAxis)
+          boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
+          paddingAndBorderAxisCross
         );
@@ -789,3 +884,3 @@ }
       // <Loop D> Position elements in the cross axis
-      for (i = startLine; i < endLine; ++i) {
+      for (i = firstComplexCross; i < endLine; ++i) {
         child = node.children[i];
@@ -803,3 +898,3 @@
         } else {
-          var/*float*/ leadingCrossDim = getLeadingPaddingAndBorder(node, crossAxis);
+          var/*float*/ leadingCrossDim = leadingPaddingAndBorderCross;
 
@@ -813,7 +908,6 @@ // For a relative children, we're either using alignItems (parent) or
               // previously.
-              if (!isDimDefined(child, crossAxis)) {
+              if (isUndefined(child.layout[dim[crossAxis]])) {
                 child.layout[dim[crossAxis]] = fmaxf(
                   boundAxis(child, crossAxis, containerCrossAxis -
-                    getPaddingAndBorderAxis(node, crossAxis) -
-                    getMarginAxis(child, crossAxis)),
+                    paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
                   // You never want to go smaller than padding
@@ -827,4 +921,3 @@ getPaddingAndBorderAxis(child, crossAxis)
               var/*float*/ remainingCrossDim = containerCrossAxis -
-                getPaddingAndBorderAxis(node, crossAxis) -
-                getDimWithMargin(child, crossAxis);
+                paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
 
@@ -843,3 +936,3 @@ if (alignItem === CSS_ALIGN_CENTER) {
           // Define the trailing position accordingly.
-          if (!isUndefined(node.layout[dim[crossAxis]])) {
+          if (isCrossDimDefined) {
             setTrailingPosition(node, child, crossAxis);
@@ -869,10 +962,9 @@ }
     //
-    if (linesCount > 1 &&
-        !isUndefined(node.layout[dim[crossAxis]])) {
+    if (linesCount > 1 && isCrossDimDefined) {
       var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
-          getPaddingAndBorderAxis(node, crossAxis);
+          paddingAndBorderAxisCross;
       var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
 
       var/*float*/ crossDimLead = 0;
-      var/*float*/ currentLead = getLeadingPaddingAndBorder(node, crossAxis);
+      var/*float*/ currentLead = leadingPaddingAndBorderCross;
 
@@ -896,3 +988,3 @@ var/*css_align_t*/ alignContent = getAlignContent(node);
         var/*float*/ lineHeight = 0;
-        for (ii = startIndex; ii < node.children.length; ++ii) {
+        for (ii = startIndex; ii < childCount; ++ii) {
           child = node.children[ii];
@@ -945,3 +1037,3 @@ if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
     // by the container, then we set it via the children.
-    if (isUndefined(node.layout[dim[mainAxis]])) {
+    if (!isMainDimDefined) {
       node.layout[dim[mainAxis]] = fmaxf(
@@ -952,9 +1044,12 @@ // We're missing the last padding at this point to get the final
         // We can never assign a width smaller than the padding and borders
-        getPaddingAndBorderAxis(node, mainAxis)
+        paddingAndBorderAxisMain
       );
 
-      needsMainTrailingPos = true;
+      if (mainAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
+          mainAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+        needsMainTrailingPos = true;
+      }
     }
 
-    if (isUndefined(node.layout[dim[crossAxis]])) {
+    if (!isCrossDimDefined) {
       node.layout[dim[crossAxis]] = fmaxf(
@@ -964,7 +1059,10 @@ // For the cross dim, we add both sides at the end because the value
         // can mess this computation otherwise
-        boundAxis(node, crossAxis, linesCrossDim + getPaddingAndBorderAxis(node, crossAxis)),
-        getPaddingAndBorderAxis(node, crossAxis)
+        boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
+        paddingAndBorderAxisCross
       );
 
-      needsCrossTrailingPos = true;
+      if (crossAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
+          crossAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+        needsCrossTrailingPos = true;
+      }
     }
@@ -974,3 +1072,3 @@
     if (needsMainTrailingPos || needsCrossTrailingPos) {
-      for (i = 0; i < node.children.length; ++i) {
+      for (i = 0; i < childCount; ++i) {
         child = node.children[i];
@@ -989,36 +1087,37 @@
     // <Loop G> Calculate dimensions for absolutely positioned elements
-    for (i = 0; i < node.children.length; ++i) {
-      child = node.children[i];
-      if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
-        // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
-        // left and right or top and bottom).
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (!isUndefined(node.layout[dim[axis]]) &&
-              !isDimDefined(child, axis) &&
-              isPosDefined(child, leading[axis]) &&
-              isPosDefined(child, trailing[axis])) {
-            child.layout[dim[axis]] = fmaxf(
-              boundAxis(child, axis, node.layout[dim[axis]] -
-                getBorderAxis(node, axis) -
-                getMarginAxis(child, axis) -
-                getPosition(child, leading[axis]) -
-                getPosition(child, trailing[axis])
-              ),
-              // You never want to go smaller than padding
-              getPaddingAndBorderAxis(child, axis)
-            );
-          }
+    currentAbsoluteChild = firstAbsoluteChild;
+    while (currentAbsoluteChild !== null) {
+      // Pre-fill dimensions when using absolute position and both offsets for
+      // the axis are defined (either both left and right or top and bottom).
+      for (ii = 0; ii < 2; ii++) {
+        axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
+
+        if (!isUndefined(node.layout[dim[axis]]) &&
+            !isDimDefined(currentAbsoluteChild, axis) &&
+            isPosDefined(currentAbsoluteChild, leading[axis]) &&
+            isPosDefined(currentAbsoluteChild, trailing[axis])) {
+          currentAbsoluteChild.layout[dim[axis]] = fmaxf(
+            boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] -
+              getBorderAxis(node, axis) -
+              getMarginAxis(currentAbsoluteChild, axis) -
+              getPosition(currentAbsoluteChild, leading[axis]) -
+              getPosition(currentAbsoluteChild, trailing[axis])
+            ),
+            // You never want to go smaller than padding
+            getPaddingAndBorderAxis(currentAbsoluteChild, axis)
+          );
         }
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (isPosDefined(child, trailing[axis]) &&
-              !isPosDefined(child, leading[axis])) {
-            child.layout[leading[axis]] =
-              node.layout[dim[axis]] -
-              child.layout[dim[axis]] -
-              getPosition(child, trailing[axis]);
-          }
+
+        if (isPosDefined(currentAbsoluteChild, trailing[axis]) &&
+            !isPosDefined(currentAbsoluteChild, leading[axis])) {
+          currentAbsoluteChild.layout[leading[axis]] =
+            node.layout[dim[axis]] -
+            currentAbsoluteChild.layout[dim[axis]] -
+            getPosition(currentAbsoluteChild, trailing[axis]);
         }
       }
+
+      child = currentAbsoluteChild;
+      currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild;
+      child.nextAbsoluteChild = null;
     }
@@ -1034,3 +1133,3 @@ }
 // This module export is only used for the purposes of unit testing this file. When
-// the library is packaged this file is included within css-layout.js which forms 
+// the library is packaged this file is included within css-layout.js which forms
 // the public API.
@@ -1041,2 +1140,3 @@ if (typeof exports === 'object') {
 
+
     return function(node) {
@@ -1043,0 +1143,0 @@ computeLayout.fillNodes(node);

dist/css-layout.min.js

@@ -1,2 +0,2 @@
-!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.computeLayout=b()}(this,function(){var a=function(){function a(a){return a.charAt(0).toUpperCase()+a.slice(1)}function b(b,c,d,e){for(var f=0;f<e.length;++f){var g=e[f],h=c+a(g)+d;if(h in b.style)return b.style[h];if(h=c+d,h in b.style)return b.style[h]}return 0}function c(a){return a.layout||(a.layout={width:void 0,height:void 0,top:0,left:0,right:0,bottom:0}),a.style||(a.style={}),a.children||(a.children=[]),a.children.forEach(c),a}function d(b,c,d,e){for(var f=0;f<e.length;++f){var g=e[f],h=c+a(g)+d;if(h in b.style&&b.style[h]>=0)return b.style[h];if(h=c+d,h in b.style&&b.style[h]>=0)return b.style[h]}return 0}function e(a){return void 0===a}function f(a){return a===X||a===Y}function g(a){return a===Z||a===$}function h(a){var b=[ja[a]];return f(a)&&b.unshift("start"),b}function i(a){var b=[ka[a]];return f(a)&&b.unshift("end"),b}function j(a,c){return b(a,"margin","",c)}function k(a,b){return j(a,h(b))}function l(a,b){return j(a,i(b))}function m(a,b){return d(a,"padding","",b)}function n(a,b){return m(a,h(b))}function o(a,b){return m(a,i(b))}function p(a,b){return d(a,"border","Width",b)}function q(a,b){return p(a,h(b))}function r(a,b){return p(a,i(b))}function s(a,b){return n(a,b)+q(a,b)}function t(a,b){return o(a,b)+r(a,b)}function u(a,b){return q(a,b)+r(a,b)}function v(a,b){return k(a,b)+l(a,b)}function w(a,b){return s(a,b)+t(a,b)}function x(a){return"justifyContent"in a.style?a.style.justifyContent:"flex-start"}function y(a){return"alignContent"in a.style?a.style.alignContent:"flex-start"}function z(a,b){return"alignSelf"in b.style?b.style.alignSelf:"alignItems"in a.style?a.style.alignItems:"stretch"}function A(a,b){if(b===W){if(a===X)return Y;if(a===Y)return X}return a}function B(a,b){var c;return c="direction"in a.style?a.style.direction:U,c===U&&(c=void 0===b?V:b),c}function C(a){return"flexDirection"in a.style?a.style.flexDirection:Z}function D(a,b){return g(a)?A(X,b):Z}function E(a){return"position"in a.style?a.style.position:"relative"}function F(a){return a.style.flex}function G(a){return E(a)===ha&&F(a)>0}function H(a){return"wrap"===a.style.flexWrap}function I(a,b){return a.layout[ma[b]]+v(a,b)}function J(a,b){return!e(a.style[ma[b]])&&a.style[ma[b]]>=0}function K(a,b){return!e(a.style[b])}function L(a){return"measure"in a.style}function M(a,b){return b in a.style?a.style[b]:0}function N(a,b,c){var d={row:a.style.minWidth,"row-reverse":a.style.minWidth,column:a.style.minHeight,"column-reverse":a.style.minHeight}[b],f={row:a.style.maxWidth,"row-reverse":a.style.maxWidth,column:a.style.maxHeight,"column-reverse":a.style.maxHeight}[b],g=c;return!e(f)&&f>=0&&g>f&&(g=f),!e(d)&&d>=0&&d>g&&(g=d),g}function O(a,b){return a>b?a:b}function P(a,b){e(a.layout[ma[b]])&&J(a,b)&&(a.layout[ma[b]]=O(N(a,b,a.style[ma[b]]),w(a,b)))}function Q(a,b,c){b.layout[ka[c]]=a.layout[ma[c]]-b.layout[ma[c]]-b.layout[la[c]]}function R(a,b){return ja[b]in a.style?M(a,ja[b]):-M(a,ka[b])}function S(a,b,c){var d=B(a,c),g=A(C(a),d),h=D(g,d),i=A(X,d);if(P(a,g),P(a,h),a.layout.direction=d,a.layout[ja[g]]+=k(a,g)+R(a,g),a.layout[ka[g]]+=l(a,g)+R(a,g),a.layout[ja[h]]+=k(a,h)+R(a,h),a.layout[ka[h]]+=l(a,h)+R(a,h),L(a)){var j=T;j=J(a,i)?a.style.width:e(a.layout[ma[i]])?b-v(a,i):a.layout[ma[i]],j-=w(a,i);var m=!J(a,i)&&e(a.layout[ma[i]]),n=!J(a,Z)&&e(a.layout[ma[Z]]);if(m||n){var o=a.style.measure(j);m&&(a.layout.width=o.width+w(a,i)),n&&(a.layout.height=o.height+w(a,Z))}if(0===a.children.length)return}var p,r,U,V;for(p=0;p<a.children.length;++p)if(U=a.children[p],z(a,U)!==ga||E(U)!==ha||e(a.layout[ma[h]])||J(U,h)){if(E(U)===ia)for(r=0;2>r;r++)V=0!==r?X:Z,!e(a.layout[ma[V]])&&!J(U,V)&&K(U,ja[V])&&K(U,ka[V])&&(U.layout[ma[V]]=O(N(U,V,a.layout[ma[V]]-w(a,V)-v(U,V)-M(U,ja[V])-M(U,ka[V])),w(U,V)))}else U.layout[ma[h]]=O(N(U,h,a.layout[ma[h]]-w(a,h)-v(U,h)),w(U,h));var W=T;e(a.layout[ma[g]])||(W=a.layout[ma[g]]-w(a,g));for(var Y=0,$=0,na=0,oa=0,pa=0,qa=0;$<a.children.length;){var ra,sa=0,ta=0,ua=0,va=0;for(p=Y;p<a.children.length;++p){U=a.children[p];var wa=0;if(!e(a.layout[ma[g]])&&G(U)?(ta++,ua+=F(U),wa=w(U,g)+v(U,g)):(ra=T,f(g)||(ra=b-v(a,i)-w(a,i),J(a,i)&&(ra=a.layout[ma[i]]-w(a,i))),0===na&&S(U,ra,d),E(U)===ha&&(va++,wa=I(U,g))),H(a)&&!e(a.layout[ma[g]])&&sa+wa>W&&p!==Y){va--,na=1;break}na=0,sa+=wa,$=p+1}var xa=0,ya=0,za=0;if(za=e(a.layout[ma[g]])?O(sa,0)-sa:W-sa,0!==ta){var Aa,Ba,Ca=za/ua;for(p=Y;$>p;++p)U=a.children[p],G(U)&&(Aa=Ca*F(U)+w(U,g),Ba=N(U,g,Aa),Aa!==Ba&&(za-=Ba,ua-=F(U)));for(Ca=za/ua,0>Ca&&(Ca=0),p=Y;$>p;++p)U=a.children[p],G(U)&&(U.layout[ma[g]]=N(U,g,Ca*F(U)+w(U,g)),ra=T,J(a,i)?ra=a.layout[ma[i]]-w(a,i):f(g)||(ra=b-v(a,i)-w(a,i)),S(U,ra,d))}else{var Da=x(a);Da===_?xa=za/2:Da===aa?xa=za:Da===ba?(za=O(za,0),ya=ta+va-1!==0?za/(ta+va-1):0):Da===ca&&(ya=za/(ta+va),xa=ya/2)}var Ea=0,Fa=xa+s(a,g);for(p=Y;$>p;++p)U=a.children[p],U.lineIndex=qa,E(U)===ia&&K(U,ja[g])?U.layout[la[g]]=M(U,ja[g])+q(a,g)+k(U,g):(U.layout[la[g]]+=Fa,e(a.layout[ma[g]])||Q(a,U,g)),E(U)===ha&&(Fa+=ya+I(U,g),Ea=O(Ea,N(U,h,I(U,h))));var Ga=a.layout[ma[h]];for(e(a.layout[ma[h]])&&(Ga=O(N(a,h,Ea+w(a,h)),w(a,h))),p=Y;$>p;++p)if(U=a.children[p],E(U)===ia&&K(U,ja[h]))U.layout[la[h]]=M(U,ja[h])+q(a,h)+k(U,h);else{var Ha=s(a,h);if(E(U)===ha){var Ia=z(a,U);if(Ia===ga)J(U,h)||(U.layout[ma[h]]=O(N(U,h,Ga-w(a,h)-v(U,h)),w(U,h)));else if(Ia!==da){var Ja=Ga-w(a,h)-I(U,h);Ha+=Ia===ea?Ja/2:Ja}}U.layout[la[h]]+=oa+Ha,e(a.layout[ma[h]])||Q(a,U,h)}oa+=Ea,pa=O(pa,Fa),qa+=1,Y=$}if(qa>1&&!e(a.layout[ma[h]])){var Ka=a.layout[ma[h]]-w(a,h),La=Ka-oa,Ma=0,Na=s(a,h),Oa=y(a);Oa===fa?Na+=La:Oa===ea?Na+=La/2:Oa===ga&&Ka>oa&&(Ma=La/qa);var Pa=0;for(p=0;qa>p;++p){var Qa=Pa,Ra=0;for(r=Qa;r<a.children.length;++r)if(U=a.children[r],E(U)===ha){if(U.lineIndex!==p)break;e(U.layout[ma[h]])||(Ra=O(Ra,U.layout[ma[h]]+v(U,h)))}for(Pa=r,Ra+=Ma,r=Qa;Pa>r;++r)if(U=a.children[r],E(U)===ha){var Sa=z(a,U);if(Sa===da)U.layout[la[h]]=Na+k(U,h);else if(Sa===fa)U.layout[la[h]]=Na+Ra-l(U,h)-U.layout[ma[h]];else if(Sa===ea){var Ta=U.layout[ma[h]];U.layout[la[h]]=Na+(Ra-Ta)/2}else Sa===ga&&(U.layout[la[h]]=Na+k(U,h))}Na+=Ra}}var Ua=!1,Va=!1;if(e(a.layout[ma[g]])&&(a.layout[ma[g]]=O(N(a,g,pa+t(a,g)),w(a,g)),Ua=!0),e(a.layout[ma[h]])&&(a.layout[ma[h]]=O(N(a,h,oa+w(a,h)),w(a,h)),Va=!0),Ua||Va)for(p=0;p<a.children.length;++p)U=a.children[p],Ua&&Q(a,U,g),Va&&Q(a,U,h);for(p=0;p<a.children.length;++p)if(U=a.children[p],E(U)===ia){for(r=0;2>r;r++)V=0!==r?X:Z,!e(a.layout[ma[V]])&&!J(U,V)&&K(U,ja[V])&&K(U,ka[V])&&(U.layout[ma[V]]=O(N(U,V,a.layout[ma[V]]-u(a,V)-v(U,V)-M(U,ja[V])-M(U,ka[V])),w(U,V)));for(r=0;2>r;r++)V=0!==r?X:Z,K(U,ka[V])&&!K(U,ja[V])&&(U.layout[ja[V]]=a.layout[ma[V]]-U.layout[ma[V]]-M(U,ka[V]))}}var T,U="inherit",V="ltr",W="rtl",X="row",Y="row-reverse",Z="column",$="column-reverse",_="center",aa="flex-end",ba="space-between",ca="space-around",da="flex-start",ea="center",fa="flex-end",ga="stretch",ha="relative",ia="absolute",ja={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},ka={row:"right","row-reverse":"left",column:"bottom","column-reverse":"top"},la={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},ma={row:"width","row-reverse":"width",column:"height","column-reverse":"height"};return{computeLayout:S,fillNodes:c}}();return"object"==typeof exports&&(module.exports=a),function(b){a.fillNodes(b),a.computeLayout(b)}});
+!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.computeLayout=b()}(this,function(){var a=function(){function a(a){return a.charAt(0).toUpperCase()+a.slice(1)}function b(b,c,d,e){for(var f=0;f<e.length;++f){var g=e[f],h=c+a(g)+d;if(h in b.style)return b.style[h];if(h=c+d,h in b.style)return b.style[h]}return 0}function c(a){return a.layout||(a.layout={width:void 0,height:void 0,top:0,left:0,right:0,bottom:0}),a.style||(a.style={}),a.children||(a.children=[]),a.children.forEach(c),a}function d(b,c,d,e){for(var f=0;f<e.length;++f){var g=e[f],h=c+a(g)+d;if(h in b.style&&b.style[h]>=0)return b.style[h];if(h=c+d,h in b.style&&b.style[h]>=0)return b.style[h]}return 0}function e(a){return void 0===a}function f(a){return a===W||a===X}function g(a){return a===Y||a===Z}function h(a){var b=[ja[a]];return f(a)&&b.unshift("start"),b}function i(a){var b=[ka[a]];return f(a)&&b.unshift("end"),b}function j(a,c){return b(a,"margin","",c)}function k(a,b){return j(a,h(b))}function l(a,b){return j(a,i(b))}function m(a,b){return d(a,"padding","",b)}function n(a,b){return m(a,h(b))}function o(a,b){return m(a,i(b))}function p(a,b){return d(a,"border","Width",b)}function q(a,b){return p(a,h(b))}function r(a,b){return p(a,i(b))}function s(a,b){return n(a,b)+q(a,b)}function t(a,b){return o(a,b)+r(a,b)}function u(a,b){return q(a,b)+r(a,b)}function v(a,b){return k(a,b)+l(a,b)}function w(a,b){return s(a,b)+t(a,b)}function x(a){return"justifyContent"in a.style?a.style.justifyContent:"flex-start"}function y(a){return"alignContent"in a.style?a.style.alignContent:"flex-start"}function z(a,b){return"alignSelf"in b.style?b.style.alignSelf:"alignItems"in a.style?a.style.alignItems:"stretch"}function A(a,b){if(b===V){if(a===W)return X;if(a===X)return W}return a}function B(a,b){var c;return c="direction"in a.style?a.style.direction:T,c===T&&(c=void 0===b?U:b),c}function C(a){return"flexDirection"in a.style?a.style.flexDirection:Y}function D(a,b){return g(a)?A(W,b):Y}function E(a){return"position"in a.style?a.style.position:"relative"}function F(a){return E(a)===ha&&a.style.flex>0}function G(a){return"wrap"===a.style.flexWrap}function H(a,b){return a.layout[ma[b]]+v(a,b)}function I(a,b){return!e(a.style[ma[b]])&&a.style[ma[b]]>=0}function J(a,b){return!e(a.style[b])}function K(a){return"measure"in a.style}function L(a,b){return b in a.style?a.style[b]:0}function M(a,b,c){var d={row:a.style.minWidth,"row-reverse":a.style.minWidth,column:a.style.minHeight,"column-reverse":a.style.minHeight}[b],f={row:a.style.maxWidth,"row-reverse":a.style.maxWidth,column:a.style.maxHeight,"column-reverse":a.style.maxHeight}[b],g=c;return!e(f)&&f>=0&&g>f&&(g=f),!e(d)&&d>=0&&d>g&&(g=d),g}function N(a,b){return a>b?a:b}function O(a,b){e(a.layout[ma[b]])&&I(a,b)&&(a.layout[ma[b]]=N(M(a,b,a.style[ma[b]]),w(a,b)))}function P(a,b,c){b.layout[ka[c]]=a.layout[ma[c]]-b.layout[ma[c]]-b.layout[la[c]]}function Q(a,b){return ja[b]in a.style?L(a,ja[b]):-L(a,ka[b])}function R(a,b,c){var d=B(a,c),g=A(C(a),d),h=D(g,d),i=A(W,d);O(a,g),O(a,h),a.layout.direction=d,a.layout[ja[g]]+=k(a,g)+Q(a,g),a.layout[ka[g]]+=l(a,g)+Q(a,g),a.layout[ja[h]]+=k(a,h)+Q(a,h),a.layout[ka[h]]+=l(a,h)+Q(a,h);var j=a.children.length,m=w(a,i);if(K(a)){var n=!e(a.layout[ma[i]]),o=S;o=I(a,i)?a.style.width:n?a.layout[ma[i]]:b-v(a,i),o-=m;var p=!I(a,i)&&!n,r=!I(a,Y)&&e(a.layout[ma[Y]]);if(p||r){var T=a.style.measure(o);p&&(a.layout.width=T.width+m),r&&(a.layout.height=T.height+w(a,Y))}if(0===j)return}var U,V,na,oa,pa=G(a),qa=x(a),ra=s(a,g),sa=s(a,h),ta=w(a,g),ua=w(a,h),va=!e(a.layout[ma[g]]),wa=!e(a.layout[ma[h]]),xa=f(g),ya=null,za=null,Aa=S;va&&(Aa=a.layout[ma[g]]-ta);for(var Ba=0,Ca=0,Da=0,Ea=0,Fa=0,Ga=0;j>Ca;){var Ha,Ia=0,Ja=0,Ka=0,La=0,Ma=va&&qa==$||!va&&qa!=_,Na=Ma?j:Ba,Oa=!0,Pa=j,Qa=null,Ra=null,Sa=ra,Ta=0;for(U=Ba;j>U;++U){na=a.children[U],na.lineIndex=Ga,na.nextAbsoluteChild=null,na.nextFlexChild=null;var Ua=z(a,na);if(Ua===ga&&E(na)===ha&&wa&&!I(na,h))na.layout[ma[h]]=N(M(na,h,a.layout[ma[h]]-ua-v(na,h)),w(na,h));else if(E(na)===ia)for(null===ya&&(ya=na),null!==za&&(za.nextAbsoluteChild=na),za=na,V=0;2>V;V++)oa=0!==V?W:Y,!e(a.layout[ma[oa]])&&!I(na,oa)&&J(na,ja[oa])&&J(na,ka[oa])&&(na.layout[ma[oa]]=N(M(na,oa,a.layout[ma[oa]]-w(a,oa)-v(na,oa)-L(na,ja[oa])-L(na,ka[oa])),w(na,oa)));var Va=0;if(va&&F(na)?(Ja++,Ka+=na.style.flex,null===Qa&&(Qa=na),null!==Ra&&(Ra.nextFlexChild=na),Ra=na,Va=w(na,g)+v(na,g)):(Ha=S,xa||(Ha=I(a,i)?a.layout[ma[i]]-m:b-v(a,i)-m),0===Da&&R(na,Ha,d),E(na)===ha&&(La++,Va=H(na,g))),pa&&va&&Ia+Va>Aa&&U!==Ba){La--,Da=1;break}Ma&&(E(na)!=ha||F(na))&&(Ma=!1,Na=U),Oa&&(E(na)!=ha||Ua!==ga&&Ua!=da||e(na.layout[ma[h]]))&&(Oa=!1,Pa=U),Ma&&(na.layout[la[g]]+=Sa,va&&P(a,na,g),Sa+=H(na,g),Ta=N(Ta,M(na,h,H(na,h)))),Oa&&(na.layout[la[h]]+=Ea+sa,wa&&P(a,na,h)),Da=0,Ia+=Va,Ca=U+1}var Wa=0,Xa=0,Ya=0;if(Ya=va?Aa-Ia:N(Ia,0)-Ia,0!==Ja){var Za,$a,_a=Ya/Ka;for(Ra=Qa;null!==Ra;)Za=_a*Ra.style.flex+w(Ra,g),$a=M(Ra,g,Za),Za!==$a&&(Ya-=$a,Ka-=Ra.style.flex),Ra=Ra.nextFlexChild;for(_a=Ya/Ka,0>_a&&(_a=0),Ra=Qa;null!==Ra;)Ra.layout[ma[g]]=M(Ra,g,_a*Ra.style.flex+w(Ra,g)),Ha=S,I(a,i)?Ha=a.layout[ma[i]]-m:xa||(Ha=b-v(a,i)-m),R(Ra,Ha,d),na=Ra,Ra=Ra.nextFlexChild,na.nextFlexChild=null}else qa!==$&&(qa===_?Wa=Ya/2:qa===aa?Wa=Ya:qa===ba?(Ya=N(Ya,0),Xa=Ja+La-1!==0?Ya/(Ja+La-1):0):qa===ca&&(Xa=Ya/(Ja+La),Wa=Xa/2));for(Sa+=Wa,U=Na;Ca>U;++U)na=a.children[U],E(na)===ia&&J(na,ja[g])?na.layout[la[g]]=L(na,ja[g])+q(a,g)+k(na,g):(na.layout[la[g]]+=Sa,va&&P(a,na,g),E(na)===ha&&(Sa+=Xa+H(na,g),Ta=N(Ta,M(na,h,H(na,h)))));var ab=a.layout[ma[h]];for(wa||(ab=N(M(a,h,Ta+ua),ua)),U=Pa;Ca>U;++U)if(na=a.children[U],E(na)===ia&&J(na,ja[h]))na.layout[la[h]]=L(na,ja[h])+q(a,h)+k(na,h);else{var bb=sa;if(E(na)===ha){var Ua=z(a,na);if(Ua===ga)e(na.layout[ma[h]])&&(na.layout[ma[h]]=N(M(na,h,ab-ua-v(na,h)),w(na,h)));else if(Ua!==da){var cb=ab-ua-H(na,h);bb+=Ua===ea?cb/2:cb}}na.layout[la[h]]+=Ea+bb,wa&&P(a,na,h)}Ea+=Ta,Fa=N(Fa,Sa),Ga+=1,Ba=Ca}if(Ga>1&&wa){var db=a.layout[ma[h]]-ua,eb=db-Ea,fb=0,gb=sa,hb=y(a);hb===fa?gb+=eb:hb===ea?gb+=eb/2:hb===ga&&db>Ea&&(fb=eb/Ga);var ib=0;for(U=0;Ga>U;++U){var jb=ib,kb=0;for(V=jb;j>V;++V)if(na=a.children[V],E(na)===ha){if(na.lineIndex!==U)break;e(na.layout[ma[h]])||(kb=N(kb,na.layout[ma[h]]+v(na,h)))}for(ib=V,kb+=fb,V=jb;ib>V;++V)if(na=a.children[V],E(na)===ha){var lb=z(a,na);if(lb===da)na.layout[la[h]]=gb+k(na,h);else if(lb===fa)na.layout[la[h]]=gb+kb-l(na,h)-na.layout[ma[h]];else if(lb===ea){var mb=na.layout[ma[h]];na.layout[la[h]]=gb+(kb-mb)/2}else lb===ga&&(na.layout[la[h]]=gb+k(na,h))}gb+=kb}}var nb=!1,ob=!1;if(va||(a.layout[ma[g]]=N(M(a,g,Fa+t(a,g)),ta),(g==X||g==Z)&&(nb=!0)),wa||(a.layout[ma[h]]=N(M(a,h,Ea+ua),ua),(h==X||h==Z)&&(ob=!0)),nb||ob)for(U=0;j>U;++U)na=a.children[U],nb&&P(a,na,g),ob&&P(a,na,h);for(za=ya;null!==za;){for(V=0;2>V;V++)oa=0!==V?W:Y,!e(a.layout[ma[oa]])&&!I(za,oa)&&J(za,ja[oa])&&J(za,ka[oa])&&(za.layout[ma[oa]]=N(M(za,oa,a.layout[ma[oa]]-u(a,oa)-v(za,oa)-L(za,ja[oa])-L(za,ka[oa])),w(za,oa))),J(za,ka[oa])&&!J(za,ja[oa])&&(za.layout[ja[oa]]=a.layout[ma[oa]]-za.layout[ma[oa]]-L(za,ka[oa]));na=za,za=za.nextAbsoluteChild,na.nextAbsoluteChild=null}}var S,T="inherit",U="ltr",V="rtl",W="row",X="row-reverse",Y="column",Z="column-reverse",$="flex-start",_="center",aa="flex-end",ba="space-between",ca="space-around",da="flex-start",ea="center",fa="flex-end",ga="stretch",ha="relative",ia="absolute",ja={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},ka={row:"right","row-reverse":"left",column:"bottom","column-reverse":"top"},la={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},ma={row:"width","row-reverse":"width",column:"height","column-reverse":"height"};return{computeLayout:R,fillNodes:c}}();return"object"==typeof exports&&(module.exports=a),function(b){a.fillNodes(b),a.computeLayout(b)}});
 //# sourceMappingURL=css-layout.min.js.map

Gruntfile.js

 'use strict';
 
 module.exports = function(grunt) {
-  var fs = require('fs');
   var path = require('path');
-  var isWindows = /^win/.test(process.platform);
+  var isWindows = (/^win/).test(process.platform);
 
@@ -28,5 +27,4 @@ require('load-grunt-tasks')(grunt);
     config.cTestExecute = '<%= config.cTestOutput %>';
-    config.cTestClean = ['<%= config.cTestOutput %>','*.obj','*.pdb'];
-  }
-  else {
+    config.cTestClean = ['<%= config.cTestOutput %>', '*.obj', '*.pdb'];
+  } else {
     // GCC build (OSX, Linux, ...), assumes gcc is in the path.
@@ -46,4 +44,4 @@ config.cTestOutput = 'c_test';
           create: ['<%= config.distFolder %>']
-        },
-      },
+        }
+      }
     },
@@ -61,3 +59,3 @@
       },
-      target: ['<%= config.srcFolder %>/Layout.js']
+      target: ['<%= config.srcFolder %>/**/*.js', './Gruntfile.js']
     },
@@ -67,3 +65,3 @@
       options: {
-        prefix: '// @@',
+        prefix: '// @@'
       },
@@ -127,13 +125,12 @@ main: {
               '#endif // CSS_LAYOUT_IMPLEMENTATION'
-            ].join('\n')
-          }
-          else {
+            ].join('\n');
+          } else {
             return src;
           }
-        },
+        }
       },
       dist: {
         src: ['<%= config.srcFolder %>/Layout.h', '<%= config.srcFolder %>/Layout.c'],
-        dest: '<%= config.distFolder %>/css-layout.h',
-      },
+        dest: '<%= config.distFolder %>/css-layout.h'
+      }
     },
@@ -161,4 +158,4 @@
       files: ['src/Layout.js'],
-      tasks: ['ci'],
-    },
+      tasks: ['ci']
+    }
   });
@@ -165,0 +162,0 @@

package.json

 {
   "name": "css-layout",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Reimplementation of CSS layout using pure JavaScript",
@@ -27,2 +27,4 @@ "main": "dist/css-layout.js",
   "devDependencies": {
+    "babel-eslint": "^4.1.3",
+    "fbjs-scripts": "^0.2.2",
     "grunt": "^0.4.5",
@@ -29,0 +31,0 @@ "grunt-cli": "^0.1.13",

README.md

@@ -94,3 +94,3 @@ css-layout [![Build Status](https://travis-ci.org/facebook/css-layout.svg?branch=master)](https://travis-ci.org/facebook/css-layout)
 justifyContent | 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
-alignItems, alignSelf, alignContent | 'flex-start', 'center', 'flex-end', 'stretch'
+alignItems, alignSelf | 'flex-start', 'center', 'flex-end', 'stretch'
 flex | positive number
@@ -130,2 +130,9 @@ flexWrap | 'wrap', 'nowrap'
 
+Native Usage Notes
+------------------
+
+The C equivalent of `computeLayout` is [`layoutNode`](dist/css-layout.h#L1378).
+
+In order for layout to properly layout reflowable text, the `measure` function must be set on the `css_node` structure. The property can be found in [`css-layout.h`](dist/css-layout.h#L146). This function must take a void pointer to a `context` that will affect the size of the node and the `width` as computed by the layout engine, and must return a `css_dim_t` structure defining the actual needed size of the node. For the most part, the `context` field can be the text inside the node. No C implementation of this function is provided in provided - it depends on your use of css-layout. However an implementation of the function in JavaScript can be used for reference in the [test utilities](src/Layout-test-utils.js#L383).
+
 Development
@@ -132,0 +139,0 @@ -----------

src/__tests__/Layout-random-test.js

@@ -101,9 +101,9 @@ /**
   function checkRandomLayout(i, node) {
-      it('should layout randomly #' + i + '.', function(node) {
-        if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) {
-          node = reduceTest(node);
-        }
+    it('should layout randomly #' + i + '.', function(node) {
+      if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) {
+        node = reduceTest(node);
+      }
 
-        testRandomLayout(node, i);
-      }.bind(this, node));
+      testRandomLayout(node, i);
+    }.bind(this, node));
   }
@@ -110,0 +110,0 @@

src/css-layout.js

@@ -6,3 +6,3 @@ // UMD (Universal Module Definition)
 // https://github.com/umdjs/umd/blob/master/returnExports.js
-(function (root, factory) {
+(function(root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -20,9 +20,12 @@ // AMD. Register as an anonymous module.
   }
-}(this, function () {
-    // @@include('./Layout.js')
+}(this, function() {
+  // @@include('./Layout.js')
 
-    return function(node) {
-      computeLayout.fillNodes(node);
-      computeLayout.computeLayout(node);
+  return function(node) {
+    /*eslint-disable */
+    // disabling ESLint because this code relies on the above include
+    computeLayout.fillNodes(node);
+    computeLayout.computeLayout(node);
+    /*eslint-enable */
   };
 }));

src/JavaTranspiler.js

@@ -13,41 +13,44 @@ /**
     .replace(/CSS_UNDEFINED/g, 'CSSConstants.UNDEFINED')
+    .replace(/CSS_JUSTIFY_/g, 'CSSJustify.')
+    .replace(/CSS_ALIGN_/g, 'CSSAlign.')
+    .replace(/CSS_POSITION_/g, 'CSSPositionType.')
     .replace(/css_flex_direction_t/g, 'CSSFlexDirection')
     .replace(/css_direction_t/g, 'CSSDirection')
-    .replace(/CSS_DIRECTION_/g, 'CSSDirection.')
-    .replace(/CSS_FLEX_DIRECTION_/g, 'CSSFlexDirection.')
     .replace(/css_align_t/g, 'CSSAlign')
-    .replace(/CSS_ALIGN_/g, 'CSSAlign.')
-    .replace(/CSS_WRAP/g, 'CSSWrap.WRAP')
-    .replace(/CSS_POSITION_/g, 'CSSPositionType.')
     .replace(/css_justify_t/g, 'CSSJustify')
-    .replace(/CSS_JUSTIFY_/g, 'CSSJustify.')
     .replace(/css_dim_t/g, 'MeasureOutput')
     .replace(/bool/g, 'boolean')
-    .replace(/^(\s+)([^\s]+)\s+\+=/gm, '$1$2 = $2 +') // Expand +=
-    .replace(/leading\[([^\]]+)\]/g, 'getLeading($1)')
-    .replace(/trailing\[([^\]]+)\]/g, 'getTrailing($1)')
-    .replace(/pos\[([^\]]+)\]/g, 'getPos($1)')
-    .replace(/dim\[([^\]]+)\]/g, 'getDim($1)')
-    .replace(/isUndefined/g, 'CSSConstants.isUndefined')
-    .replace(/\/\*\(java\)!([^*]+)\*\//g, '$1')
-
-    // Since Java doesn't store its attributes in arrays, we need to use setters/getters to access
-    // the appropriate layout/style fields
-    .replace(
-        /(\w+)\.layout\[((?:getLeading|getPos)\([^\)]+\))\]\s+=\s+([^;]+);/gm,
-        'setLayoutPosition($1, $2, $3);')
-    .replace(
-        /(\w+)\.layout\[((?:getTrailing|getPos)\([^\)]+\))\]\s+=\s+([^;]+);/gm,
-        'setLayoutPosition($1, $2, $3);')
-    .replace(
-        /(\w+)\.layout\.direction\s+=\s+([^;]+);/gm,
-        'setLayoutDirection($1, $2);')
-    .replace(/(\w+)\.layout\[((?:getLeading|getPos)\([^\]]+\))\]/g, 'getLayoutPosition($1, $2)')
-    .replace(/(\w+)\.layout\[((?:getTrailing|getPos)\([^\]]+\))\]/g, 'getLayoutPosition($1, $2)')
-    .replace(
-        /(\w+)\.layout\[(getDim\([^\)]+\))\]\s+=\s+([^;]+);/gm,
-        'setLayoutDimension($1, $2, $3);')
-    .replace(/(\w+)\.layout\[(getDim\([^\]]+\))\]/g, 'getLayoutDimension($1, $2)')
-    .replace(/(\w+)\.style\[((?:getLeading|getPos)\([^\]]+\))\]/g, 'getStylePosition($1, $2)')
-    .replace(/(\w+)\.style\[(getDim\([^\]]+\))\]/g, 'getStyleDimension($1, $2)');
+    .replace(/style\[dim/g, 'style.dimensions[dim')
+    .replace(/(style|layout)\.width/g, '$1.dimensions[DIMENSION_WIDTH]')
+    .replace(/(style|layout)\.height/g, '$1.dimensions[DIMENSION_HEIGHT]')
+    .replace(/layout\[dim/g, 'layout.dimensions[dim')
+    .replace(/layout\[pos/g, 'layout.position[pos')
+    .replace(/layout\[leading/g, 'layout.position[leading')
+    .replace(/layout\[trailing/g, 'layout.position[trailing')
+    .replace(/getPositionType\((.+?)\)/g, '$1.style.positionType')
+    .replace(/getJustifyContent\((.+?)\)/g, '$1.style.justifyContent')
+    .replace(/getAlignContent\((.+?)\)/g, '$1.style.alignContent')
+    .replace(/isPosDefined\((.+?),\s*(.+?)\)/g, '!isUndefined\($1.style.position[$2]\)')
+    .replace(/isDimDefined\((.+?),\s*(.+?)\)/g, '\(!isUndefined\($1.style.dimensions[dim[$2]]\) && $1.style.dimensions[dim[$2]] >= 0.0\)')
+    .replace(/getPosition\((.+?),\s*(.+?)\)/g, '\(isUndefined\($1.style.position[$2]\) ?  0 : $1.style.position[$2]\)')
+    .replace(/setTrailingPosition\((.+?),\s*(.+?),\s*(.+?)\)/g, '$2.layout.position[trailing[$3]] = $1.layout.dimensions[dim[$3]] - $2.layout.dimensions[dim[$3]] - $2.layout.position[pos[$3]]')
+    .replace(/isFlex\((.+?)\)/g, '\($1.style.positionType == CSSPositionType.RELATIVE && $1.style.flex > 0\)')
+    .replace(/isFlexWrap\((.+?)\)/g, '\($1.style.flexWrap == CSSWrap.WRAP\)')
+    .replace(/getPaddingAndBorderAxis\((.+?),\s*(.+?)\)/g, '\(getLeadingPaddingAndBorder($1, $2) + getTrailingPaddingAndBorder($1, $2)\)')
+    .replace(/getBorderAxis\((.+?),\s*(.+?)\)/g, '\(getLeadingBorder($1, $2) + getTrailingBorder($1, $2)\)')
+    .replace(/getMarginAxis\((.+?),\s*(.+?)\)/g, '\(getLeadingMargin($1, $2) + getTrailingMargin($1, $2)\)')
+    .replace(/getLeadingPaddingAndBorder\((.+?),\s*(.+?)\)/g, '\(getLeadingPadding($1, $2) + getLeadingBorder($1, $2)\)')
+    .replace(/getTrailingPaddingAndBorder\((.+?),\s*(.+?)\)/g, '\(getTrailingPadding($1, $2) + getTrailingBorder($1, $2)\)')
+    .replace(/getDimWithMargin\((.+?),\s*(.+?)\)/g, '\($1.layout.dimensions[dim[$2]] + getLeadingMargin($1, $2) + getTrailingMargin($1, $2)\)')
+    .replace(/getLeadingMargin\((.+?),\s*(.+?)\)/g, '$1.style.margin.getWithFallback(leadingSpacing[$2], leading[$2])')
+    .replace(/getTrailingMargin\((.+?),\s*(.+?)\)/g, '$1.style.margin.getWithFallback(trailingSpacing[$2], trailing[$2])')
+    .replace(/getLeadingPadding\((.+?),\s*(.+?)\)/g, '$1.style.padding.getWithFallback(leadingSpacing[$2], leading[$2])')
+    .replace(/getTrailingPadding\((.+?),\s*(.+?)\)/g, '$1.style.padding.getWithFallback(trailingSpacing[$2], trailing[$2])')
+    .replace(/getLeadingBorder\((.+?),\s*(.+?)\)/g, '$1.style.border.getWithFallback(leadingSpacing[$2], leading[$2])')
+    .replace(/getTrailingBorder\((.+?),\s*(.+?)\)/g, '$1.style.border.getWithFallback(trailingSpacing[$2], trailing[$2])')
+    .replace(/isRowDirection\((.+?)\)/g, '\($1 == CSS_FLEX_DIRECTION_ROW || $1 == CSS_FLEX_DIRECTION_ROW_REVERSE\)')
+    .replace(/isUndefined\((.+?)\)/g, 'Float.isNaN\($1\)')
+    .replace(/\/\*\(c\)!([^*]+)\*\//g, '')
+    .replace(/var\/\*\(java\)!([^*]+)\*\//g, '$1')
+    .replace(/\/\*\(java\)!([^*]+)\*\//g, '$1');
 }
@@ -57,37 +60,35 @@
   return __transpileToJavaCommon(code)
+    .replace(/CSS_DIRECTION_/g, 'CSSDirection.')
+    .replace(/CSS_FLEX_DIRECTION_/g, 'CSSFlexDirection.')
+    .replace(/CSS_WRAP/g, 'CSSWrap.WRAP')
     .replace(/new_test_css_node/g, 'new TestCSSNode')
-    .replace( // style.dimensions[CSS_WIDTH] => style.width
+    .replace(// style.position[CSS_TOP] => style.position[CSSLayout.POSITION_TOP]
+        /(style|layout)\.position\[CSS_(LEFT|TOP|RIGHT|BOTTOM)\]/g,
+        function(str, match1, match2) {
+          return match1 + '.position[POSITION_' + match2 + ']';
+        })
+    .replace(// style.dimensions[CSS_WIDTH] => style.dimensions[CSSLayout.DIMENSION_WIDTH]
         /(style|layout)\.dimensions\[CSS_(WIDTH|HEIGHT)\]/g,
-        function (str, match1, match2) {
-            return match1 + '.' + match2.toLowerCase();
+        function(str, match1, match2) {
+          return match1 + '.dimensions[DIMENSION_' + match2 + ']';
         })
-    .replace( // style.maxDimensions[CSS_WIDTH] => style.maxWidth
+    .replace(// style.maxDimensions[CSS_WIDTH] => style.maxWidth
         /(style|layout)\.maxDimensions\[CSS_(WIDTH|HEIGHT)\]/g,
-        function (str, match1, match2) {
-            return match1 + '.max' + match2.substr(0, 1).toUpperCase() + match2.substr(1).toLowerCase();
+        function(str, match1, match2) {
+          return match1 + '.max' + match2.substr(0, 1).toUpperCase() + match2.substr(1).toLowerCase();
         })
-    .replace( // style.minDimensions[CSS_WIDTH] => style.minWidth
+    .replace(// style.minDimensions[CSS_WIDTH] => style.minWidth
         /(style|layout)\.minDimensions\[CSS_(WIDTH|HEIGHT)\]/g,
-        function (str, match1, match2) {
-            return match1 + '.min' + match2.substr(0, 1).toUpperCase() + match2.substr(1).toLowerCase();
+        function(str, match1, match2) {
+          return match1 + '.min' + match2.substr(0, 1).toUpperCase() + match2.substr(1).toLowerCase();
         })
-    .replace( // layout.position[CSS_TOP] => layout.y
-        /layout\.position\[CSS_(TOP|LEFT)\]/g,
-        function (str, match1) {
-            return 'layout.' + (match1 === 'TOP' ? 'top' : 'left');
-        })
-    .replace( // style.position[CSS_TOP] => style.positionTop
-        /style\.(position)\[CSS_(TOP|BOTTOM|LEFT|RIGHT)\]/g,
-        function (str, match1, match2) {
-            return 'style.' + match1 + match2[0] + match2.substring(1).toLowerCase();
-        })
-    .replace( // style.margin[CSS_TOP] = 12.3 => style.margin[Spacing.TOP].set(12.3)
+    .replace(// style.margin[CSS_TOP] = 12.3 => style.margin[Spacing.TOP].set(12.3)
         /style\.(margin|border|padding)\[CSS_(TOP|BOTTOM|LEFT|RIGHT|START|END)\]\s+=\s+(-?[\.\d]+)/g,
-        function (str, match1, match2, match3) {
+        function(str, match1, match2, match3) {
           var propertyCap = match1.charAt(0).toUpperCase() + match1.slice(1);
           return 'set' + propertyCap + '(Spacing.' + match2 + ', ' + match3 + ')';
         })
-    .replace( // style.margin[CSS_TOP] => style.margin[Spacing.TOP]
+    .replace(// style.margin[CSS_TOP] => style.margin[Spacing.TOP]
         /style\.(margin|border|padding)\[CSS_(TOP|BOTTOM|LEFT|RIGHT|START|END)\]/g,
-        function (str, match1, match2) {
+        function(str, match1, match2) {
           return 'style.' + match1 + '.get(Spacing.' + match2 + ')';
@@ -100,6 +101,6 @@ })
     .replace(/(\d+\.\d+)/g, '$1f')
-    .replace( // style.flex_direction => style.flexDirection
+    .replace(// style.flex_direction => style.flexDirection
         /style\.([^_\[\]\s]+)_(\w)(\w+)/g,
-        function (str, match1, match2, match3) {
-            return 'style.' + match1 + match2.toUpperCase() + match3;
+        function(str, match1, match2, match3) {
+          return 'style.' + match1 + match2.toUpperCase() + match3;
         })
@@ -106,0 +107,0 @@ .replace(/(\w+)\.measure\s+=\s+.+/, '$1.setMeasureFunction(sTestMeasureFunction);');

src/Layout-test-utils.js

@@ -26,9 +26,9 @@ /**
   if (typeof jasmine !== 'undefined') {
-    jasmine.matchersUtil.buildFailureMessage = function () {
-      var args = Array.prototype.slice.call(arguments, 0),
-        matcherName = args[0],
-        isNot = args[1],
-        actual = args[2],
-        expected = args.slice(3),
-        englishyPredicate = matcherName.replace(/[A-Z]/g, function(s) { return ' ' + s.toLowerCase(); });
+    jasmine.matchersUtil.buildFailureMessage = function() {
+      var args = Array.prototype.slice.call(arguments, 0);
+      var matcherName = args[0];
+      var isNot = args[1];
+      var actual = args[2];
+      var expected = args.slice(3);
+      var englishyPredicate = matcherName.replace(/[A-Z]/g, function(s) { return ' ' + s.toLowerCase(); });
 
@@ -282,4 +282,3 @@ var pp = function(node) {
         obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) / testMeasurePrecision;
-      }
-      else if (typeof val === 'object') {
+      } else if (typeof val === 'object') {
         inplaceRoundNumbersInObject(val);
@@ -391,3 +390,3 @@ }
     var body = iframeText.contentDocument.body;
-    if (width === undefined || width !== width) {
+    if (width === undefined || isNaN(width)) {
       width = Infinity;
@@ -496,3 +495,3 @@ }
       var fn = function(width) {
-        if (width === undefined || width !== width) {
+        if (width === undefined || isNaN(width)) {
           width = Infinity;
@@ -499,0 +498,0 @@ }

src/Layout.js

@@ -23,3 +23,3 @@ /**
 
-  // var CSS_JUSTIFY_FLEX_START = 'flex-start';
+  var CSS_JUSTIFY_FLEX_START = 'flex-start';
   var CSS_JUSTIFY_CENTER = 'center';
@@ -63,24 +63,2 @@ var CSS_JUSTIFY_FLEX_END = 'flex-end';
 
-  function capitalizeFirst(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-
-  function getSpacing(node, type, suffix, locations) {
-    for (var i = 0; i < locations.length; ++i) {
-      var location = locations[i];
-
-      var key = type + capitalizeFirst(location) + suffix;
-      if (key in node.style) {
-        return node.style[key];
-      }
-
-      key = type + suffix;
-      if (key in node.style) {
-        return node.style[key];
-      }
-    }
-
-    return 0;
-  }
-
   // When transpiled to Java / C the node type has layout, children and style
@@ -90,3 +68,3 @@ // properties. For the JavaScript version this function adds these properties
   function fillNodes(node) {
-    if (!node.layout) {
+    if (!node.layout || node.isDirty) {
       node.layout = {
@@ -113,20 +91,2 @@ width: undefined,
 
-  function getPositiveSpacing(node, type, suffix, locations) {
-    for (var i = 0; i < locations.length; ++i) {
-      var location = locations[i];
-
-      var key = type + capitalizeFirst(location) + suffix;
-      if (key in node.style && node.style[key] >= 0) {
-        return node.style[key];
-      }
-
-      key = type + suffix;
-      if (key in node.style && node.style[key] >= 0) {
-        return node.style[key];
-      }
-    }
-
-    return 0;
-  }
-
   function isUndefined(value) {
@@ -146,54 +106,148 @@ return value === undefined;
 
-  function getLeadingLocations(axis) {
-    var locations = [leading[axis]];
-    if (isRowDirection(axis)) {
-      locations.unshift('start');
+  function getLeadingMargin(node, axis) {
+    if (node.style.marginStart !== undefined && isRowDirection(axis)) {
+      return node.style.marginStart;
     }
 
-    return locations;
-  }
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.marginLeft;   break;
+      case 'row-reverse':    value = node.style.marginRight;  break;
+      case 'column':         value = node.style.marginTop;    break;
+      case 'column-reverse': value = node.style.marginBottom; break;
+    }
 
-  function getTrailingLocations(axis) {
-    var locations = [trailing[axis]];
-    if (isRowDirection(axis)) {
-      locations.unshift('end');
+    if (value !== undefined) {
+      return value;
     }
 
-    return locations;
-  }
+    if (node.style.margin !== undefined) {
+      return node.style.margin;
+    }
 
-  function getMargin(node, locations) {
-    return getSpacing(node, 'margin', '', locations);
+    return 0;
   }
 
-  function getLeadingMargin(node, axis) {
-    return getMargin(node, getLeadingLocations(axis));
-  }
-
   function getTrailingMargin(node, axis) {
-    return getMargin(node, getTrailingLocations(axis));
-  }
+    if (node.style.marginEnd !== undefined && isRowDirection(axis)) {
+      return node.style.marginEnd;
+    }
 
-  function getPadding(node, locations) {
-    return getPositiveSpacing(node, 'padding', '', locations);
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.marginRight;  break;
+      case 'row-reverse':    value = node.style.marginLeft;   break;
+      case 'column':         value = node.style.marginBottom; break;
+      case 'column-reverse': value = node.style.marginTop;    break;
+    }
+
+    if (value != null) {
+      return value;
+    }
+
+    if (node.style.margin !== undefined) {
+      return node.style.margin;
+    }
+
+    return 0;
   }
 
   function getLeadingPadding(node, axis) {
-    return getPadding(node, getLeadingLocations(axis));
+    if (node.style.paddingStart !== undefined && node.style.paddingStart >= 0
+        && isRowDirection(axis)) {
+      return node.style.paddingStart;
+    }
+
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.paddingLeft;   break;
+      case 'row-reverse':    value = node.style.paddingRight;  break;
+      case 'column':         value = node.style.paddingTop;    break;
+      case 'column-reverse': value = node.style.paddingBottom; break;
+    }
+
+    if (value != null && value >= 0) {
+      return value;
+    }
+
+    if (node.style.padding !== undefined && node.style.padding >= 0) {
+      return node.style.padding;
+    }
+
+    return 0;
   }
 
   function getTrailingPadding(node, axis) {
-    return getPadding(node, getTrailingLocations(axis));
-  }
+    if (node.style.paddingEnd !== undefined && node.style.paddingEnd >= 0
+        && isRowDirection(axis)) {
+      return node.style.paddingEnd;
+    }
 
-  function getBorder(node, locations) {
-    return getPositiveSpacing(node, 'border', 'Width', locations);
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.paddingRight;  break;
+      case 'row-reverse':    value = node.style.paddingLeft;   break;
+      case 'column':         value = node.style.paddingBottom; break;
+      case 'column-reverse': value = node.style.paddingTop;    break;
+    }
+
+    if (value != null && value >= 0) {
+      return value;
+    }
+
+    if (node.style.padding !== undefined && node.style.padding >= 0) {
+      return node.style.padding;
+    }
+
+    return 0;
   }
 
   function getLeadingBorder(node, axis) {
-    return getBorder(node, getLeadingLocations(axis));
+    if (node.style.borderStartWidth !== undefined && node.style.borderStartWidth >= 0
+        && isRowDirection(axis)) {
+      return node.style.borderStartWidth;
+    }
+
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.borderLeftWidth;   break;
+      case 'row-reverse':    value = node.style.borderRightWidth;  break;
+      case 'column':         value = node.style.borderTopWidth;    break;
+      case 'column-reverse': value = node.style.borderBottomWidth; break;
+    }
+
+    if (value != null && value >= 0) {
+      return value;
+    }
+
+    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
+      return node.style.borderWidth;
+    }
+
+    return 0;
   }
 
   function getTrailingBorder(node, axis) {
-    return getBorder(node, getTrailingLocations(axis));
+    if (node.style.borderEndWidth !== undefined && node.style.borderEndWidth >= 0
+        && isRowDirection(axis)) {
+      return node.style.borderEndWidth;
+    }
+
+    var value = null;
+    switch (axis) {
+      case 'row':            value = node.style.borderRightWidth;  break;
+      case 'row-reverse':    value = node.style.borderLeftWidth;   break;
+      case 'column':         value = node.style.borderBottomWidth; break;
+      case 'column-reverse': value = node.style.borderTopWidth;    break;
+    }
+
+    if (value != null && value >= 0) {
+      return value;
+    }
+
+    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
+      return node.style.borderWidth;
+    }
+
+    return 0;
   }
@@ -223,3 +277,3 @@
   function getJustifyContent(node) {
-    if ('justifyContent' in node.style) {
+    if (node.style.justifyContent) {
       return node.style.justifyContent;
@@ -231,3 +285,3 @@ }
   function getAlignContent(node) {
-    if ('alignContent' in node.style) {
+    if (node.style.alignContent) {
       return node.style.alignContent;
@@ -239,6 +293,6 @@ }
   function getAlignItem(node, child) {
-    if ('alignSelf' in child.style) {
+    if (child.style.alignSelf) {
       return child.style.alignSelf;
     }
-    if ('alignItems' in node.style) {
+    if (node.style.alignItems) {
       return node.style.alignItems;
@@ -263,3 +317,3 @@ }
     var direction;
-    if ('direction' in node.style) {
+    if (node.style.direction) {
       direction = node.style.direction;
@@ -278,3 +332,3 @@ } else {
   function getFlexDirection(node) {
-    if ('flexDirection' in node.style) {
+    if (node.style.flexDirection) {
       return node.style.flexDirection;
@@ -294,3 +348,3 @@ }
   function getPositionType(node) {
-    if ('position' in node.style) {
+    if (node.style.position) {
       return node.style.position;
@@ -301,10 +355,6 @@ }
 
-  function getFlex(node) {
-    return node.style.flex;
-  }
-
   function isFlex(node) {
     return (
       getPositionType(node) === CSS_POSITION_RELATIVE &&
-      getFlex(node) > 0
+      node.style.flex > 0
     );
@@ -322,15 +372,15 @@ }
   function isDimDefined(node, axis) {
-    return !isUndefined(node.style[dim[axis]]) && node.style[dim[axis]] >= 0;
+    return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
   }
 
   function isPosDefined(node, pos) {
-    return !isUndefined(node.style[pos]);
+    return node.style[pos] !== undefined;
   }
 
   function isMeasureDefined(node) {
-    return 'measure' in node.style;
+    return node.style.measure !== undefined;
   }
 
   function getPosition(node, pos) {
-    if (pos in node.style) {
+    if (node.style[pos] !== undefined) {
       return node.style[pos];
@@ -357,6 +407,6 @@ }
     var boundValue = value;
-    if (!isUndefined(max) && max >= 0 && boundValue > max) {
+    if (max !== undefined && max >= 0 && boundValue > max) {
       boundValue = max;
     }
-    if (!isUndefined(min) && min >= 0 && boundValue < min) {
+    if (min !== undefined && min >= 0 && boundValue < min) {
       boundValue = min;
@@ -377,3 +427,3 @@ }
     // The parent already computed us a width or height. We just skip it
-    if (!isUndefined(node.layout[dim[axis]])) {
+    if (node.layout[dim[axis]] !== undefined) {
       return;
@@ -401,3 +451,3 @@ }
   function getRelativePosition(node, axis) {
-    if (leading[axis] in node.style) {
+    if (node.style[leading[axis]] !== undefined) {
       return getPosition(node, leading[axis]);
@@ -408,7 +458,7 @@ }
 
-  function layoutNode(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
+  function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
     var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
-    var/*css_flex_direction_t*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
-    var/*css_flex_direction_t*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
-    var/*css_flex_direction_t*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
 
@@ -433,7 +483,14 @@ // Handle width and height style attributes
 
+    // Inline immutable values from the target node to avoid excessive method
+    // invocations during the layout calculation.
+    var/*int*/ childCount = node.children.length;
+    var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
+
     if (isMeasureDefined(node)) {
+      var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
+
       var/*float*/ width = CSS_UNDEFINED;
       if (isDimDefined(node, resolvedRowAxis)) {
         width = node.style.width;
-      } else if (!isUndefined(node.layout[dim[resolvedRowAxis]])) {
+      } else if (isResolvedRowDimDefined) {
         width = node.layout[dim[resolvedRowAxis]];
@@ -444,3 +501,3 @@ } else {
       }
-      width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
+      width -= paddingAndBorderAxisResolvedRow;
 
@@ -450,4 +507,3 @@ // We only need to give a dimension for the text if we haven't got any
       // the element is flexible.
-      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
-        isUndefined(node.layout[dim[resolvedRowAxis]]);
+      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
       var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
@@ -465,3 +521,3 @@ isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
           node.layout.width = measureDim.width +
-            getPaddingAndBorderAxis(node, resolvedRowAxis);
+            paddingAndBorderAxisResolvedRow;
         }
@@ -473,3 +529,3 @@ if (isColumnUndefined) {
       }
-      if (node.children.length === 0) {
+      if (childCount === 0) {
         return;
@@ -479,50 +535,26 @@ }
 
+    var/*bool*/ isNodeFlexWrap = isFlexWrap(node);
+
+    var/*css_justify_t*/ justifyContent = getJustifyContent(node);
+
+    var/*float*/ leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
+    var/*float*/ leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
+    var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
+    var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
+
+    var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]);
+    var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]);
+    var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
+
     var/*int*/ i;
     var/*int*/ ii;
     var/*css_node_t**/ child;
-    var/*css_flex_direction_t*/ axis;
+    var/*(c)!css_flex_direction_t*//*(java)!int*/ axis;
 
-    // Pre-fill some dimensions straight from the parent
-    for (i = 0; i < node.children.length; ++i) {
-      child = node.children[i];
-      // Pre-fill cross axis dimensions when the child is using stretch before
-      // we call the recursive layout pass
-      if (getAlignItem(node, child) === CSS_ALIGN_STRETCH &&
-          getPositionType(child) === CSS_POSITION_RELATIVE &&
-          !isUndefined(node.layout[dim[crossAxis]]) &&
-          !isDimDefined(child, crossAxis)) {
-        child.layout[dim[crossAxis]] = fmaxf(
-          boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
-            getPaddingAndBorderAxis(node, crossAxis) -
-            getMarginAxis(child, crossAxis)),
-          // You never want to go smaller than padding
-          getPaddingAndBorderAxis(child, crossAxis)
-        );
-      } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
-        // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
-        // left and right or top and bottom).
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (!isUndefined(node.layout[dim[axis]]) &&
-              !isDimDefined(child, axis) &&
-              isPosDefined(child, leading[axis]) &&
-              isPosDefined(child, trailing[axis])) {
-            child.layout[dim[axis]] = fmaxf(
-              boundAxis(child, axis, node.layout[dim[axis]] -
-                getPaddingAndBorderAxis(node, axis) -
-                getMarginAxis(child, axis) -
-                getPosition(child, leading[axis]) -
-                getPosition(child, trailing[axis])),
-              // You never want to go smaller than padding
-              getPaddingAndBorderAxis(child, axis)
-            );
-          }
-        }
-      }
-    }
+    var/*css_node_t**/ firstAbsoluteChild = null;
+    var/*css_node_t**/ currentAbsoluteChild = null;
 
     var/*float*/ definedMainDim = CSS_UNDEFINED;
-    if (!isUndefined(node.layout[dim[mainAxis]])) {
-      definedMainDim = node.layout[dim[mainAxis]] -
-          getPaddingAndBorderAxis(node, mainAxis);
+    if (isMainDimDefined) {
+      definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain;
     }
@@ -539,3 +571,3 @@
     var/*int*/ linesCount = 0;
-    while (endLine < node.children.length) {
+    while (endLine < childCount) {
       // <Loop A> Layout non flexible children and count children by type
@@ -555,5 +587,78 @@
 
+      // Use the line loop to position children in the main axis for as long
+      // as they are using a simple stacking behaviour. Children that are
+      // immediately stacked in the initial loop will not be touched again
+      // in <Loop C>.
+      var/*bool*/ isSimpleStackMain =
+          (isMainDimDefined && justifyContent === CSS_JUSTIFY_FLEX_START) ||
+          (!isMainDimDefined && justifyContent !== CSS_JUSTIFY_CENTER);
+      var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine);
+
+      // Use the initial line loop to position children in the cross axis for
+      // as long as they are relatively positioned with alignment STRETCH or
+      // FLEX_START. Children that are immediately stacked in the initial loop
+      // will not be touched again in <Loop D>.
+      var/*bool*/ isSimpleStackCross = true;
+      var/*int*/ firstComplexCross = childCount;
+
+      var/*css_node_t**/ firstFlexChild = null;
+      var/*css_node_t**/ currentFlexChild = null;
+
+      var/*float*/ mainDim = leadingPaddingAndBorderMain;
+      var/*float*/ crossDim = 0;
+
       var/*float*/ maxWidth;
-      for (i = startLine; i < node.children.length; ++i) {
+      for (i = startLine; i < childCount; ++i) {
         child = node.children[i];
+        child.lineIndex = linesCount;
+
+        child.nextAbsoluteChild = null;
+        child.nextFlexChild = null;
+
+        var/*css_align_t*/ alignItem = getAlignItem(node, child);
+
+        // Pre-fill cross axis dimensions when the child is using stretch before
+        // we call the recursive layout pass
+        if (alignItem === CSS_ALIGN_STRETCH &&
+            getPositionType(child) === CSS_POSITION_RELATIVE &&
+            isCrossDimDefined &&
+            !isDimDefined(child, crossAxis)) {
+          child.layout[dim[crossAxis]] = fmaxf(
+            boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
+              paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
+            // You never want to go smaller than padding
+            getPaddingAndBorderAxis(child, crossAxis)
+          );
+        } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
+          // Store a private linked list of absolutely positioned children
+          // so that we can efficiently traverse them later.
+          if (firstAbsoluteChild === null) {
+            firstAbsoluteChild = child;
+          }
+          if (currentAbsoluteChild !== null) {
+            currentAbsoluteChild.nextAbsoluteChild = child;
+          }
+          currentAbsoluteChild = child;
+
+          // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
+          // left and right or top and bottom).
+          for (ii = 0; ii < 2; ii++) {
+            axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
+            if (!isUndefined(node.layout[dim[axis]]) &&
+                !isDimDefined(child, axis) &&
+                isPosDefined(child, leading[axis]) &&
+                isPosDefined(child, trailing[axis])) {
+              child.layout[dim[axis]] = fmaxf(
+                boundAxis(child, axis, node.layout[dim[axis]] -
+                  getPaddingAndBorderAxis(node, axis) -
+                  getMarginAxis(child, axis) -
+                  getPosition(child, leading[axis]) -
+                  getPosition(child, trailing[axis])),
+                // You never want to go smaller than padding
+                getPaddingAndBorderAxis(child, axis)
+              );
+            }
+          }
+        }
+
         var/*float*/ nextContentDim = 0;
@@ -563,6 +668,16 @@
         // dimension for the node.
-        if (!isUndefined(node.layout[dim[mainAxis]]) && isFlex(child)) {
+        if (isMainDimDefined && isFlex(child)) {
           flexibleChildrenCount++;
-          totalFlexible += getFlex(child);
+          totalFlexible += child.style.flex;
 
+          // Store a private linked list of flexible children so that we can
+          // efficiently traverse them later.
+          if (firstFlexChild === null) {
+            firstFlexChild = child;
+          }
+          if (currentFlexChild !== null) {
+            currentFlexChild.nextFlexChild = child;
+          }
+          currentFlexChild = child;
+
           // Even if we don't know its exact size yet, we already know the padding,
@@ -577,10 +692,10 @@ // border and margin. We'll use this partial information, which represents
           maxWidth = CSS_UNDEFINED;
-          if (!isRowDirection(mainAxis)) {
-            maxWidth = parentMaxWidth -
-              getMarginAxis(node, resolvedRowAxis) -
-              getPaddingAndBorderAxis(node, resolvedRowAxis);
-
+          if (!isMainRowDirection) {
             if (isDimDefined(node, resolvedRowAxis)) {
               maxWidth = node.layout[dim[resolvedRowAxis]] -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
+                paddingAndBorderAxisResolvedRow;
+            } else {
+              maxWidth = parentMaxWidth -
+                getMarginAxis(node, resolvedRowAxis) -
+                paddingAndBorderAxisResolvedRow;
             }
@@ -604,4 +719,4 @@ }
         // The element we are about to add would make us go to the next line
-        if (isFlexWrap(node) &&
-            !isUndefined(node.layout[dim[mainAxis]]) &&
+        if (isNodeFlexWrap &&
+            isMainDimDefined &&
             mainContentDim + nextContentDim > definedMainDim &&
@@ -615,2 +730,40 @@ // If there's only one element, then it's bigger than the content
         }
+
+        // Disable simple stacking in the main axis for the current line as
+        // we found a non-trivial child. The remaining children will be laid out
+        // in <Loop C>.
+        if (isSimpleStackMain &&
+            (getPositionType(child) !== CSS_POSITION_RELATIVE || isFlex(child))) {
+          isSimpleStackMain = false;
+          firstComplexMain = i;
+        }
+
+        // Disable simple stacking in the cross axis for the current line as
+        // we found a non-trivial child. The remaining children will be laid out
+        // in <Loop D>.
+        if (isSimpleStackCross &&
+            (getPositionType(child) !== CSS_POSITION_RELATIVE ||
+                (alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
+                isUndefined(child.layout[dim[crossAxis]]))) {
+          isSimpleStackCross = false;
+          firstComplexCross = i;
+        }
+
+        if (isSimpleStackMain) {
+          child.layout[pos[mainAxis]] += mainDim;
+          if (isMainDimDefined) {
+            setTrailingPosition(node, child, mainAxis);
+          }
+
+          mainDim += getDimWithMargin(child, mainAxis);
+          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+        }
+
+        if (isSimpleStackCross) {
+          child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
+          if (isCrossDimDefined) {
+            setTrailingPosition(node, child, crossAxis);
+          }
+        }
+
         alreadyComputedNextLayout = 0;
@@ -631,3 +784,3 @@ mainContentDim += nextContentDim;
       var/*float*/ remainingMainDim = 0;
-      if (!isUndefined(node.layout[dim[mainAxis]])) {
+      if (isMainDimDefined) {
         remainingMainDim = definedMainDim - mainContentDim;
@@ -645,17 +798,16 @@ } else {
 
-        // Iterate over every child in the axis. If the flex share of remaining
-        // space doesn't meet min/max bounds, remove this child from flex
-        // calculations.
-        for (i = startLine; i < endLine; ++i) {
-          child = node.children[i];
-          if (isFlex(child)) {
-            baseMainDim = flexibleMainDim * getFlex(child) +
-                getPaddingAndBorderAxis(child, mainAxis);
-            boundMainDim = boundAxis(child, mainAxis, baseMainDim);
+        // If the flex share of remaining space doesn't meet min/max bounds,
+        // remove this child from flex calculations.
+        currentFlexChild = firstFlexChild;
+        while (currentFlexChild !== null) {
+          baseMainDim = flexibleMainDim * currentFlexChild.style.flex +
+              getPaddingAndBorderAxis(currentFlexChild, mainAxis);
+          boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
 
-            if (baseMainDim !== boundMainDim) {
-              remainingMainDim -= boundMainDim;
-              totalFlexible -= getFlex(child);
-            }
+          if (baseMainDim !== boundMainDim) {
+            remainingMainDim -= boundMainDim;
+            totalFlexible -= currentFlexChild.style.flex;
           }
+
+          currentFlexChild = currentFlexChild.nextFlexChild;
         }
@@ -669,27 +821,28 @@ 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 (i = startLine; i < endLine; ++i) {
-          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]] = boundAxis(child, mainAxis,
-              flexibleMainDim * getFlex(child) + getPaddingAndBorderAxis(child, mainAxis)
-            );
 
-            maxWidth = CSS_UNDEFINED;
-            if (isDimDefined(node, resolvedRowAxis)) {
-              maxWidth = node.layout[dim[resolvedRowAxis]] -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
-            } else if (!isRowDirection(mainAxis)) {
-              maxWidth = parentMaxWidth -
-                getMarginAxis(node, resolvedRowAxis) -
-                getPaddingAndBorderAxis(node, resolvedRowAxis);
-            }
+        currentFlexChild = firstFlexChild;
+        while (currentFlexChild !== null) {
+          // At this point we know the final size of the element in the main
+          // dimension
+          currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
+            flexibleMainDim * currentFlexChild.style.flex +
+                getPaddingAndBorderAxis(currentFlexChild, mainAxis)
+          );
 
-            // And we recursively call the layout algorithm for this child
-            layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
+          maxWidth = CSS_UNDEFINED;
+          if (isDimDefined(node, resolvedRowAxis)) {
+            maxWidth = node.layout[dim[resolvedRowAxis]] -
+              paddingAndBorderAxisResolvedRow;
+          } else if (!isMainRowDirection) {
+            maxWidth = parentMaxWidth -
+              getMarginAxis(node, resolvedRowAxis) -
+              paddingAndBorderAxisResolvedRow;
           }
+
+          // And we recursively call the layout algorithm for this child
+          layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
+
+          child = currentFlexChild;
+          currentFlexChild = currentFlexChild.nextFlexChild;
+          child.nextFlexChild = null;
         }
@@ -699,4 +852,3 @@
       // space available
-      } else {
-        var/*css_justify_t*/ justifyContent = getJustifyContent(node);
+      } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) {
         if (justifyContent === CSS_JUSTIFY_CENTER) {
@@ -728,9 +880,6 @@ leadingMainDim = remainingMainDim / 2;
       // container!
-      var/*float*/ crossDim = 0;
-      var/*float*/ mainDim = leadingMainDim +
-        getLeadingPaddingAndBorder(node, mainAxis);
+      mainDim += leadingMainDim;
 
-      for (i = startLine; i < endLine; ++i) {
+      for (i = firstComplexMain; i < endLine; ++i) {
         child = node.children[i];
-        child.lineIndex = linesCount;
 
@@ -751,17 +900,17 @@ if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
           // Define the trailing position accordingly.
-          if (!isUndefined(node.layout[dim[mainAxis]])) {
+          if (isMainDimDefined) {
             setTrailingPosition(node, child, mainAxis);
           }
-        }
 
-        // Now that we placed the element, we need to update the variables
-        // We only need to do that for relative elements. Absolute elements
-        // do not take part in that phase.
-        if (getPositionType(child) === CSS_POSITION_RELATIVE) {
-          // The main dimension is the sum of all the elements dimension plus
-          // the spacing.
-          mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
-          // The cross dimension is the max of the elements dimension since there
-          // can only be one element in that cross dimension.
-          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+          // Now that we placed the element, we need to update the variables
+          // We only need to do that for relative elements. Absolute elements
+          // do not take part in that phase.
+          if (getPositionType(child) === CSS_POSITION_RELATIVE) {
+            // The main dimension is the sum of all the elements dimension plus
+            // the spacing.
+            mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
+            // The cross dimension is the max of the elements dimension since there
+            // can only be one element in that cross dimension.
+            crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
+          }
         }
@@ -771,3 +920,3 @@ }
       var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]];
-      if (isUndefined(node.layout[dim[crossAxis]])) {
+      if (!isCrossDimDefined) {
         containerCrossAxis = fmaxf(
@@ -777,4 +926,4 @@ // For the cross dim, we add both sides at the end because the value
           // can mess this computation otherwise
-          boundAxis(node, crossAxis, crossDim + getPaddingAndBorderAxis(node, crossAxis)),
-          getPaddingAndBorderAxis(node, crossAxis)
+          boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
+          paddingAndBorderAxisCross
         );
@@ -784,3 +933,3 @@ }
       // <Loop D> Position elements in the cross axis
-      for (i = startLine; i < endLine; ++i) {
+      for (i = firstComplexCross; i < endLine; ++i) {
         child = node.children[i];
@@ -798,3 +947,3 @@
         } else {
-          var/*float*/ leadingCrossDim = getLeadingPaddingAndBorder(node, crossAxis);
+          var/*float*/ leadingCrossDim = leadingPaddingAndBorderCross;
 
@@ -804,11 +953,13 @@ // For a relative children, we're either using alignItems (parent) or
           if (getPositionType(child) === CSS_POSITION_RELATIVE) {
+            /*eslint-disable */
+            // This variable is intentionally re-defined as the code is transpiled to a block scope language
             var/*css_align_t*/ alignItem = getAlignItem(node, child);
+            /*eslint-enable */
             if (alignItem === CSS_ALIGN_STRETCH) {
               // You can only stretch if the dimension has not already been set
               // previously.
-              if (!isDimDefined(child, crossAxis)) {
+              if (isUndefined(child.layout[dim[crossAxis]])) {
                 child.layout[dim[crossAxis]] = fmaxf(
                   boundAxis(child, crossAxis, containerCrossAxis -
-                    getPaddingAndBorderAxis(node, crossAxis) -
-                    getMarginAxis(child, crossAxis)),
+                    paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
                   // You never want to go smaller than padding
@@ -822,4 +973,3 @@ getPaddingAndBorderAxis(child, crossAxis)
               var/*float*/ remainingCrossDim = containerCrossAxis -
-                getPaddingAndBorderAxis(node, crossAxis) -
-                getDimWithMargin(child, crossAxis);
+                paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
 
@@ -838,3 +988,3 @@ if (alignItem === CSS_ALIGN_CENTER) {
           // Define the trailing position accordingly.
-          if (!isUndefined(node.layout[dim[crossAxis]])) {
+          if (isCrossDimDefined) {
             setTrailingPosition(node, child, crossAxis);
@@ -864,10 +1014,9 @@ }
     //
-    if (linesCount > 1 &&
-        !isUndefined(node.layout[dim[crossAxis]])) {
+    if (linesCount > 1 && isCrossDimDefined) {
       var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
-          getPaddingAndBorderAxis(node, crossAxis);
+          paddingAndBorderAxisCross;
       var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
 
       var/*float*/ crossDimLead = 0;
-      var/*float*/ currentLead = getLeadingPaddingAndBorder(node, crossAxis);
+      var/*float*/ currentLead = leadingPaddingAndBorderCross;
 
@@ -891,3 +1040,3 @@ var/*css_align_t*/ alignContent = getAlignContent(node);
         var/*float*/ lineHeight = 0;
-        for (ii = startIndex; ii < node.children.length; ++ii) {
+        for (ii = startIndex; ii < childCount; ++ii) {
           child = node.children[ii];
@@ -940,3 +1089,3 @@ if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
     // by the container, then we set it via the children.
-    if (isUndefined(node.layout[dim[mainAxis]])) {
+    if (!isMainDimDefined) {
       node.layout[dim[mainAxis]] = fmaxf(
@@ -947,9 +1096,12 @@ // We're missing the last padding at this point to get the final
         // We can never assign a width smaller than the padding and borders
-        getPaddingAndBorderAxis(node, mainAxis)
+        paddingAndBorderAxisMain
       );
 
-      needsMainTrailingPos = true;
+      if (mainAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
+          mainAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+        needsMainTrailingPos = true;
+      }
     }
 
-    if (isUndefined(node.layout[dim[crossAxis]])) {
+    if (!isCrossDimDefined) {
       node.layout[dim[crossAxis]] = fmaxf(
@@ -959,7 +1111,10 @@ // For the cross dim, we add both sides at the end because the value
         // can mess this computation otherwise
-        boundAxis(node, crossAxis, linesCrossDim + getPaddingAndBorderAxis(node, crossAxis)),
-        getPaddingAndBorderAxis(node, crossAxis)
+        boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
+        paddingAndBorderAxisCross
       );
 
-      needsCrossTrailingPos = true;
+      if (crossAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
+          crossAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+        needsCrossTrailingPos = true;
+      }
     }
@@ -969,3 +1124,3 @@
     if (needsMainTrailingPos || needsCrossTrailingPos) {
-      for (i = 0; i < node.children.length; ++i) {
+      for (i = 0; i < childCount; ++i) {
         child = node.children[i];
@@ -984,40 +1139,86 @@
     // <Loop G> Calculate dimensions for absolutely positioned elements
-    for (i = 0; i < node.children.length; ++i) {
-      child = node.children[i];
-      if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
-        // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
-        // left and right or top and bottom).
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (!isUndefined(node.layout[dim[axis]]) &&
-              !isDimDefined(child, axis) &&
-              isPosDefined(child, leading[axis]) &&
-              isPosDefined(child, trailing[axis])) {
-            child.layout[dim[axis]] = fmaxf(
-              boundAxis(child, axis, node.layout[dim[axis]] -
-                getBorderAxis(node, axis) -
-                getMarginAxis(child, axis) -
-                getPosition(child, leading[axis]) -
-                getPosition(child, trailing[axis])
-              ),
-              // You never want to go smaller than padding
-              getPaddingAndBorderAxis(child, axis)
-            );
-          }
+    currentAbsoluteChild = firstAbsoluteChild;
+    while (currentAbsoluteChild !== null) {
+      // Pre-fill dimensions when using absolute position and both offsets for
+      // the axis are defined (either both left and right or top and bottom).
+      for (ii = 0; ii < 2; ii++) {
+        axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
+
+        if (!isUndefined(node.layout[dim[axis]]) &&
+            !isDimDefined(currentAbsoluteChild, axis) &&
+            isPosDefined(currentAbsoluteChild, leading[axis]) &&
+            isPosDefined(currentAbsoluteChild, trailing[axis])) {
+          currentAbsoluteChild.layout[dim[axis]] = fmaxf(
+            boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] -
+              getBorderAxis(node, axis) -
+              getMarginAxis(currentAbsoluteChild, axis) -
+              getPosition(currentAbsoluteChild, leading[axis]) -
+              getPosition(currentAbsoluteChild, trailing[axis])
+            ),
+            // You never want to go smaller than padding
+            getPaddingAndBorderAxis(currentAbsoluteChild, axis)
+          );
         }
-        for (ii = 0; ii < 2; ii++) {
-          axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (isPosDefined(child, trailing[axis]) &&
-              !isPosDefined(child, leading[axis])) {
-            child.layout[leading[axis]] =
-              node.layout[dim[axis]] -
-              child.layout[dim[axis]] -
-              getPosition(child, trailing[axis]);
-          }
+
+        if (isPosDefined(currentAbsoluteChild, trailing[axis]) &&
+            !isPosDefined(currentAbsoluteChild, leading[axis])) {
+          currentAbsoluteChild.layout[leading[axis]] =
+            node.layout[dim[axis]] -
+            currentAbsoluteChild.layout[dim[axis]] -
+            getPosition(currentAbsoluteChild, trailing[axis]);
         }
       }
+
+      child = currentAbsoluteChild;
+      currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild;
+      child.nextAbsoluteChild = null;
     }
   }
 
+  function layoutNode(node, parentMaxWidth, parentDirection) {
+    node.shouldUpdate = true;
+
+    var direction = node.style.direction || CSS_DIRECTION_LTR;
+    var skipLayout =
+      !node.isDirty &&
+      node.lastLayout &&
+      node.lastLayout.requestedHeight === node.layout.height &&
+      node.lastLayout.requestedWidth === node.layout.width &&
+      node.lastLayout.parentMaxWidth === parentMaxWidth &&
+      node.lastLayout.direction === direction;
+
+    if (skipLayout) {
+      node.layout.width = node.lastLayout.width;
+      node.layout.height = node.lastLayout.height;
+      node.layout.top = node.lastLayout.top;
+      node.layout.left = node.lastLayout.left;
+    } else {
+      if (!node.lastLayout) {
+        node.lastLayout = {};
+      }
+
+      node.lastLayout.requestedWidth = node.layout.width;
+      node.lastLayout.requestedHeight = node.layout.height;
+      node.lastLayout.parentMaxWidth = parentMaxWidth;
+      node.lastLayout.direction = direction;
+
+      // Reset child layouts
+      node.children.forEach(function(child) {
+        child.layout.width = undefined;
+        child.layout.height = undefined;
+        child.layout.top = 0;
+        child.layout.left = 0;
+      });
+
+      layoutNodeImpl(node, parentMaxWidth, parentDirection);
+
+      node.lastLayout.width = node.layout.width;
+      node.lastLayout.height = node.layout.height;
+      node.lastLayout.top = node.layout.top;
+      node.lastLayout.left = node.layout.left;
+    }
+  }
+
   return {
+    layoutNodeImpl: layoutNodeImpl,
     computeLayout: layoutNode,
@@ -1029,6 +1230,6 @@ fillNodes: fillNodes
 // This module export is only used for the purposes of unit testing this file. When
-// the library is packaged this file is included within css-layout.js which forms 
+// the library is packaged this file is included within css-layout.js which forms
 // the public API.
 if (typeof exports === 'object') {
   module.exports = computeLayout;
-}
+}

src/transpile.js

@@ -11,5 +11,6 @@ /**
 var layoutTestUtils = require('./Layout-test-utils.js');
-var computeLayout = require('./Layout.js').computeLayout;
+var computeLayout = require('./Layout.js').layoutNodeImpl;
 var fs = require('fs');
 var JavaTranspiler = require('./JavaTranspiler.js');
+var CSharpTranspiler = require('./CSharpTranspiler.js');
 
@@ -247,2 +248,3 @@ var currentTest = '';
     .replace('node.style.measure', 'node.measure')
+    .replace(/null/g, 'NULL')
     .replace(/\.children\.length/g, '.children_count')
@@ -256,2 +258,4 @@ .replace(/\.width/g, '.dimensions[CSS_WIDTH]')
     .replace(/\.lineIndex/g, '.line_index')
+    .replace(/\.nextAbsoluteChild/g, '.next_absolute_child')
+    .replace(/\.nextFlexChild/g, '.next_flex_child')
     .replace(/layout\[dim/g, 'layout.dimensions[dim')
@@ -267,2 +271,8 @@ .replace(/layout\[pos/g, 'layout.position[pos')
     .replace(/parent\./g, 'parent->')
+    .replace(/currentAbsoluteChild\./g, 'currentAbsoluteChild->')
+    .replace(/currentFlexChild\./g, 'currentFlexChild->')
+    .replace(/getPositionType\((.+?)\)/g, '$1->style.position_type')
+    .replace(/getJustifyContent\((.+?)\)/g, '$1->style.justify_content')
+    .replace(/getAlignContent\((.+?)\)/g, '$1->style.align_content')
+    .replace(/var\/\*\(c\)!([^*]+)\*\//g, '$1')
     .replace(/var\/\*([^\/]+)\*\//g, '$1')
@@ -308,1 +318,4 @@ .replace(/ === /g, ' == ')
 generateFile(__dirname + '/java/tests/com/facebook/csslayout/LayoutEngineTest.java', JavaTranspiler.transpileCTestsArray(allTestsInC));
+generateFile(__dirname + '/csharp/Facebook.CSSLayout/LayoutEngine.cs', CSharpTranspiler.transpileLayoutEngine(computeLayout.toString()));
+generateFile(__dirname + '/csharp/Facebook.CSSLayout.Tests/TestConstants.cs', CSharpTranspiler.transpileCConstDefs(makeConstDefs()));
+generateFile(__dirname + '/csharp/Facebook.CSSLayout.Tests/LayoutEngineTest.cs', CSharpTranspiler.transpileCTestsArray(allTestsInC));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1746881

increased by38.26%

Number of package files

95

increased by55.74%

Lines of code

5581

increased by8.18%

Number of lines in readme file

148

increased by4.96%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

20

increased by11.11%

No dependency changes