Implement flex properties in java version as well

Summary: Implement flexShrink flexGrow and flexBasis in java as well because it will take a bit until the java code is removed

Reviewed By: lucasr

Differential Revision: D3753231

fbshipit-source-id: ea41d887cd99d1f03d2bc876a2fd7141dbe48320

java/com/facebook/csslayout/CSSLayout.java

@@ -31,7 +31,7 @@ public class CSSLayout {
   public float[] dimensions = new float[2];
   public CSSDirection direction = CSSDirection.LTR;
 
-  public float flexBasis;
+  public float computedFlexBasis;
 
   public int generationCount;
   public CSSDirection lastParentDirection;
@@ -51,7 +51,7 @@ public class CSSLayout {
     Arrays.fill(dimensions, CSSConstants.UNDEFINED);
     direction = CSSDirection.LTR;
 
-    flexBasis = 0;
+    computedFlexBasis = 0;
 
     generationCount = 0;
     lastParentDirection = null;

java/com/facebook/csslayout/CSSNode.java

@@ -361,17 +361,72 @@ public class CSSNode implements CSSNodeAPI<CSSNode> {
    */
   @Override
   public float getFlex() {
-    return style.flex;
+    if (style.flexGrow > 0) {
+      return style.flexGrow;
+    } else if (style.flexShrink > 0) {
+      return -style.flexShrink;
+    }
+
+    return 0;
   }
 
   @Override
   public void setFlex(float flex) {
-    if (!valuesEqual(style.flex, flex)) {
+    if (CSSConstants.isUndefined(flex) || flex == 0) {
-      style.flex = flex;
+      setFlexGrow(0);
+      setFlexShrink(0);
+      setFlexBasis(CSSConstants.UNDEFINED);
+    } else if (flex > 0) {
+      setFlexGrow(flex);
+      setFlexShrink(0);
+      setFlexBasis(0);
+    } else {
+      setFlexGrow(0);
+      setFlexShrink(-flex);
+      setFlexBasis(CSSConstants.UNDEFINED);
+    }
+  }
+
+  @Override
+  public float getFlexGrow() {
+    return style.flexGrow;
+  }
+
+  @Override
+  public void setFlexGrow(float flexGrow) {
+    if (!valuesEqual(style.flexGrow, flexGrow)) {
+      style.flexGrow = flexGrow;
       dirty();
     }
   }
 
+  @Override
+  public float getFlexShrink() {
+    return style.flexShrink;
+  }
+
+  @Override
+  public void setFlexShrink(float flexShrink) {
+    if (!valuesEqual(style.flexShrink, flexShrink)) {
+      style.flexShrink = flexShrink;
+      dirty();
+    }
+  }
+
+  @Override
+  public float getFlexBasis() {
+    return style.flexBasis;
+  }
+
+  @Override
+  public void setFlexBasis(float flexBasis) {
+    if (!valuesEqual(style.flexBasis, flexBasis)) {
+      style.flexBasis = flexBasis;
+      dirty();
+    }
+  }
+
+
   /**
    * Get this node's margin, as defined by style + default margin.
    */

java/com/facebook/csslayout/CSSNodeAPI.java

@@ -54,6 +54,12 @@ public interface CSSNodeAPI<CSSNodeType extends CSSNodeAPI> {
   void setWrap(CSSWrap flexWrap);
   float getFlex();
   void setFlex(float flex);
+  float getFlexGrow();
+  void setFlexGrow(float flexGrow);
+  float getFlexShrink();
+  void setFlexShrink(float flexShrink);
+  float getFlexBasis();
+  void setFlexBasis(float flexBasis);
   Spacing getMargin();
   void setMargin(int spacingType, float margin);
   Spacing getPadding();

java/com/facebook/csslayout/CSSNodeJNI.java

@@ -293,6 +293,48 @@ public class CSSNodeJNI implements CSSNodeAPI<CSSNodeJNI> {
     jni_CSSNodeStyleSetFlex(mNativePointer, flex);
   }
 
+  private native float jni_CSSNodeStyleGetFlexGrow(long nativePointer);
+  @Override
+  public float getFlexGrow() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexGrow(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexGrow(long nativePointer, float flexGrow);
+  @Override
+  public void setFlexGrow(float flexGrow) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexGrow(mNativePointer, flexGrow);
+  }
+
+  private native float jni_CSSNodeStyleGetFlexShrink(long nativePointer);
+  @Override
+  public float getFlexShrink() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexShrink(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexShrink(long nativePointer, float flexShrink);
+  @Override
+  public void setFlexShrink(float flexShrink) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexShrink(mNativePointer, flexShrink);
+  }
+
+  private native float jni_CSSNodeStyleGetFlexBasis(long nativePointer);
+  @Override
+  public float getFlexBasis() {
+    assertNativeInstance();
+    return jni_CSSNodeStyleGetFlexBasis(mNativePointer);
+  }
+
+  private native void jni_CSSNodeStyleSetFlexBasis(long nativePointer, float flexBasis);
+  @Override
+  public void setFlexBasis(float flexBasis) {
+    assertNativeInstance();
+    jni_CSSNodeStyleSetFlexBasis(mNativePointer, flexBasis);
+  }
+
   private native float jni_CSSNodeStyleGetMargin(long nativePointer, int edge);
   @Override
   public Spacing getMargin() {

java/com/facebook/csslayout/CSSStyle.java

@@ -25,7 +25,9 @@ public class CSSStyle {
   public CSSPositionType positionType;
   public CSSWrap flexWrap;
   public CSSOverflow overflow;
-  public float flex;
+  public float flexGrow;
+  public float flexShrink;
+  public float flexBasis;
 
   public Spacing margin = new Spacing();
   public Spacing padding = new Spacing();
@@ -54,7 +56,9 @@ public class CSSStyle {
     positionType = CSSPositionType.RELATIVE;
     flexWrap = CSSWrap.NOWRAP;
     overflow = CSSOverflow.VISIBLE;
-    flex = 0f;
+    flexGrow = 0;
+    flexShrink = 0;
+    flexBasis = CSSConstants.UNDEFINED;
 
     margin.reset();
     padding.reset();

java/com/facebook/csslayout/LayoutEngine.java

@@ -23,8 +23,6 @@ import static com.facebook.csslayout.CSSLayout.POSITION_TOP;
  */
 public class LayoutEngine {
 
-  private static final boolean POSITIVE_FLEX_IS_AUTO = false;
-
   private static final int CSS_FLEX_DIRECTION_COLUMN =
       CSSFlexDirection.COLUMN.ordinal();
   private static final int CSS_FLEX_DIRECTION_COLUMN_REVERSE =
@@ -80,36 +78,15 @@ public class LayoutEngine {
   };
 
   private static boolean isFlexBasisAuto(CSSNode node) {
-    if (POSITIVE_FLEX_IS_AUTO) {
+    return CSSConstants.isUndefined(node.style.flexBasis);
-      // All flex values are auto.
-      return true;
-    } else {
-      // A flex value > 0 implies a basis of zero.
-      return node.style.flex <= 0;
-    }
   }
 
   private static float getFlexGrowFactor(CSSNode node) {
-    // Flex grow is implied by positive values for flex.
+    return node.style.flexGrow;
-    if (node.style.flex > 0) {
-      return node.style.flex;
-    }
-    return 0;
   }
 
   private static float getFlexShrinkFactor(CSSNode node) {
-    if (POSITIVE_FLEX_IS_AUTO) {
+    return node.style.flexShrink;
-      // A flex shrink factor of 1 is implied by non-zero values for flex.
-      if (node.style.flex != 0) {
-        return 1;
-      }
-    } else {
-      // A flex shrink factor of 1 is implied by negative values for flex.
-      if (node.style.flex < 0) {
-        return 1;
-      }
-    }
-    return 0;
   }
 
 
@@ -712,15 +689,15 @@ public class LayoutEngine {
         if (isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0)) {
 
           // The width is definite, so use that as the flex basis.
-          child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
+          child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_WIDTH], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]))));
         } else if (!isMainAxisRow && (child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0)) {
 
           // The height is definite, so use that as the flex basis.
-          child.layout.flexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
+          child.layout.computedFlexBasis = Math.max(child.style.dimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN])) + (child.style.padding.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]) + child.style.border.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]))));
         } else if (!isFlexBasisAuto(child) && !Float.isNaN(availableInnerMainDim)) {
 
           // If the basis isn't 'auto', it is assumed to be zero.
-          child.layout.flexBasis = Math.max(0, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
+          child.layout.computedFlexBasis = Math.max(child.style.flexBasis, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
         } else {
 
           // Compute the flex basis and hypothetical main size (i.e. the clamped flex basis).
@@ -778,7 +755,7 @@ public class LayoutEngine {
           // Measure the child
           layoutNodeInternal(layoutContext, child, childWidth, childHeight, direction, childWidthMeasureMode, childHeightMeasureMode, false, "measure");
 
-          child.layout.flexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
+          child.layout.computedFlexBasis = Math.max(isMainAxisRow ? child.layout.measuredDimensions[DIMENSION_WIDTH] : child.layout.measuredDimensions[DIMENSION_HEIGHT], ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))));
         }
       }
     }
