css-layout - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "css-layout",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Reimplementation of CSS layout using pure JavaScript",
-  "main": "src/main.js",
+  "main": "dist/css-layout.js",
   "scripts": {
-    "pretest": "./node_modules/eslint/bin/eslint.js src",
-    "test": "./node_modules/karma/bin/karma start ./karma.conf.js --single-run"
+    "test": "grunt ci"
   },
@@ -21,8 +20,20 @@ "repository": {
   "devDependencies": {
-    "eslint": "^0.14.1",
+    "grunt": "^0.4.5",
+    "grunt-cli": "^0.1.13",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-uglify": "^0.9.1",
+    "grunt-eslint": "^17.1.0",
+    "grunt-execute": "^0.2.2",
+    "grunt-include-replace": "^3.1.0",
+    "grunt-karma": "^0.12.0",
+    "grunt-mkdir": "^0.1.2",
+    "grunt-shell": "^1.1.2",
     "jasmine-core": "^2.2.0",
-    "karma": "^0.12.31",
+    "karma": "^0.13.8",
     "karma-chrome-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.5"
+    "karma-jasmine": "^0.3.5",
+    "load-grunt-tasks": "^3.2.0"
   }
 }

README.md

@@ -1,2 +0,2 @@
-css-layout
+css-layout [![Build Status](https://travis-ci.org/facebook/css-layout.svg?branch=master)](https://travis-ci.org/facebook/css-layout)
 ==========
@@ -14,5 +14,5 @@
 
-A single function `computeLayout` is exposed and
+A single function `computeLayout` is exposed that
  - takes a tree of nodes: `{ style: { ... }, children: [ nodes ] }`
- - returns a tree of rectangles: `{ width: ..., height: ..., top: ..., left: ..., children: [ rects ] }`
+ - computes the layout and writes it back to the node tree.
 
@@ -22,18 +22,59 @@ For example,
 ```javascript
-computeLayout(
-  {style: {padding: 50}, children: [
-    {style: {padding: 10, alignSelf: 'stretch'}}
-  ]}
-);
-// =>
-{width: 120, height: 120, top: 0, left: 0, children: [
-  {width: 20, height: 20, top: 50, left: 50}
-]}
-```
+// create an initial tree of nodes
+var nodeTree = {
+    "style": {
+      "padding": 50
+    },
+    "children": [
+      {
+        "style": {
+          "padding": 10,
+          "alignSelf": "stretch"
+        }
+      }
+    ]
+  };
 
-To run the tests
+// compute the layout
+computeLayout(nodeTree);
 
-- For the JS tests: Open `RunLayoutTests.html` and `RunLayoutRandomTests.html` in Chrome or run `$ npm test`
-- For the C and Java tests: run `make` in your terminal. It will also transpile the JS code
+// the layout information is written back to the node tree, with
+// each node now having a layout property: 
 
+// JSON.stringify(nodeTree, null, 2);
+{
+  "style": {
+    "padding": 50
+  },
+  "children": [
+    {
+      "style": {
+        "padding": 10,
+        "alignSelf": "stretch"
+      },
+      "layout": {
+        "width": 20,
+        "height": 20,
+        "top": 50,
+        "left": 50,
+        "right": 50,
+        "bottom": 50,
+        "direction": "ltr"
+      },
+      "children": [],
+      "lineIndex": 0
+    }
+  ],
+  "layout": {
+    "width": 120,
+    "height": 120,
+    "top": 0,
+    "left": 0,
+    "right": 0,
+    "bottom": 0,
+    "direction": "ltr"
+  }
+}
+```
+
 Supported Attributes
@@ -45,2 +86,4 @@ --------------------
 width, height | positive number
+minWidth, minHeight | positive number
+maxWidth, maxHeight | positive number
 left, right, top, bottom | number
@@ -52,3 +95,3 @@ margin, marginLeft, marginRight, marginTop, marginBottom | number
 justifyContent | 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
-alignItems, alignSelf | 'flex-start', 'center', 'flex-end', 'stretch'
+alignItems, alignSelf, alignContent | 'flex-start', 'center', 'flex-end', 'stretch'
 flex | positive number
@@ -75,2 +118,3 @@ flexWrap | 'wrap', 'nowrap'
   flex-shrink: 0;
+  align-content: flex-start;
 
@@ -87,1 +131,14 @@ border: 0 solid black;
 - Everything is `position: relative`. This makes `position: absolute` target the direct parent and not some parent which is either `relative` or `absolute`. If you want to position an element relative to something else, you should move it in the DOM instead of relying of CSS. It also makes `top, left, right, bottom` do something when not specifying `position: absolute`.
+
+Development
+-----------
+
+The core logic resides with `Layout.js`, which is transpiled into equivalent C and Java implementations.
+
+The JavaScript build process is managed via Grunt. The build performs linting, runs the tests against Chrome, transpiles and packages the code (JavaScript and Java) into the `dist` folder. For JavaScript, the build output uses the Universal Module Format (UMD) so that it can be used via AMD / RequireJS, CommonJS or included directly into an HTML page.
+
+While developing you can just run the lint / Chrome-based tests a follows:
+
+```
+grunt test-javascript
+```

src/__tests__/Layout-random-test.js

@@ -52,2 +52,6 @@ /**
     randMinMax(node, 0.5, 'height', -100, 1000);
+    randMinMax(node, 0.5, 'minWidth', -100, 1000);
+    randMinMax(node, 0.5, 'minHeight', -100, 1000);
+    randMinMax(node, 0.5, 'maxWidth', -100, 1000);
+    randMinMax(node, 0.5, 'maxHeight', -100, 1000);
     randMinMax(node, 0.5, 'top', -10, 10);
@@ -65,2 +69,3 @@ randMinMax(node, 0.5, 'left', -10, 10);
     randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']);
+    randEnum(node, 0.5, 'alignContent', ['flex-start', 'center', 'flex-end', 'stretch']);
     randEnum(node, 0.5, 'position', ['relative', 'absolute']);
@@ -67,0 +72,0 @@ randEnum(node, 0.5, 'flexWrap', ['nowrap', 'wrap']);

src/JavaTranspiler.js

@@ -14,2 +14,4 @@ /**
     .replace(/css_flex_direction_t/g, 'CSSFlexDirection')
+    .replace(/css_direction_t/g, 'CSSDirection')
+    .replace(/CSS_DIRECTION_/g, 'CSSDirection.')
     .replace(/CSS_FLEX_DIRECTION_/g, 'CSSFlexDirection.')
@@ -30,2 +32,3 @@ .replace(/css_align_t/g, 'CSSAlign')
     .replace(/isUndefined/g, 'CSSConstants.isUndefined')
+    .replace(/\/\*\(java\)!([^*]+)\*\//g, '$1')
 
@@ -37,3 +40,10 @@ // Since Java doesn't store its attributes in arrays, we need to use setters/getters to access
         '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(
@@ -55,6 +65,16 @@ /(\w+)\.layout\[(getDim\([^\)]+\))\]\s+=\s+([^;]+);/gm,
         })
+    .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();
+        })
+    .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();
+        })
     .replace( // layout.position[CSS_TOP] => layout.y
         /layout\.position\[CSS_(TOP|LEFT)\]/g,
         function (str, match1) {
-            return 'layout.' + (match1 === 'TOP' ? 'y' : 'x');
+            return 'layout.' + (match1 === 'TOP' ? 'top' : 'left');
         })
@@ -66,6 +86,12 @@ .replace( // style.position[CSS_TOP] => style.positionTop
         })
+    .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) {
+          var propertyCap = match1.charAt(0).toUpperCase() + match1.slice(1);
+          return 'set' + propertyCap + '(Spacing.' + match2 + ', ' + match3 + ')';
+        })
     .replace( // style.margin[CSS_TOP] => style.margin[Spacing.TOP]
-        /style\.(margin|border|padding)\[CSS_(TOP|BOTTOM|LEFT|RIGHT)\]/g,
+        /style\.(margin|border|padding)\[CSS_(TOP|BOTTOM|LEFT|RIGHT|START|END)\]/g,
         function (str, match1, match2) {
-          return 'style.' + match1 + '[Spacing.' + match2 + ']';
+          return 'style.' + match1 + '.get(Spacing.' + match2 + ')';
         })
@@ -100,2 +126,3 @@ .replace(/get_child\(.*context\,\s([^\)]+)\)/g, 'getChildAt($1)')
         .replace(/node.children\[i\]/g, 'node.getChildAt(i)')
+        .replace(/node.children\[ii\]/g, 'node.getChildAt(ii)')
         .replace(/fmaxf/g, 'Math.max')
@@ -122,4 +149,4 @@ .replace(/\/\*\([^\/]+\*\/\n/g, '') // remove comments for other languages
       allTestsInJava[i] =
-          "  @Test\n" +
-          "  public void testCase" + i + "()\n" +
+          '  @Test\n' +
+          '  public void testCase' + i + '()\n' +
           __transpileSingleTestToJava(allTestsInC[i]);
@@ -126,0 +153,0 @@ }

src/Layout-test-utils.js

@@ -9,6 +9,18 @@ /**
  */
-/* globals document, computeLayout */
+/* globals document, computeLayout, navigator */
 
 var layoutTestUtils = (function() {
 
+  //
+  // Sets the test cases precision, by default set to 1.0, aka pixel precision
+  // (assuming the browser does pixel snapping - and that we're ok with being
+  // 'only' pixel perfect).
+  //
+  // Set it to '10' for .1 precision, etc... in theory the browser is doing
+  // 'pixel' snapping so 1.0 should do, the code is left for clarity...
+  //
+  // Set it to undefined to disable and use full precision.
+  //
+  var testMeasurePrecision = 1.0;
+
   if (typeof jasmine !== 'undefined') {
@@ -95,3 +107,3 @@ jasmine.matchersUtil.buildFailureMessage = function () {
     } else {
-      setTimeout(getIframe, 0);
+      setTimeout(getIframe.bind(null, iframe), 0);
     }
@@ -107,6 +119,21 @@ }
     var fillNodes = computeLayout.fillNodes;
-    var extractNodes = computeLayout.extractNodes;
     var realComputeLayout = computeLayout.computeLayout;
   }
 
+  function extractNodes(node) {
+    var layout = node.layout;
+    delete node.layout;
+    if (node.children && node.children.length > 0) {
+      layout.children = node.children.map(extractNodes);
+    } else {
+      delete node.children;
+    }
+
+    delete layout.right;
+    delete layout.bottom;
+    delete layout.direction;
+
+    return layout;
+  }
+
   function roundLayout(layout) {
@@ -150,2 +177,6 @@ // Chrome rounds all the numbers with a precision of 1/64
 
+  function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
   function computeCSSLayout(rootNode) {
@@ -162,4 +193,6 @@ fillNodes(rootNode);
       if (name in node.style) {
-        div.style['-webkit-' + name] = node.style[name] + (ext || '');
-        div.style[name] = node.style[name] + (ext || '');
+        var value = node.style[name] + (ext || '');
+        div.style['-webkit-' + name] = value;
+        div.style['webkit' + capitalizeFirst(name)] = value;
+        div.style[name] = value;
       }
@@ -174,2 +207,4 @@ }
       transfer(div, node, type + 'Right' + suffix, 'px');
+      transfer(div, node, type + 'Start' + suffix, 'px');
+      transfer(div, node, type + 'End' + suffix, 'px');
     }
@@ -181,2 +216,6 @@
       transfer(div, node, 'height', 'px');
+      transfer(div, node, 'minWidth', 'px');
+      transfer(div, node, 'minHeight', 'px');
+      transfer(div, node, 'maxWidth', 'px');
+      transfer(div, node, 'maxHeight', 'px');
       transfer(div, node, 'top', 'px');
@@ -190,2 +229,3 @@ transfer(div, node, 'left', 'px');
       transfer(div, node, 'flexDirection');
+      transfer(div, node, 'direction');
       transfer(div, node, 'flex');
@@ -196,2 +236,3 @@ transfer(div, node, 'flexWrap');
       transfer(div, node, 'alignItems');
+      transfer(div, node, 'alignContent');
       transfer(div, node, 'position');
@@ -235,2 +276,23 @@ parent.appendChild(div);
 
+  function inplaceRoundNumbersInObject(obj) {
+    if (!testMeasurePrecision) {
+      // undefined/0, disables rounding
+      return;
+    }
+
+    for (var key in obj) {
+      if (!obj.hasOwnProperty(key)) {
+        continue;
+      }
+
+      var val = obj[key];
+      if (typeof val === 'number') {
+        obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) / testMeasurePrecision;
+      }
+      else if (typeof val === 'object') {
+        inplaceRoundNumbersInObject(val);
+      }
+    }
+  }
+
   function nameLayout(name, layout) {
@@ -346,2 +408,3 @@ var namedLayout = {name: name};
     div.style.alignItems = 'flex-start';
+    div.style.alignContent = 'flex-start';
 
@@ -352,2 +415,3 @@ var span = document.createElement('span');
     span.style.alignItems = 'flex-start';
+    span.style.alignContent = 'flex-start';
     span.innerText = text;
@@ -372,8 +436,15 @@
     smallWidth: 34.671875,
-    smallHeight: 16,
+    smallHeight: 18,
     bigWidth: 172.421875,
-    bigHeight: 32,
-    bigMinWidth: 100.453125
+    bigHeight: 36,
+    bigMinWidth: 100.4375
   };
 
+  // Note(prenaux): Clearly not what I would like, but it seems to be the only
+  //                way :( My guess is that since the font on Windows is
+  //                different than on OSX it has a different size.
+  if (typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Windows NT') > -1) {
+    preDefinedTextSizes.bigHeight = 36;
+  }
+
   var textSizes;
@@ -392,2 +463,7 @@ if (typeof require === 'function') {
 
+  // round the text sizes so that we dont have to update it for every browser
+  // update, assumes we're ok with pixel precision
+  inplaceRoundNumbersInObject(preDefinedTextSizes);
+  inplaceRoundNumbersInObject(textSizes);
+
   return {
@@ -400,10 +476,24 @@ texts: texts,
       var domLayout = computeDOMLayout(node);
+      inplaceRoundNumbersInObject(layout);
+      inplaceRoundNumbersInObject(domLayout);
+      inplaceRoundNumbersInObject(expectedLayout);
       testNamedLayout('expected-dom', expectedLayout, domLayout);
       testNamedLayout('layout-dom', layout, domLayout);
     },
+    testLayoutAgainstDomOnly: function(node) {
+      var layout = computeCSSLayout(node);
+      var domLayout = computeDOMLayout(node);
+      inplaceRoundNumbersInObject(layout);
+      inplaceRoundNumbersInObject(domLayout);
+      testNamedLayout('layout-dom', layout, domLayout);
+    },
     testFillNodes: testFillNodes,
     testExtractNodes: testExtractNodes,
     testRandomLayout: function(node) {
-      expect({node: node, layout: computeCSSLayout(node)})
-        .toEqual({node: node, layout: computeDOMLayout(node)});
+      var layout = computeCSSLayout(node);
+      var domLayout = computeDOMLayout(node);
+      inplaceRoundNumbersInObject(layout);
+      inplaceRoundNumbersInObject(domLayout);
+      expect({node: node, layout: layout})
+        .toEqual({node: node, layout: domLayout});
     },
@@ -410,0 +500,0 @@ testsFinished: function() {

src/Layout.js

@@ -14,4 +14,10 @@ /**
 
+  var CSS_DIRECTION_INHERIT = 'inherit';
+  var CSS_DIRECTION_LTR = 'ltr';
+  var CSS_DIRECTION_RTL = 'rtl';
+
   var CSS_FLEX_DIRECTION_ROW = 'row';
+  var CSS_FLEX_DIRECTION_ROW_REVERSE = 'row-reverse';
   var CSS_FLEX_DIRECTION_COLUMN = 'column';
+  var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse';
 
@@ -26,3 +32,3 @@ // var CSS_JUSTIFY_FLEX_START = 'flex-start';
   var CSS_ALIGN_CENTER = 'center';
-  // var CSS_ALIGN_FLEX_END = 'flex-end';
+  var CSS_ALIGN_FLEX_END = 'flex-end';
   var CSS_ALIGN_STRETCH = 'stretch';
@@ -34,16 +40,24 @@
   var leading = {
-    row: 'left',
-    column: 'top'
+    'row': 'left',
+    'row-reverse': 'right',
+    'column': 'top',
+    'column-reverse': 'bottom'
   };
   var trailing = {
-    row: 'right',
-    column: 'bottom'
+    'row': 'right',
+    'row-reverse': 'left',
+    'column': 'bottom',
+    'column-reverse': 'top'
   };
   var pos = {
-    row: 'left',
-    column: 'top'
+    'row': 'left',
+    'row-reverse': 'right',
+    'column': 'top',
+    'column-reverse': 'bottom'
   };
   var dim = {
-    row: 'width',
-    column: 'height'
+    'row': 'width',
+    'row-reverse': 'width',
+    'column': 'height',
+    'column-reverse': 'height'
   };
@@ -55,11 +69,15 @@
 
-  function getSpacing(node, type, suffix, location) {
-    var key = type + capitalizeFirst(location) + suffix;
-    if (key in node.style) {
-      return node.style[key];
-    }
+  function getSpacing(node, type, suffix, locations) {
+    for (var i = 0; i < locations.length; ++i) {
+      var location = locations[i];
 
-    key = type + suffix;
-    if (key in node.style) {
-      return node.style[key];
+      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];
+      }
     }
@@ -69,9 +87,18 @@
   }
+
+  // When transpiled to Java / C the node type has layout, children and style
+  // properties. For the JavaScript version this function adds these properties
+  // if they don't already exist.
   function fillNodes(node) {
-    node.layout = {
-      width: undefined,
-      height: undefined,
-      top: 0,
-      left: 0
-    };
+    if (!node.layout) {
+      node.layout = {
+        width: undefined,
+        height: undefined,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      };
+    }
+
     if (!node.style) {
@@ -81,3 +108,3 @@ node.style = {};
 
-    if (!node.children || node.style.measure) {
+    if (!node.children) {
       node.children = [];
@@ -89,22 +116,15 @@ }
 
-  function extractNodes(node) {
-    var layout = node.layout;
-    delete node.layout;
-    if (node.children && node.children.length > 0) {
-      layout.children = node.children.map(extractNodes);
-    } else {
-      delete node.children;
-    }
-    return layout;
-  }
+  function getPositiveSpacing(node, type, suffix, locations) {
+    for (var i = 0; i < locations.length; ++i) {
+      var location = locations[i];
 
-  function getPositiveSpacing(node, type, suffix, location) {
-    var key = type + capitalizeFirst(location) + suffix;
-    if (key in node.style && node.style[key] >= 0) {
-      return node.style[key];
-    }
+      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];
+      key = type + suffix;
+      if (key in node.style && node.style[key] >= 0) {
+        return node.style[key];
+      }
     }
@@ -119,24 +139,85 @@
 
-  function getMargin(node, location) {
-    return getSpacing(node, 'margin', '', location);
+  function isRowDirection(flexDirection) {
+    return flexDirection === CSS_FLEX_DIRECTION_ROW ||
+           flexDirection === CSS_FLEX_DIRECTION_ROW_REVERSE;
   }
 
-  function getPadding(node, location) {
-    return getPositiveSpacing(node, 'padding', '', location);
+  function isColumnDirection(flexDirection) {
+    return flexDirection === CSS_FLEX_DIRECTION_COLUMN ||
+           flexDirection === CSS_FLEX_DIRECTION_COLUMN_REVERSE;
   }
 
-  function getBorder(node, location) {
-    return getPositiveSpacing(node, 'border', 'Width', location);
+  function getLeadingLocations(axis) {
+    var locations = [leading[axis]];
+    if (isRowDirection(axis)) {
+      locations.unshift('start');
+    }
+
+    return locations;
   }
 
-  function getPaddingAndBorder(node, location) {
-    return getPadding(node, location) + getBorder(node, location);
+  function getTrailingLocations(axis) {
+    var locations = [trailing[axis]];
+    if (isRowDirection(axis)) {
+      locations.unshift('end');
+    }
+
+    return locations;
   }
 
+  function getMargin(node, locations) {
+    return getSpacing(node, 'margin', '', locations);
+  }
+
+  function getLeadingMargin(node, axis) {
+    return getMargin(node, getLeadingLocations(axis));
+  }
+
+  function getTrailingMargin(node, axis) {
+    return getMargin(node, getTrailingLocations(axis));
+  }
+
+  function getPadding(node, locations) {
+    return getPositiveSpacing(node, 'padding', '', locations);
+  }
+
+  function getLeadingPadding(node, axis) {
+    return getPadding(node, getLeadingLocations(axis));
+  }
+
+  function getTrailingPadding(node, axis) {
+    return getPadding(node, getTrailingLocations(axis));
+  }
+
+  function getBorder(node, locations) {
+    return getPositiveSpacing(node, 'border', 'Width', locations);
+  }
+
+  function getLeadingBorder(node, axis) {
+    return getBorder(node, getLeadingLocations(axis));
+  }
+
+  function getTrailingBorder(node, axis) {
+    return getBorder(node, getTrailingLocations(axis));
+  }
+
+  function getLeadingPaddingAndBorder(node, axis) {
+    return getLeadingPadding(node, axis) + getLeadingBorder(node, axis);
+  }
+
+  function getTrailingPaddingAndBorder(node, axis) {
+    return getTrailingPadding(node, axis) + getTrailingBorder(node, axis);
+  }
+
+  function getBorderAxis(node, axis) {
+    return getLeadingBorder(node, axis) + getTrailingBorder(node, axis);
+  }
+
   function getMarginAxis(node, axis) {
-    return getMargin(node, leading[axis]) + getMargin(node, trailing[axis]);
+    return getLeadingMargin(node, axis) + getTrailingMargin(node, axis);
   }
 
   function getPaddingAndBorderAxis(node, axis) {
-    return getPaddingAndBorder(node, leading[axis]) + getPaddingAndBorder(node, trailing[axis]);
+    return getLeadingPaddingAndBorder(node, axis) +
+        getTrailingPaddingAndBorder(node, axis);
   }
@@ -151,2 +232,9 @@
 
+  function getAlignContent(node) {
+    if ('alignContent' in node.style) {
+      return node.style.alignContent;
+    }
+    return 'flex-start';
+  }
+
   function getAlignItem(node, child) {
@@ -162,2 +250,29 @@ if ('alignSelf' in child.style) {
 
+  function resolveAxis(axis, direction) {
+    if (direction === CSS_DIRECTION_RTL) {
+      if (axis === CSS_FLEX_DIRECTION_ROW) {
+        return CSS_FLEX_DIRECTION_ROW_REVERSE;
+      } else if (axis === CSS_FLEX_DIRECTION_ROW_REVERSE) {
+        return CSS_FLEX_DIRECTION_ROW;
+      }
+    }
+
+    return axis;
+  }
+
+  function resolveDirection(node, parentDirection) {
+    var direction;
+    if ('direction' in node.style) {
+      direction = node.style.direction;
+    } else {
+      direction = CSS_DIRECTION_INHERIT;
+    }
+
+    if (direction === CSS_DIRECTION_INHERIT) {
+      direction = (parentDirection === undefined ? CSS_DIRECTION_LTR : parentDirection);
+    }
+
+    return direction;
+  }
+
   function getFlexDirection(node) {
@@ -167,5 +282,13 @@ if ('flexDirection' in node.style) {
     }
-    return 'column';
+    return CSS_FLEX_DIRECTION_COLUMN;
   }
 
+  function getCrossFlexDirection(flexDirection, direction) {
+    if (isColumnDirection(flexDirection)) {
+      return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
+    } else {
+      return CSS_FLEX_DIRECTION_COLUMN;
+    }
+  }
+
   function getPositionType(node) {
@@ -216,2 +339,27 @@ if ('position' in node.style) {
 
+  function boundAxis(node, axis, value) {
+    var min = {
+      'row': node.style.minWidth,
+      'row-reverse': node.style.minWidth,
+      'column': node.style.minHeight,
+      'column-reverse': node.style.minHeight
+    }[axis];
+
+    var max = {
+      'row': node.style.maxWidth,
+      'row-reverse': node.style.maxWidth,
+      'column': node.style.maxHeight,
+      'column-reverse': node.style.maxHeight
+    }[axis];
+
+    var boundValue = value;
+    if (!isUndefined(max) && max >= 0 && boundValue > max) {
+      boundValue = max;
+    }
+    if (!isUndefined(min) && min >= 0 && boundValue < min) {
+      boundValue = min;
+    }
+    return boundValue;
+  }
+
   function fmaxf(a, b) {
@@ -237,3 +385,3 @@ if (a > b) {
     node.layout[dim[axis]] = fmaxf(
-      node.style[dim[axis]],
+      boundAxis(node, axis, node.style[dim[axis]]),
       getPaddingAndBorderAxis(node, axis)
@@ -243,2 +391,7 @@ );
 
+  function setTrailingPosition(node, child, axis) {
+    child.layout[trailing[axis]] = node.layout[dim[axis]] -
+        child.layout[dim[axis]] - child.layout[pos[axis]];
+  }
+
   // If both left and right are defined, then use left. Otherwise return
@@ -253,9 +406,8 @@ // +left or -right depending on which is defined.
 
-  function layoutNode(node, parentMaxWidth) {
+  function layoutNode(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/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
-    var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
-      CSS_FLEX_DIRECTION_COLUMN :
-      CSS_FLEX_DIRECTION_ROW;
-
     // Handle width and height style attributes
@@ -265,20 +417,27 @@ setDimensionFromStyle(node, mainAxis);
 
+    // Set the resolved resolution in the node's layout
+    node.layout.direction = direction;
+
     // The position is set by the parent, but we need to complete it with a
     // delta composed of the margin and left/top/right/bottom
-    node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +
+    node.layout[leading[mainAxis]] += getLeadingMargin(node, mainAxis) +
       getRelativePosition(node, mainAxis);
-    node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
+    node.layout[trailing[mainAxis]] += getTrailingMargin(node, mainAxis) +
+      getRelativePosition(node, mainAxis);
+    node.layout[leading[crossAxis]] += getLeadingMargin(node, crossAxis) +
       getRelativePosition(node, crossAxis);
+    node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) +
+      getRelativePosition(node, crossAxis);
 
     if (isMeasureDefined(node)) {
       var/*float*/ width = CSS_UNDEFINED;
-      if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
+      if (isDimDefined(node, resolvedRowAxis)) {
         width = node.style.width;
-      } else if (!isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_ROW]])) {
-        width = node.layout[dim[CSS_FLEX_DIRECTION_ROW]];
+      } else if (!isUndefined(node.layout[dim[resolvedRowAxis]])) {
+        width = node.layout[dim[resolvedRowAxis]];
       } else {
         width = parentMaxWidth -
-          getMarginAxis(node, CSS_FLEX_DIRECTION_ROW);
+          getMarginAxis(node, resolvedRowAxis);
       }
-      width -= getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+      width -= getPaddingAndBorderAxis(node, resolvedRowAxis);
 
@@ -288,4 +447,4 @@ // 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, CSS_FLEX_DIRECTION_ROW) &&
-        isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_ROW]]);
+      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) &&
+        isUndefined(node.layout[dim[resolvedRowAxis]]);
       var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
@@ -298,2 +457,3 @@ isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
           /*(c)!node->context,*/
+          /*(java)!layoutContext.measureOutput,*/
           width
@@ -303,3 +463,3 @@ );
           node.layout.width = measureDim.width +
-            getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+            getPaddingAndBorderAxis(node, resolvedRowAxis);
         }
@@ -311,3 +471,5 @@ if (isColumnUndefined) {
       }
-      return;
+      if (node.children.length === 0) {
+        return;
+      }
     }
@@ -330,5 +492,5 @@
         child.layout[dim[crossAxis]] = fmaxf(
-          node.layout[dim[crossAxis]] -
+          boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
             getPaddingAndBorderAxis(node, crossAxis) -
-            getMarginAxis(child, crossAxis),
+            getMarginAxis(child, crossAxis)),
           // You never want to go smaller than padding
@@ -347,7 +509,7 @@ getPaddingAndBorderAxis(child, crossAxis)
             child.layout[dim[axis]] = fmaxf(
-              node.layout[dim[axis]] -
-              getPaddingAndBorderAxis(node, axis) -
-              getMarginAxis(child, axis) -
-              getPosition(child, leading[axis]) -
-              getPosition(child, trailing[axis]),
+              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
@@ -375,2 +537,3 @@ getPaddingAndBorderAxis(child, axis)
     var/*float*/ linesMainDim = 0;
+    var/*int*/ linesCount = 0;
     while (endLine < node.children.length) {
@@ -403,4 +566,5 @@ // <Loop A> Layout non flexible children and count children by type
           // Even if we don't know its exact size yet, we already know the padding,
-          // border and margin. We'll use this partial information to compute the
-          // remaining space.
+          // border and margin. We'll use this partial information, which represents
+          // the smallest possible size for the child, to compute the remaining
+          // available space.
           nextContentDim = getPaddingAndBorderAxis(child, mainAxis) +
@@ -411,10 +575,10 @@ getMarginAxis(child, mainAxis);
           maxWidth = CSS_UNDEFINED;
-          if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
+          if (!isRowDirection(mainAxis)) {
             maxWidth = parentMaxWidth -
-              getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
-              getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+              getMarginAxis(node, resolvedRowAxis) -
+              getPaddingAndBorderAxis(node, resolvedRowAxis);
 
-            if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
-              maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
-                getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+            if (isDimDefined(node, resolvedRowAxis)) {
+              maxWidth = node.layout[dim[resolvedRowAxis]] -
+                getPaddingAndBorderAxis(node, resolvedRowAxis);
             }
@@ -425,3 +589,3 @@ }
           if (alreadyComputedNextLayout === 0) {
-            layoutNode(child, maxWidth);
+            layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
           }
@@ -445,2 +609,3 @@
             i !== startLine) {
+          nonFlexibleChildrenCount--;
           alreadyComputedNextLayout = 1;
@@ -474,3 +639,23 @@ break;
         var/*float*/ flexibleMainDim = remainingMainDim / totalFlexible;
+        var/*float*/ baseMainDim;
+        var/*float*/ boundMainDim;
 
+        // 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 (baseMainDim !== boundMainDim) {
+              remainingMainDim -= boundMainDim;
+              totalFlexible -= getFlex(child);
+            }
+          }
+        }
+        flexibleMainDim = remainingMainDim / totalFlexible;
+
         // The non flexible children can overflow the container, in this case
@@ -489,17 +674,18 @@ // we should just assume that there is no space available.
             // dimension
-            child.layout[dim[mainAxis]] = flexibleMainDim * getFlex(child) +
-              getPaddingAndBorderAxis(child, mainAxis);
+            child.layout[dim[mainAxis]] = boundAxis(child, mainAxis,
+              flexibleMainDim * getFlex(child) + getPaddingAndBorderAxis(child, mainAxis)
+            );
 
             maxWidth = CSS_UNDEFINED;
-            if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
-              maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
-                getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
-            } else if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
+            if (isDimDefined(node, resolvedRowAxis)) {
+              maxWidth = node.layout[dim[resolvedRowAxis]] -
+                getPaddingAndBorderAxis(node, resolvedRowAxis);
+            } else if (!isRowDirection(mainAxis)) {
               maxWidth = parentMaxWidth -
-                getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
-                getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+                getMarginAxis(node, resolvedRowAxis) -
+                getPaddingAndBorderAxis(node, resolvedRowAxis);
             }
 
             // And we recursively call the layout algorithm for this child
-            layoutNode(child, maxWidth);
+            layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
           }
@@ -540,6 +726,7 @@ }
       var/*float*/ mainDim = leadingMainDim +
-        getPaddingAndBorder(node, leading[mainAxis]);
+        getLeadingPaddingAndBorder(node, mainAxis);
 
       for (i = startLine; i < endLine; ++i) {
         child = node.children[i];
+        child.lineIndex = linesCount;
 
@@ -552,4 +739,4 @@ if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
           child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
-            getBorder(node, leading[mainAxis]) +
-            getMargin(child, leading[mainAxis]);
+            getLeadingBorder(node, mainAxis) +
+            getLeadingMargin(child, mainAxis);
         } else {
@@ -559,2 +746,7 @@ // If the child is position absolute (without top/left) or relative,
           child.layout[pos[mainAxis]] += mainDim;
+
+          // Define the trailing position accordingly.
+          if (!isUndefined(node.layout[dim[mainAxis]])) {
+            setTrailingPosition(node, child, mainAxis);
+          }
         }
@@ -571,19 +763,6 @@
           // can only be one element in that cross dimension.
-          crossDim = fmaxf(crossDim, getDimWithMargin(child, crossAxis));
+          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
         }
       }
 
-      var/*float*/ containerMainAxis = node.layout[dim[mainAxis]];
-      // If the user didn't specify a width or height, and it has not been set
-      // by the container, then we set it via the children.
-      if (isUndefined(containerMainAxis)) {
-        containerMainAxis = fmaxf(
-          // We're missing the last padding at this point to get the final
-          // dimension
-          mainDim + getPaddingAndBorder(node, trailing[mainAxis]),
-          // We can never assign a width smaller than the padding and borders
-          getPaddingAndBorderAxis(node, mainAxis)
-        );
-      }
-
       var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]];
@@ -595,3 +774,3 @@ if (isUndefined(node.layout[dim[crossAxis]])) {
           // can mess this computation otherwise
-          crossDim + getPaddingAndBorderAxis(node, crossAxis),
+          boundAxis(node, crossAxis, crossDim + getPaddingAndBorderAxis(node, crossAxis)),
           getPaddingAndBorderAxis(node, crossAxis)
@@ -602,3 +781,2 @@ );
       // <Loop D> Position elements in the cross axis
-
       for (i = startLine; i < endLine; ++i) {
@@ -613,7 +791,7 @@ child = node.children[i];
           child.layout[pos[crossAxis]] = getPosition(child, leading[crossAxis]) +
-            getBorder(node, leading[crossAxis]) +
-            getMargin(child, leading[crossAxis]);
+            getLeadingBorder(node, crossAxis) +
+            getLeadingMargin(child, crossAxis);
 
         } else {
-          var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
+          var/*float*/ leadingCrossDim = getLeadingPaddingAndBorder(node, crossAxis);
 
@@ -629,5 +807,5 @@ // For a relative children, we're either using alignItems (parent) or
                 child.layout[dim[crossAxis]] = fmaxf(
-                  containerCrossAxis -
+                  boundAxis(child, crossAxis, containerCrossAxis -
                     getPaddingAndBorderAxis(node, crossAxis) -
-                    getMarginAxis(child, crossAxis),
+                    getMarginAxis(child, crossAxis)),
                   // You never want to go smaller than padding
@@ -654,2 +832,7 @@ getPaddingAndBorderAxis(child, crossAxis)
           child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
+
+          // Define the trailing position accordingly.
+          if (!isUndefined(node.layout[dim[crossAxis]])) {
+            setTrailingPosition(node, child, crossAxis);
+          }
         }
@@ -660,5 +843,91 @@ }
       linesMainDim = fmaxf(linesMainDim, mainDim);
+      linesCount += 1;
       startLine = endLine;
     }
 
+    // <Loop E>
+    //
+    // Note(prenaux): More than one line, we need to layout the crossAxis
+    // according to alignContent.
+    //
+    // Note that we could probably remove <Loop D> and handle the one line case
+    // here too, but for the moment this is safer since it won't interfere with
+    // previously working code.
+    //
+    // See specs:
+    // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
+    // section 9.4
+    //
+    if (linesCount > 1 &&
+        !isUndefined(node.layout[dim[crossAxis]])) {
+      var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
+          getPaddingAndBorderAxis(node, crossAxis);
+      var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
+
+      var/*float*/ crossDimLead = 0;
+      var/*float*/ currentLead = getLeadingPaddingAndBorder(node, crossAxis);
+
+      var/*css_align_t*/ alignContent = getAlignContent(node);
+      if (alignContent === CSS_ALIGN_FLEX_END) {
+        currentLead += remainingAlignContentDim;
+      } else if (alignContent === CSS_ALIGN_CENTER) {
+        currentLead += remainingAlignContentDim / 2;
+      } else if (alignContent === CSS_ALIGN_STRETCH) {
+        if (nodeCrossAxisInnerSize > linesCrossDim) {
+          crossDimLead = (remainingAlignContentDim / linesCount);
+        }
+      }
+
+      var/*int*/ endIndex = 0;
+      for (i = 0; i < linesCount; ++i) {
+        var/*int*/ startIndex = endIndex;
+
+        // compute the line's height and find the endIndex
+        var/*float*/ lineHeight = 0;
+        for (ii = startIndex; ii < node.children.length; ++ii) {
+          child = node.children[ii];
+          if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
+            continue;
+          }
+          if (child.lineIndex !== i) {
+            break;
+          }
+          if (!isUndefined(child.layout[dim[crossAxis]])) {
+            lineHeight = fmaxf(
+              lineHeight,
+              child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
+            );
+          }
+        }
+        endIndex = ii;
+        lineHeight += crossDimLead;
+
+        for (ii = startIndex; ii < endIndex; ++ii) {
+          child = node.children[ii];
+          if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
+            continue;
+          }
+
+          var/*css_align_t*/ alignContentAlignItem = getAlignItem(node, child);
+          if (alignContentAlignItem === CSS_ALIGN_FLEX_START) {
+            child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
+          } else if (alignContentAlignItem === CSS_ALIGN_FLEX_END) {
+            child.layout[pos[crossAxis]] = currentLead + lineHeight - getTrailingMargin(child, crossAxis) - child.layout[dim[crossAxis]];
+          } else if (alignContentAlignItem === CSS_ALIGN_CENTER) {
+            var/*float*/ childHeight = child.layout[dim[crossAxis]];
+            child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
+          } else if (alignContentAlignItem === CSS_ALIGN_STRETCH) {
+            child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
+            // TODO(prenaux): Correctly set the height of items with undefined
+            //                (auto) crossAxis dimension.
+          }
+        }
+
+        currentLead += lineHeight;
+      }
+    }
+
+    var/*bool*/ needsMainTrailingPos = false;
+    var/*bool*/ needsCrossTrailingPos = false;
+
     // If the user didn't specify a width or height, and it has not been set
@@ -670,6 +939,8 @@ // by the container, then we set it via the children.
         // dimension
-        linesMainDim + getPaddingAndBorder(node, trailing[mainAxis]),
+        boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
         // We can never assign a width smaller than the padding and borders
         getPaddingAndBorderAxis(node, mainAxis)
       );
+
+      needsMainTrailingPos = true;
     }
@@ -682,9 +953,25 @@
         // can mess this computation otherwise
-        linesCrossDim + getPaddingAndBorderAxis(node, crossAxis),
+        boundAxis(node, crossAxis, linesCrossDim + getPaddingAndBorderAxis(node, crossAxis)),
         getPaddingAndBorderAxis(node, crossAxis)
       );
+
+      needsCrossTrailingPos = true;
     }
 
-    // <Loop E> Calculate dimensions for absolutely positioned elements
+    // <Loop F> Set trailing position if necessary
+    if (needsMainTrailingPos || needsCrossTrailingPos) {
+      for (i = 0; i < node.children.length; ++i) {
+        child = node.children[i];
 
+        if (needsMainTrailingPos) {
+          setTrailingPosition(node, child, mainAxis);
+        }
+
+        if (needsCrossTrailingPos) {
+          setTrailingPosition(node, child, crossAxis);
+        }
+      }
+    }
+
+    // <Loop G> Calculate dimensions for absolutely positioned elements
     for (i = 0; i < node.children.length; ++i) {
@@ -702,7 +989,8 @@ child = node.children[i];
             child.layout[dim[axis]] = fmaxf(
-              node.layout[dim[axis]] -
-              getPaddingAndBorderAxis(node, axis) -
-              getMarginAxis(child, axis) -
-              getPosition(child, leading[axis]) -
-              getPosition(child, trailing[axis]),
+              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
@@ -729,24 +1017,11 @@ getPaddingAndBorderAxis(child, axis)
     computeLayout: layoutNode,
-    fillNodes: fillNodes,
-    extractNodes: extractNodes
+    fillNodes: fillNodes
   };
 })();
 
-// UMD (Universal Module Definition)
-// See https://github.com/umdjs/umd for reference
-(function (root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    // AMD. Register as an anonymous module.
-    define([], factory);
-  } else if (typeof exports === 'object') {
-    // Node. Does not work with strict CommonJS, but
-    // only CommonJS-like environments that support module.exports,
-    // like Node.
-    module.exports = factory();
-  } else {
-    // Browser globals (root is window)
-    root.returnExports = factory();
-  }
-}(this, function () {
-  return computeLayout;
-}));
+// 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 public API.
+if (typeof exports === 'object') {
+  module.exports = computeLayout;
+}

src/transpile.js

@@ -23,2 +23,4 @@ /**
   },
+  testLayoutAgainstDomOnly: function() {
+  },
   testRandomLayout: function(node, i) {
@@ -35,3 +37,4 @@ allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)});
 global.describe = function(name, cb) {
-  if (name === 'Layout') {
+  if (name === 'Layout' ||
+      name === 'Layout alignContent') {
     cb();
@@ -91,20 +94,22 @@ }
 
-    function addFloat(positive, node, jsKey, cKey) {
+    function addFloat(node, jsKey, cKey) {
       if (jsKey in node.style) {
-        if (positive !== 'positive' || node.style[jsKey] >= 0) {
-          addStyle(cKey + ' = ' + node.style[jsKey] + ';');
-        }
+        addStyle(cKey + ' = ' + node.style[jsKey] + ';');
       }
     }
 
-    function addSpacing(positive, node, spacing, suffix) {
-      addFloat(positive, node, spacing + suffix, spacing + '[CSS_LEFT]');
-      addFloat(positive, node, spacing + suffix, spacing + '[CSS_TOP]');
-      addFloat(positive, node, spacing + suffix, spacing + '[CSS_RIGHT]');
-      addFloat(positive, node, spacing + suffix, spacing + '[CSS_BOTTOM]');
+    function addSpacing(node, spacing, suffix) {
+      addFloat(node, spacing + suffix, spacing + '[CSS_LEFT]');
+      addFloat(node, spacing + suffix, spacing + '[CSS_TOP]');
+      addFloat(node, spacing + suffix, spacing + '[CSS_RIGHT]');
+      addFloat(node, spacing + suffix, spacing + '[CSS_BOTTOM]');
+      addFloat(node, spacing + suffix, spacing + '[CSS_START]');
+      addFloat(node, spacing + suffix, spacing + '[CSS_END]');
 
-      addFloat(positive, node, spacing + 'Left' + suffix, spacing + '[CSS_LEFT]');
-      addFloat(positive, node, spacing + 'Top' + suffix, spacing + '[CSS_TOP]');
-      addFloat(positive, node, spacing + 'Right' + suffix, spacing + '[CSS_RIGHT]');
-      addFloat(positive, node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
+      addFloat(node, spacing + 'Left' + suffix, spacing + '[CSS_LEFT]');
+      addFloat(node, spacing + 'Top' + suffix, spacing + '[CSS_TOP]');
+      addFloat(node, spacing + 'Right' + suffix, spacing + '[CSS_RIGHT]');
+      addFloat(node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
+      addFloat(node, spacing + 'Start' + suffix, spacing + '[CSS_START]');
+      addFloat(node, spacing + 'End' + suffix, spacing + '[CSS_END]');
     }
@@ -119,5 +124,11 @@
 
+    addEnum(node, 'direction', 'direction', {
+      'ltr': 'CSS_DIRECTION_LTR',
+      'rtl': 'CSS_DIRECTION_RTL'
+    });
     addEnum(node, 'flexDirection', 'flex_direction', {
       'row': 'CSS_FLEX_DIRECTION_ROW',
-      'column': 'CSS_FLEX_DIRECTION_COLUMN'
+      'row-reverse': 'CSS_FLEX_DIRECTION_ROW_REVERSE',
+      'column': 'CSS_FLEX_DIRECTION_COLUMN',
+      'column-reverse': 'CSS_FLEX_DIRECTION_COLUMN_REVERSE'
     });
@@ -131,2 +142,8 @@ addEnum(node, 'justifyContent', 'justify_content', {
     });
+    addEnum(node, 'alignContent', 'align_content', {
+      'flex-start': 'CSS_ALIGN_FLEX_START',
+      'center': 'CSS_ALIGN_CENTER',
+      'flex-end': 'CSS_ALIGN_FLEX_END',
+      'stretch': 'CSS_ALIGN_STRETCH'
+    });
     addEnum(node, 'alignItems', 'align_items', {
@@ -152,12 +169,16 @@ 'flex-start': 'CSS_ALIGN_FLEX_START',
     });
-    addFloat('positive', node, 'flex', 'flex');
-    addFloat('positive', node, 'width', 'dimensions[CSS_WIDTH]');
-    addFloat('positive', node, 'height', 'dimensions[CSS_HEIGHT]');
-    addSpacing('all', node, 'margin', '');
-    addSpacing('positive', node, 'padding', '');
-    addSpacing('positive', node, 'border', 'Width');
-    addFloat('all', node, 'left', 'position[CSS_LEFT]');
-    addFloat('all', node, 'top', 'position[CSS_TOP]');
-    addFloat('all', node, 'right', 'position[CSS_RIGHT]');
-    addFloat('all', node, 'bottom', 'position[CSS_BOTTOM]');
+    addFloat(node, 'flex', 'flex');
+    addFloat(node, 'width', 'dimensions[CSS_WIDTH]');
+    addFloat(node, 'height', 'dimensions[CSS_HEIGHT]');
+    addFloat(node, 'maxWidth', 'maxDimensions[CSS_WIDTH]');
+    addFloat(node, 'maxHeight', 'maxDimensions[CSS_HEIGHT]');
+    addFloat(node, 'minWidth', 'minDimensions[CSS_WIDTH]');
+    addFloat(node, 'minHeight', 'minDimensions[CSS_HEIGHT]');
+    addSpacing(node, 'margin', '');
+    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]');
+    addFloat(node, 'bottom', 'position[CSS_BOTTOM]');
     addMeasure(node);
@@ -234,7 +255,14 @@
     .replace(/\.height/g, '.dimensions[CSS_HEIGHT]')
+    .replace(/\.maxWidth/g, '.maxDimensions[CSS_WIDTH]')
+    .replace(/\.maxHeight/g, '.maxDimensions[CSS_HEIGHT]')
+    .replace(/\.minWidth/g, '.minDimensions[CSS_WIDTH]')
+    .replace(/\.minHeight/g, '.minDimensions[CSS_HEIGHT]')
+    .replace(/\.lineIndex/g, '.line_index')
     .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(/style\[dim/g, 'style.dimensions[dim')
     .replace(/node.children\[i\]/g, 'node->get_child(node->context, i)')
+    .replace(/node.children\[ii\]/g, 'node->get_child(node->context, ii)')
     .replace(/node\./g, 'node->')
@@ -249,2 +277,3 @@ .replace(/child\./g, 'child->')
     .replace(/\/[*]!([^*]+)[*]\//g, '$1')
+    .replace(/\/\*\(java\)!([^*]+)\*\//g, '')
     .split('\n').slice(1, -1).join('\n');
@@ -254,11 +283,10 @@ }
 function makeConstDefs() {
-  /* eslint no-multi-spaces: 3 */
   var lines = [
-    '#define SMALL_WIDTH '   + layoutTestUtils.textSizes.smallWidth,
-    '#define SMALL_HEIGHT '  + layoutTestUtils.textSizes.smallHeight,
-    '#define BIG_WIDTH '     + layoutTestUtils.textSizes.bigWidth,
-    '#define BIG_HEIGHT '    + layoutTestUtils.textSizes.bigHeight,
+    '#define SMALL_WIDTH ' + layoutTestUtils.textSizes.smallWidth,
+    '#define SMALL_HEIGHT ' + layoutTestUtils.textSizes.smallHeight,
+    '#define BIG_WIDTH ' + layoutTestUtils.textSizes.bigWidth,
+    '#define BIG_HEIGHT ' + layoutTestUtils.textSizes.bigHeight,
     '#define BIG_MIN_WIDTH ' + layoutTestUtils.textSizes.bigMinWidth,
-    '#define SMALL_TEXT "'   + layoutTestUtils.texts.small + '"',
-    '#define LONG_TEXT "'    + layoutTestUtils.texts.big + '"'
+    '#define SMALL_TEXT "' + layoutTestUtils.texts.small + '"',
+    '#define LONG_TEXT "' + layoutTestUtils.texts.big + '"'
   ];
@@ -265,0 +293,0 @@ return lines.join('\n');

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1262723

increased by176.49%

Number of package files

60

increased by13.21%

Lines of code

5153

increased by92.06%

Number of lines in readme file

139

increased by69.51%

Worsened metrics

Dev dependency count

17

increased by240%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes