autogen c version of text from js

src/Layout-test-utils.js

@@ -238,21 +238,21 @@ var layoutTestUtils = (function() {
     reduceTest: reduceTest,
     text: function(text) {
       var body = iframeText.contentDocument.body;
-      var fn = function(width) {
+      var fn = function(type, width) {
         // Constants for testing purposes between C/JS and other platforms
         // Comment this block of code if you want to use the browser to
         // generate proper sizes
         if (text === 'small') {
-          if (width === 'grow' || width === 'shrink') {
+          if (type === 'grow' || type === 'shrink') {
             return {width: 33, height: 18}
           }
           return {width: width, height: 18};
         }
         if (text === 'loooooooooong with space') {
-          if (width === 'grow') {
+          if (type === 'grow') {
             return {width: 171, height: 18};
           }
-          if (width === 'shrink') {
+          if (type === 'shrink') {
             return {width: 100, height: 36};
           }
           return {width: width, height: width >= 171 ? 18 : 36};

src/Layout.c

@@ -275,6 +275,10 @@ bool isPosDefined(css_node_t *node, css_position_t pos) {
   return !isUndefined(node->style.position[pos]);
 }
 
+bool isMeasureDefined(css_node_t *node) {
+  return node->style.measure;
+}
+
 float getPosition(css_node_t *node, css_position_t pos) {
   float result = node->style.position[pos];
   if (!isUndefined(result)) {
@@ -328,7 +332,7 @@ void layoutNode(css_node_t *node) {
   node->layout.position[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
     getRelativePosition(node, crossAxis);
 
-  if (node->style.measure) {
+  if (isMeasureDefined(node)) {
     float width = CSS_UNDEFINED;
     css_measure_type_t type = CSS_MEASURE_VALUE;
 
@@ -340,23 +344,22 @@ void layoutNode(css_node_t *node) {
       type = CSS_MEASURE_GROW;
     }
 
-    css_dim_t dim = node->style.measure(
+    css_dim_t measure_dim = node->style.measure(
       node->style.measure_context,
       type,
       width
     );
     if (!isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
-      node->layout.dimensions[CSS_WIDTH] = dim.dimensions[CSS_WIDTH] +
+      node->layout.dimensions[CSS_WIDTH] = measure_dim.dimensions[CSS_WIDTH] +
         getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
     }
     if (!isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
-      node->layout.dimensions[CSS_HEIGHT] = dim.dimensions[CSS_HEIGHT] +
+      node->layout.dimensions[CSS_HEIGHT] = measure_dim.dimensions[CSS_HEIGHT] +
         getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
     }
     return;
   }
 
-
   // <Loop A> Layout non flexible children and count children by type
 
   // mainContentDim is accumulation of the dimensions and margin of all the
@@ -397,6 +400,7 @@ void layoutNode(css_node_t *node) {
     }
   }
 
+
   // <Loop B> Layout flexible children and allocate empty space
 
   // In order to position the elements in the main axis, we have two

src/Layout.js

@@ -112,6 +112,10 @@ var computeLayout = (function() {
     return !isUndefined(node.style[pos]);
   }
 
+  function isMeasureDefined(node) {
+    return 'measure' in node.style;
+  }
+
   function getPosition(node, pos) {
     if (pos in node.style) {
       return node.style[pos];
@@ -170,6 +174,8 @@ var computeLayout = (function() {
     return b;
   }
 
+  var CSS_UNDEFINED = undefined;
+
   var CSS_FLEX_DIRECTION_ROW = 'row';
   var CSS_FLEX_DIRECTION_COLUMN = 'column';
 
@@ -187,6 +193,10 @@ var computeLayout = (function() {
   var CSS_POSITION_RELATIVE = 'relative';
   var CSS_POSITION_ABSOLUTE = 'absolute';
 
+  var CSS_MEASURE_VALUE = 'value';
+  var CSS_MEASURE_GROW = 'grow';
+  var CSS_MEASURE_SHRINK = 'shrink';
+
   return function layoutNode(node) {
     var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
     var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
@@ -204,22 +214,29 @@ var computeLayout = (function() {
     node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
       getRelativePosition(node, crossAxis);
 
-    if ('measure' in node.style) {
-      var width;
+    if (isMeasureDefined(node)) {
+      var/*float*/ width = CSS_UNDEFINED;
+      var/*css_measure_type_t*/ type = CSS_MEASURE_VALUE;
+
       if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
         width = node.style.width;
-      } else if (getPositionType(node) === CSS_POSITION_ABSOLUTE) {
-        width = 'shrink';
+      } else if (getPositionType(node) == CSS_POSITION_ABSOLUTE) {
+        type = CSS_MEASURE_SHRINK;
       } else {
-        width = 'grow';
+        type = CSS_MEASURE_GROW;
       }
-      var dimensions = node.style.measure(width);
+
+      var/*css_dim_t*/ measure_dim = node.style.measure(
+        /*!node->style.measure_context,*/
+        type,
+        width
+      );
       if (!isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
-        node.layout.width = dimensions.width +
+        node.layout.width = measure_dim.width +
           getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
       }
       if (!isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
-        node.layout.height = dimensions.height +
+        node.layout.height = measure_dim.height +
           getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
       }
       return;

src/transpile.html

@@ -15,6 +15,8 @@ textarea {
 <script>
 document.getElementById('layout_code').value = computeLayout.toString()
   .replace(/\.children\.length/g, '.children_count')
+  .replace(/\.width/g, '.dimensions[CSS_WIDTH]')
+  .replace(/\.height/g, '.dimensions[CSS_HEIGHT]')
   .replace(/layout\[dim/g, 'layout.dimensions[dim')
   .replace(/layout\[pos/g, 'layout.position[pos')
   .replace(/layout\[leading/g, 'layout.position[leading')
@@ -24,7 +26,9 @@ document.getElementById('layout_code').value = computeLayout.toString()
   .replace(/child\./g, 'child->')
   .replace(/var\/\*([^\/]+)\*\//g, '$1')
   .replace(/ === /g, ' == ')
-  .replace(/\n  /g, '\n');
+  .replace(/\n  /g, '\n')
+  .replace(/\/[*]!([^*]+)[*]\//g, '$1')
+  .split('\n').slice(1).join('\n');
 </script>
 
 <h1>Tests</h1>