@@ -825,7 +802,7 @@ public class LayoutEngine {
         child.lineIndex = lineCount;
 
         if (child.style.positionType != CSSPositionType.ABSOLUTE) {
-          float outerFlexBasis = child.layout.flexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
+          float outerFlexBasis = child.layout.computedFlexBasis + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]));
 
           // If this is a multi-line flow and this item pushes us over the available size, we've
           // hit the end of the current line. Break out of the loop and lay out the current line.
@@ -836,12 +813,12 @@ public class LayoutEngine {
           sizeConsumedOnCurrentLine += outerFlexBasis;
           itemsOnLine++;
 
-          if ((child.style.positionType == CSSPositionType.RELATIVE && child.style.flex != 0)) {
+          if ((child.style.positionType == CSSPositionType.RELATIVE && (child.style.flexGrow != 0 || child.style.flexShrink != 0))) {
             totalFlexGrowFactors += getFlexGrowFactor(child);
 
             // Unlike the grow factor, the shrink factor is scaled relative to the child
             // dimension.
-            totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.flexBasis;
+            totalFlexShrinkScaledFactors += getFlexShrinkFactor(child) * child.layout.computedFlexBasis;
           }
 
           // Store a private linked list of children that need to be layed out.
@@ -910,7 +887,7 @@ public class LayoutEngine {
         float deltaFlexGrowFactors = 0;
         currentRelativeChild = firstRelativeChild;
         while (currentRelativeChild != null) {
-          childFlexBasis = currentRelativeChild.layout.flexBasis;
+          childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
 
           if (remainingFreeSpace < 0) {
             flexShrinkScaledFactor = getFlexShrinkFactor(currentRelativeChild) * childFlexBasis;
@@ -957,7 +934,7 @@ public class LayoutEngine {
         deltaFreeSpace = 0;
         currentRelativeChild = firstRelativeChild;
         while (currentRelativeChild != null) {
-          childFlexBasis = currentRelativeChild.layout.flexBasis;
+          childFlexBasis = currentRelativeChild.layout.computedFlexBasis;
           float updatedMainSize = childFlexBasis;
 
           if (remainingFreeSpace < 0) {
@@ -1095,7 +1072,7 @@ public class LayoutEngine {
             if (canSkipFlex) {
               // If we skipped the flex step, then we can't rely on the measuredDims because
               // they weren't computed. This means we can't call getDimWithMargin.
-              mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.flexBasis;
+              mainDim += betweenMainDim + (child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])) + child.layout.computedFlexBasis;
               crossDim = availableInnerCrossDim;
             } else {
               // The main dimension is the sum of all the elements dimension plus

tests/java/com/facebook/csslayout/CSSLayoutFlexBasisTest.java

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.csslayout;
+
+import org.junit.Test;
+
+import static org.junit.Assert.assertEquals;
+
+public class CSSLayoutFlexBasisTest {
+
+  @Test
+  public void testFlexBasis() {
+    final CSSNode root = new CSSNode();
+    root.setFlexDirection(CSSFlexDirection.ROW);
+    root.setStyleWidth(300);
+    root.setStyleHeight(100);
+
+    final CSSNode root_child0 = new CSSNode();
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexBasis(100);
+    root_child0.setStyleWidth(200);
+    root_child0.setStyleHeight(100);
+    root.addChildAt(root_child0, 0);
+
+    final CSSNode root_child1 = new CSSNode();
+    root_child1.setFlexGrow(1);
+    root_child1.setStyleWidth(100);
+    root_child1.setStyleHeight(100);
+    root.addChildAt(root_child1, 1);
+    root.calculateLayout(new CSSLayoutContext());
+
+    assertEquals(0, root.getLayoutX(), 0.001);
+    assertEquals(0, root.getLayoutY(), 0.001);
+    assertEquals(300, root.getLayoutWidth(), 0.001);
+    assertEquals(100, root.getLayoutHeight(), 0.001);
+
+    assertEquals(0, root_child0.getLayoutX(), 0.001);
+    assertEquals(0, root_child0.getLayoutY(), 0.001);
+    assertEquals(200, root_child0.getLayoutWidth(), 0.001);
+    assertEquals(100, root_child0.getLayoutHeight(), 0.001);
+
+    assertEquals(200, root_child1.getLayoutX(), 0.001);
+    assertEquals(0, root_child1.getLayoutY(), 0.001);
+    assertEquals(100, root_child1.getLayoutWidth(), 0.001);
+    assertEquals(100, root_child1.getLayoutHeight(), 0.001);
+  }
+}

tests/java/com/facebook/csslayout/LayoutEngineTest.java

@@ -828,7 +828,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 200;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
       }
     }
@@ -875,7 +875,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 200;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
       }
     }
@@ -918,19 +918,19 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 1000;
         addChildren(node_1, 1);
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
-          node_2.style.flex = 1;
+          node_2.setFlex(1);
           node_2.style.dimensions[DIMENSION_WIDTH] = 1000;
           addChildren(node_2, 1);
           {
             TestCSSNode node_3;
             node_3 = node_2.getChildAt(0);
-            node_3.style.flex = 1;
+            node_3.setFlex(1);
             node_3.style.dimensions[DIMENSION_WIDTH] = 1000;
           }
         }
@@ -990,21 +990,21 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.flexDirection = CSSFlexDirection.COLUMN_REVERSE;
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 1000;
         addChildren(node_1, 1);
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
           node_2.style.flexDirection = CSSFlexDirection.COLUMN_REVERSE;
-          node_2.style.flex = 1;
+          node_2.setFlex(1);
           node_2.style.dimensions[DIMENSION_WIDTH] = 1000;
           addChildren(node_2, 1);
           {
             TestCSSNode node_3;
             node_3 = node_2.getChildAt(0);
             node_3.style.flexDirection = CSSFlexDirection.COLUMN_REVERSE;
-            node_3.style.flex = 1;
+            node_3.setFlex(1);
             node_3.style.dimensions[DIMENSION_WIDTH] = 1000;
           }
         }
@@ -1642,7 +1642,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
       }
@@ -2596,7 +2596,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -3063,12 +3063,12 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
         node_1.style.positionType = CSSPositionType.ABSOLUTE;
         node_1.style.dimensions[DIMENSION_WIDTH] = 50;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -3577,7 +3577,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setMargin(Spacing.LEFT, 5);
       }
     }
