port changes to C

src/Layout.c

@@ -133,6 +133,15 @@ void print_style(css_node_t *node, int level) {
     print_number_0("paddingBottom", node->style.padding[CSS_BOTTOM]);
   }
 
+  if (four_equal(node->style.border)) {
+    print_number_0("borderWidth", node->style.border[CSS_LEFT]);
+  } else {
+    print_number_0("borderLeftWidth", node->style.border[CSS_LEFT]);
+    print_number_0("borderRightWidth", node->style.border[CSS_RIGHT]);
+    print_number_0("borderTopWidth", node->style.border[CSS_TOP]);
+    print_number_0("borderBottomWidth", node->style.border[CSS_BOTTOM]);
+  }
+
   print_number_nan("width", node->style.dimensions[CSS_WIDTH]);
   print_number_nan("height", node->style.dimensions[CSS_HEIGHT]);
 
@@ -203,7 +212,33 @@ float getMargin(css_node_t *node, int location) {
 }
 
 float getPadding(css_node_t *node, int location) {
-  return node->style.padding[location];
+  if (node->style.padding[location] >= 0) {
+    return node->style.padding[location];
+  }
+  return 0;
+}
+
+float getBorder(css_node_t *node, int location) {
+  if (node->style.border[location] >= 0) {
+    return node->style.border[location];
+  }
+  return 0;
+}
+
+float getPaddingAndBorder(css_node_t *node, int location) {
+  return getPadding(node, location) + getBorder(node, location);
+}
+
+float getMarginAxis(css_node_t *node, css_flex_direction_t axis) {
+  return getMargin(node, leading[axis]) + getMargin(node, trailing[axis]);
+}
+
+float getPaddingAndBorderAxis(css_node_t *node, css_flex_direction_t axis) {
+  return getPaddingAndBorder(node, leading[axis]) + getPaddingAndBorder(node, trailing[axis]);
+}
+
+css_position_type_t getPositionType(css_node_t *node) {
+  return node->style.position_type;
 }
 
 css_justify_t getJustifyContent(css_node_t *node) {
@@ -235,6 +270,10 @@ bool isDimDefined(css_node_t *node, css_flex_direction_t axis) {
   return !isUndefined(node->style.dimensions[dim[axis]]);
 }
 
+bool isPosDefined(css_node_t *node, css_position_t pos) {
+  return !isUndefined(node->style.position[pos]);
+}
+
 float getPosition(css_node_t *node, css_position_t pos) {
   float result = node->style.position[pos];
   if (!isUndefined(result)) {
@@ -261,23 +300,37 @@ void layoutNode(css_node_t *node) {
 
   bool mainDimInStyle = isDimDefined(node, mainAxis);
   if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && mainDimInStyle) {
-    node->layout.dimensions[dim[mainAxis]] = node->style.dimensions[dim[mainAxis]];
+    node->layout.dimensions[dim[mainAxis]] = fmaxf(
+      node->style.dimensions[dim[mainAxis]],
+      getPaddingAndBorderAxis(node, mainAxis)
+    );
   }
 
   bool crossDimInStyle = isDimDefined(node, crossAxis);
   if (isUndefined(node->layout.dimensions[dim[crossAxis]]) && crossDimInStyle) {
-    node->layout.dimensions[dim[crossAxis]] = node->style.dimensions[dim[crossAxis]];
+    node->layout.dimensions[dim[crossAxis]] = fmaxf(
+      node->style.dimensions[dim[crossAxis]],
+      getPaddingAndBorderAxis(node, crossAxis)
+    );
   }
 
   float mainContentDim = 0;
   int flexibleChildrenCount = 0;
+  int absoluteChildrenCount = 0;
   for (int i = 0; i < node->children_count; ++i) {
     css_node_t* child = &node->children[i];
-    if (isUndefined(node->layout.dimensions[dim[mainAxis]]) || !getFlex(child)) {
+    if (isUndefined(node->layout.dimensions[dim[mainAxis]]) ||
+        getPositionType(child) == CSS_POSITION_ABSOLUTE ||
+        !getFlex(child)) {
       layoutNode(child);
-      mainContentDim += getDimWithMargin(child, mainAxis);
+      if (getPositionType(child) == CSS_POSITION_RELATIVE) {
+        mainContentDim += getDimWithMargin(child, mainAxis);
+      } else {
+        absoluteChildrenCount++;
+      }
     } else {
       flexibleChildrenCount++;
+      mainContentDim += getPaddingAndBorderAxis(child, mainAxis) + getMarginAxis(child, mainAxis);
     }
   }
 
@@ -285,16 +338,18 @@ void layoutNode(css_node_t *node) {
   float betweenMainDim = 0;
   if (!isUndefined(node->layout.dimensions[dim[mainAxis]])) {
     float remainingMainDim = node->layout.dimensions[dim[mainAxis]] -
-      getPadding(node, leading[mainAxis]) -
+      getPaddingAndBorderAxis(node, mainAxis) -
-      getPadding(node, trailing[mainAxis]) -
       mainContentDim;
 
     if (flexibleChildrenCount) {
       float flexibleMainDim = remainingMainDim / flexibleChildrenCount;
+      if (flexibleMainDim < 0) {
+        flexibleMainDim = 0;
+      }
       for (int i = 0; i < node->children_count; ++i) {
         css_node_t* child = &node->children[i];
-        if (getFlex(child)) {
+        if (getPositionType(child) == CSS_POSITION_RELATIVE && getFlex(child)) {
-          child->layout.dimensions[dim[mainAxis]] = flexibleMainDim;
+          child->layout.dimensions[dim[mainAxis]] = flexibleMainDim + getPaddingAndBorderAxis(child, mainAxis);
           layoutNode(child);
         }
       }
@@ -307,31 +362,39 @@ void layoutNode(css_node_t *node) {
       } else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
         leadingMainDim = remainingMainDim;
       } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) {
-        betweenMainDim = remainingMainDim / (node->children_count - 1);
+        betweenMainDim = remainingMainDim / (node->children_count - absoluteChildrenCount - 1);
       } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) {
-        betweenMainDim = remainingMainDim / node->children_count;
+        betweenMainDim = remainingMainDim / (node->children_count - absoluteChildrenCount);
         leadingMainDim = betweenMainDim / 2;
       }
     }
   }
 
   float crossDim = 0;
-  float mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim;
+  float mainPos = getPaddingAndBorder(node, leading[mainAxis]) + leadingMainDim;
   for (int i = 0; i < node->children_count; ++i) {
     css_node_t* child = &node->children[i];
-    child->layout.position[pos[mainAxis]] += mainPos;
+    if (getPositionType(child) == CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) {
-    mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
+      child->layout.position[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
+        getBorder(node, leading[mainAxis]) +
+        getMargin(child, leading[mainAxis]);
+    } else {
+      child->layout.position[pos[mainAxis]] += mainPos;
+    }
+    if (getPositionType(child) == CSS_POSITION_RELATIVE) {
+      mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
 
-    if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
+      if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
-      float childCrossDim = getDimWithMargin(child, crossAxis);
+        float childCrossDim = getDimWithMargin(child, crossAxis);
-      if (childCrossDim > crossDim) {
+        if (childCrossDim > crossDim) {
-        crossDim = childCrossDim;
+          crossDim = childCrossDim;
+        }
       }
     }
   }
-  mainPos += getPadding(node, trailing[mainAxis]);
+  mainPos += getPaddingAndBorder(node, trailing[mainAxis]);
-  crossDim += getPadding(node, leading[crossAxis]) +
+  crossDim += getPaddingAndBorder(node, leading[crossAxis]) +
-    getPadding(node, trailing[crossAxis]);
+    getPaddingAndBorder(node, trailing[crossAxis]);
 
   if (isUndefined(node->layout.dimensions[dim[mainAxis]]) && !mainDimInStyle) {
     node->layout.dimensions[dim[mainAxis]] = mainPos > 0 ? mainPos : 0;
@@ -342,27 +405,37 @@ void layoutNode(css_node_t *node) {
 
   for (int i = 0; i < node->children_count; ++i) {
     css_node_t* child = &node->children[i];
-    css_align_t alignItem = getAlignItem(node, child);
-    float remainingCrossDim = node->layout.dimensions[dim[crossAxis]] -
-      getDimWithMargin(child, crossAxis) -
-      getPadding(node, leading[crossAxis]) -
-      getPadding(node, trailing[crossAxis]);
 
-    float leadingCrossDim = getPadding(node, leading[crossAxis]);
+    if (getPositionType(child) == CSS_POSITION_RELATIVE) {
-    if (alignItem == CSS_ALIGN_FLEX_START) {
+      css_align_t alignItem = getAlignItem(node, child);
-      // Do nothing
+      float remainingCrossDim = node->layout.dimensions[dim[crossAxis]] -
-    } else if (alignItem == CSS_ALIGN_CENTER) {
+        getDimWithMargin(child, crossAxis) -
-      leadingCrossDim += remainingCrossDim / 2;
+        getPaddingAndBorderAxis(node, crossAxis);
-    } else if (alignItem == CSS_ALIGN_FLEX_END) {
+
-      leadingCrossDim += remainingCrossDim;
+      float leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
-    } else if (alignItem == CSS_ALIGN_STRETCH) {
+      if (alignItem == CSS_ALIGN_FLEX_START) {
-      child->layout.dimensions[dim[crossAxis]] = node->layout.dimensions[dim[crossAxis]] -
+        // Do nothing
-        getPadding(node, leading[crossAxis]) -
+      } else if (alignItem == CSS_ALIGN_CENTER) {
-        getPadding(node, trailing[crossAxis]) -
+        leadingCrossDim += remainingCrossDim / 2;
-        getMargin(child, leading[crossAxis]) -
+      } else if (alignItem == CSS_ALIGN_FLEX_END) {
-        getMargin(child, trailing[crossAxis]);
+        leadingCrossDim += remainingCrossDim;
+      } else if (alignItem == CSS_ALIGN_STRETCH) {
+        if (!isDimDefined(child, crossAxis)) {
+          child->layout.dimensions[dim[crossAxis]] = node->layout.dimensions[dim[crossAxis]] -
+            getPaddingAndBorderAxis(node, crossAxis) -
+            getMarginAxis(child, crossAxis);
+        }
+      }
+      child->layout.position[pos[crossAxis]] += leadingCrossDim;
+    } else {
+      if (isPosDefined(child, leading[crossAxis])) {
+        child->layout.position[pos[crossAxis]] = getPosition(child, leading[crossAxis]) +
+          getBorder(node, leading[crossAxis]) +
+          getMargin(child, leading[crossAxis]);
+      } else {
+        child->layout.position[pos[crossAxis]] += getPaddingAndBorder(node, leading[crossAxis]);
+      }
     }
-    child->layout.position[pos[crossAxis]] += leadingCrossDim;
   }
 
   node->layout.position[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +

src/Layout.h

@@ -30,6 +30,11 @@ typedef enum {
   CSS_FLEX_ONE
 } css_flex_t;
 
+typedef enum {
+  CSS_POSITION_RELATIVE = 0,
+  CSS_POSITION_ABSOLUTE
+} css_position_type_t;
+
 // Note: left and top are shared between position[2] and position[4], so
 // they have to be before right and bottom.
 typedef enum {
@@ -56,8 +61,10 @@ typedef struct {
   css_align_t align_items;
   css_align_t align_self;
   css_flex_t flex;
+  css_position_type_t position_type;
   float margin[4];
   float padding[4];
+  float border[4];
   float position[4];
   float dimensions[2];
 } css_style_t;

src/Layout.js

@@ -61,7 +61,7 @@ var computeLayout = (function() {
   }
 
   function isUndefined(value) {
-    return value == undefined;
+    return value === undefined;
   }
 
   function getMargin(node, location) {
@@ -120,7 +120,7 @@ var computeLayout = (function() {
   }
 
   function getFlex(node) {
-    return node.style.flex == 1;
+    return node.style.flex === 1;
   }
 
   function getDimWithMargin(node, axis) {
@@ -169,6 +169,13 @@ var computeLayout = (function() {
     column: 'height'
   };
 
+  function fmaxf(a, b) {
+    if (a > b) {
+      return a;
+    }
+    return b;
+  }
+
   var CSS_FLEX_DIRECTION_ROW = 'row';
   var CSS_FLEX_DIRECTION_COLUMN = 'column';
 
@@ -183,15 +190,18 @@ var computeLayout = (function() {
   var CSS_ALIGN_FLEX_END = 'flex-end';
   var CSS_ALIGN_STRETCH = 'stretch';
 
+  var CSS_POSITION_RELATIVE = 'relative';
+  var CSS_POSITION_ABSOLUTE = 'absolute';
+
   function layoutNode(node) {
     var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
-    var/*css_flex_direction_t*/ crossAxis = mainAxis == CSS_FLEX_DIRECTION_ROW ?
+    var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
       CSS_FLEX_DIRECTION_COLUMN :
       CSS_FLEX_DIRECTION_ROW;
 
     var/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis);
     if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) {
-      node.layout[dim[mainAxis]] = Math.max(
+      node.layout[dim[mainAxis]] = fmaxf(
         node.style[dim[mainAxis]],
         getPaddingAndBorderAxis(node, mainAxis)
       );
@@ -199,7 +209,7 @@ var computeLayout = (function() {
 
     var/*bool*/ crossDimInStyle = isDimDefined(node, crossAxis);
     if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) {
-      node.layout[dim[crossAxis]] = Math.max(
+      node.layout[dim[crossAxis]] = fmaxf(
         node.style[dim[crossAxis]],
         getPaddingAndBorderAxis(node, crossAxis)
       );
@@ -211,10 +221,10 @@ var computeLayout = (function() {
     for (var/*int*/ i = 0; i < node.children.length; ++i) {
       var/*css_node_t**/ child = node.children[i];
       if (isUndefined(node.layout[dim[mainAxis]]) ||
-          getPositionType(child) === 'absolute' ||
+          getPositionType(child) === CSS_POSITION_ABSOLUTE ||
           !getFlex(child)) {
         layoutNode(child);
-        if (getPositionType(child) === 'relative') {
+        if (getPositionType(child) === CSS_POSITION_RELATIVE) {
           mainContentDim += getDimWithMargin(child, mainAxis);
         } else {
           absoluteChildrenCount++;
@@ -239,22 +249,22 @@ var computeLayout = (function() {
         }
         for (var/*int*/ i = 0; i < node.children.length; ++i) {
           var/*css_node_t**/ child = node.children[i];
-          if (getPositionType(child) === 'relative' && getFlex(child)) {
+          if (getPositionType(child) === CSS_POSITION_RELATIVE && getFlex(child)) {
             child.layout[dim[mainAxis]] = flexibleMainDim + getPaddingAndBorderAxis(child, mainAxis);
             layoutNode(child);
           }
         }
       } else {
         var/*css_justify_t*/ justifyContent = getJustifyContent(node);
-        if (justifyContent == CSS_JUSTIFY_FLEX_START) {
+        if (justifyContent === CSS_JUSTIFY_FLEX_START) {
           // Do nothing
-        } else if (justifyContent == CSS_JUSTIFY_CENTER) {
+        } else if (justifyContent === CSS_JUSTIFY_CENTER) {
           leadingMainDim = remainingMainDim / 2;
-        } else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
+        } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
           leadingMainDim = remainingMainDim;
-        } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) {
+        } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
           betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount - 1);
-        } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) {
+        } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
           betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount);
           leadingMainDim = betweenMainDim / 2;
         }
@@ -265,14 +275,14 @@ var computeLayout = (function() {
     var/*float*/ mainPos = getPaddingAndBorder(node, leading[mainAxis]) + leadingMainDim;
     for (var/*int*/ i = 0; i < node.children.length; ++i) {
       var/*css_node_t**/ child = node.children[i];
-      if (getPositionType(child) === 'absolute' && isPosDefined(child, leading[mainAxis])) {
+      if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) {
         child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
           getBorder(node, leading[mainAxis]) +
           getMargin(child, leading[mainAxis]);
       } else {
         child.layout[pos[mainAxis]] += mainPos;
       }
-      if (getPositionType(child) === 'relative') {
+      if (getPositionType(child) === CSS_POSITION_RELATIVE) {
         mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
 
         if (!isUndefined(child.layout[dim[crossAxis]])) {
@@ -297,20 +307,20 @@ var computeLayout = (function() {
     for (var/*int*/ i = 0; i < node.children.length; ++i) {
       var/*css_node_t**/ child = node.children[i];
 
-      if (getPositionType(child) === 'relative') {
+      if (getPositionType(child) === CSS_POSITION_RELATIVE) {
         var/*css_align_t*/ alignItem = getAlignItem(node, child);
         var/*float*/ remainingCrossDim = node.layout[dim[crossAxis]] -
           getDimWithMargin(child, crossAxis) -
           getPaddingAndBorderAxis(node, crossAxis);
 
         var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
-        if (alignItem == CSS_ALIGN_FLEX_START) {
+        if (alignItem === CSS_ALIGN_FLEX_START) {
           // Do nothing
-        } else if (alignItem == CSS_ALIGN_CENTER) {
+        } else if (alignItem === CSS_ALIGN_CENTER) {
           leadingCrossDim += remainingCrossDim / 2;
-        } else if (alignItem == CSS_ALIGN_FLEX_END) {
+        } else if (alignItem === CSS_ALIGN_FLEX_END) {
           leadingCrossDim += remainingCrossDim;
-        } else if (alignItem == CSS_ALIGN_STRETCH) {
+        } else if (alignItem === CSS_ALIGN_STRETCH) {
           if (!isDimDefined(child, crossAxis)) {
             child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] -
               getPaddingAndBorderAxis(node, crossAxis) -

src/transpile.html

@@ -23,6 +23,7 @@ document.getElementById('layout_code').value = computeLayout.layoutNode.toString
   .replace(/node\./g, 'node->')
   .replace(/child\./g, 'child->')
   .replace(/var\/\*([^\/]+)\*\//g, '$1')
+  .replace(/ === /g, ' == ')
   .replace(/\n  /g, '\n');
 </script>
 
@@ -75,16 +76,16 @@ function printLayout(test) {
     }
   }
 
-  function addSpacing(node, spacing) {
+  function addSpacing(node, spacing, suffix) {
-    addFloat(node, spacing, spacing + '[CSS_LEFT]');
+    addFloat(node, spacing + suffix, spacing + '[CSS_LEFT]');
-    addFloat(node, spacing, spacing + '[CSS_TOP]');
+    addFloat(node, spacing + suffix, spacing + '[CSS_TOP]');
-    addFloat(node, spacing, spacing + '[CSS_RIGHT]');
+    addFloat(node, spacing + suffix, spacing + '[CSS_RIGHT]');
-    addFloat(node, spacing, spacing + '[CSS_BOTTOM]');
+    addFloat(node, spacing + suffix, spacing + '[CSS_BOTTOM]');
 
-    addFloat(node, spacing + 'Left', spacing + '[CSS_LEFT]');
+    addFloat(node, spacing + 'Left' + suffix, spacing + '[CSS_LEFT]');
-    addFloat(node, spacing + 'Top', spacing + '[CSS_TOP]');
+    addFloat(node, spacing + 'Top' + suffix, spacing + '[CSS_TOP]');
-    addFloat(node, spacing + 'Right', spacing + '[CSS_RIGHT]');
+    addFloat(node, spacing + 'Right' + suffix, spacing + '[CSS_RIGHT]');
-    addFloat(node, spacing + 'Bottom', spacing + '[CSS_BOTTOM]');
+    addFloat(node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
   }
 
   add('{');
@@ -123,10 +124,15 @@ function printLayout(test) {
       'none': 'CSS_FLEX_NONE',
       '1': 'CSS_FLEX_ONE'
     });
+    addEnum(node, 'position', 'position_type', {
+      'relative': 'CSS_POSITION_RELATIVE',
+      'absolute': 'CSS_POSITION_ABSOLUTE'
+    });
     addFloat(node, 'width', 'dimensions[CSS_WIDTH]');
     addFloat(node, 'height', 'dimensions[CSS_HEIGHT]');
-    addSpacing(node, 'margin');
+    addSpacing(node, 'margin', '');
-    addSpacing(node, 'padding');
+    addSpacing(node, 'padding', '');
+    addSpacing(node, 'border', 'Width');
     addFloat(node, 'left', 'position[CSS_LEFT]');
     addFloat(node, 'top', 'position[CSS_TOP]');
     addFloat(node, 'right', 'position[CSS_RIGHT]');