flexDirection: 'row'

spec/LayoutSpec.js

@@ -24,17 +24,18 @@ var iframe = null;
 function computeDOMLayout(node) {
   var body = iframe.contentDocument.body;
 
-  function transferPx(div, node, name) {
+  function transfer(div, node, name, ext) {
     if (name in node.style) {
-      div.style[name] = node.style[name] + 'px';
+      div.style[name] = node.style[name] + (ext || '');
     }
   }
 
   function renderNode(parent, node) {
     var div = document.createElement('div');
-    transferPx(div, node, 'width');
+    transfer(div, node, 'width', 'px');
-    transferPx(div, node, 'height');
+    transfer(div, node, 'height', 'px');
-    transferPx(div, node, 'margin');
+    transfer(div, node, 'margin', 'px');
+    transfer(div, node, 'flexDirection');
     parent.appendChild(div);
     (node.children || []).forEach(function(child) {
       renderNode(div, child);
@@ -161,5 +162,21 @@ describe('Layout', function() {
       ]
     });
   });
+
+  it('should layout node with row flex direction', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, flexDirection: 'row'},
+      children: [
+        {style: {width: 100, height: 200}},
+        {style: {width: 300, height: 150}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 200, top: 0, left: 0},
+        {width: 300, height: 150, top: 0, left: 100}
+      ]
+    });
+  });
 });
 

src/Layout.js

@@ -8,22 +8,35 @@ function computeLayout(node) {
     return 0;
   }
 
+  var pos = {
+    row: 'left',
+    column: 'top'
+  };
+  var dim = {
+    row: 'width',
+    column: 'height'
+  };
+
   function layoutNode(node, parent) {
-    var top = 0;
+    var mainAxis = node.style.flexDirection === 'row' ? 'row' : 'column';
+    var crossAxis = mainAxis === 'row' ? 'column' : 'row';
+
+    var mainPos = 0;
     var children = [];
     (node.children || []).forEach(function(child) {
-      children.push(layoutNode(child, {
+      var offset = {};
-        top: top,
+      offset[pos[mainAxis]] = mainPos;
-        left: 0
+      offset[pos[crossAxis]] = 0;
-      }));
+      children.push(layoutNode(child, offset));
-      top += child.style.height + 2 * getMargin(child);
+
+      mainPos += child.style[dim[mainAxis]] + 2 * getMargin(child);
     });
 
     var result = {
       width: node.style.width,
       height: node.style.height,
-      top: getMargin(node) + parent.top + 0,
+      top: getMargin(node) + parent.top,
-      left: getMargin(node) + parent.left + 0
+      left: getMargin(node) + parent.left
     };
 
     if (children.length > 0) {