@@ -3616,7 +3616,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setMargin(Spacing.RIGHT, 5);
       }
     }
@@ -3654,9 +3654,9 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setPadding(Spacing.RIGHT, 5);
       }
     }
@@ -3700,9 +3700,9 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setPadding(Spacing.LEFT, 5);
       }
     }
@@ -3745,9 +3745,9 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setMargin(Spacing.LEFT, 5);
       }
     }
@@ -3791,9 +3791,9 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setMargin(Spacing.RIGHT, 5);
       }
     }
@@ -3837,7 +3837,7 @@ public class LayoutEngineTest {
         node_1 = node_0.getChildAt(0);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 600;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -3880,7 +3880,7 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.positionType = CSSPositionType.ABSOLUTE;
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -3919,7 +3919,7 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.positionType = CSSPositionType.ABSOLUTE;
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -3955,10 +3955,10 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
         node_1.style.positionType = CSSPositionType.ABSOLUTE;
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -4544,7 +4544,7 @@ public class LayoutEngineTest {
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
-          node_2.style.flex = 1;
+          node_2.setFlex(1);
           node_2.setMeasureFunction(sTestMeasureFunction);
           node_2.context = TestConstants.LONG_TEXT;
         }
@@ -4598,7 +4598,7 @@ public class LayoutEngineTest {
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
-          node_2.style.flex = 1;
+          node_2.setFlex(1);
           node_2.setMeasureFunction(sTestMeasureFunction);
           node_2.context = TestConstants.LONG_TEXT;
         }
@@ -5239,10 +5239,10 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = 2.5f;
+        node_1.setFlex(2.5f);
         node_1 = node_0.getChildAt(1);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = 7.5f;
+        node_1.setFlex(7.5f);
       }
     }
 
@@ -5287,10 +5287,10 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = 2.5f;
+        node_1.setFlex(2.5f);
         node_1 = node_0.getChildAt(1);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = 7.5f;
+        node_1.setFlex(7.5f);
       }
     }
 
@@ -5335,10 +5335,10 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = -2.5f;
+        node_1.setFlex(-2.5f);
         node_1 = node_0.getChildAt(1);
         node_1.style.alignSelf = CSSAlign.FLEX_START;
-        node_1.style.flex = 0;
+        node_1.setFlex(0);
       }
     }
 
@@ -6295,12 +6295,12 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 200;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6349,12 +6349,12 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 200;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6402,13 +6402,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 110;
         node_1.style.minWidth = 90;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6457,13 +6457,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 110;
         node_1.style.minWidth = 90;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6511,12 +6511,12 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6565,12 +6565,12 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
       }
     }
 
@@ -6618,13 +6618,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
       }
     }
@@ -6674,13 +6674,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 60;
       }
     }
@@ -6729,13 +6729,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
       }
     }
@@ -6785,13 +6785,13 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 120;
       }
     }
@@ -6839,7 +6839,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 310;
         node_1.style.minWidth = 290;
       }
@@ -6878,7 +6878,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.maxWidth = 290;
       }
     }
@@ -6916,7 +6916,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.minWidth = 310;
       }
     }
@@ -7380,7 +7380,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 1000;
         node_1.style.maxWidth = 600;
       }
@@ -7420,11 +7420,11 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 1000;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 1000;
         node_1.style.maxWidth = 200;
@@ -7607,7 +7607,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.setPadding(Spacing.LEFT, 10);
         node_1.setPadding(Spacing.TOP, 10);
         node_1.setPadding(Spacing.RIGHT, 10);
@@ -8238,13 +8238,13 @@ public class LayoutEngineTest {
         node_1 = node_0.getChildAt(1);
         node_1.style.flexDirection = CSSFlexDirection.COLUMN;
         node_1.style.alignItems = CSSAlign.FLEX_START;
-        node_1.style.flex = 1;
+        node_1.setFlex(1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 10;
         addChildren(node_1, 1);
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
-          node_2.style.flex = 1;
+          node_2.setFlex(1);
           node_2.style.dimensions[DIMENSION_HEIGHT] = 10;
           node_2.setMeasureFunction(sTestMeasureFunction);
           node_2.context = TestConstants.MEASURE_WITH_MATCH_PARENT;
@@ -8591,7 +8591,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         addChildren(node_1, 1);
         {
@@ -8645,7 +8645,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         addChildren(node_1, 1);
         {
@@ -8702,7 +8702,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 25;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         addChildren(node_1, 1);
         {
@@ -8772,7 +8772,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 25;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         addChildren(node_1, 1);
         {
@@ -8839,14 +8839,14 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 30;
         node_1 = node_0.getChildAt(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 40;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 100;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 50;
       }
@@ -8896,7 +8896,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -8951,7 +8951,7 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9009,7 +9009,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 25;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9080,7 +9080,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_WIDTH] = 25;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9148,14 +9148,14 @@ public class LayoutEngineTest {
       {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 30;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 40;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(2);
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 50;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
       }
@@ -9206,7 +9206,7 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9262,7 +9262,7 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9321,7 +9321,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9393,7 +9393,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9462,7 +9462,7 @@ public class LayoutEngineTest {
         TestCSSNode node_1;
         node_1 = node_0.getChildAt(0);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 30;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(1);
@@ -9470,7 +9470,7 @@ public class LayoutEngineTest {
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         node_1 = node_0.getChildAt(2);
         node_1.style.overflow = CSSOverflow.HIDDEN;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_WIDTH] = 50;
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
       }
@@ -9525,7 +9525,7 @@ public class LayoutEngineTest {
         node_1 = node_0.getChildAt(1);
         node_1.style.flexDirection = CSSFlexDirection.ROW;
         node_1.style.alignItems = CSSAlign.FLEX_START;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
@@ -9598,13 +9598,13 @@ public class LayoutEngineTest {
         node_1 = node_0.getChildAt(1);
         node_1.style.flexDirection = CSSFlexDirection.ROW;
         node_1.style.alignItems = CSSAlign.FLEX_START;
-        node_1.style.flex = -1;
+        node_1.setFlex(-1);
         node_1.style.dimensions[DIMENSION_HEIGHT] = 100;
         addChildren(node_1, 1);
         {
           TestCSSNode node_2;
           node_2 = node_1.getChildAt(0);
-          node_2.style.flex = -1;
+          node_2.setFlex(-1);
           node_2.setMeasureFunction(sTestMeasureFunction);
           node_2.context = TestConstants.LONG_TEXT;
         }