targetted margin

spec/LayoutSpec.js

@@ -35,6 +35,10 @@ function computeDOMLayout(node) {
     transfer(div, node, 'width', 'px');
     transfer(div, node, 'height', 'px');
     transfer(div, node, 'margin', 'px');
+    transfer(div, node, 'marginLeft', 'px');
+    transfer(div, node, 'marginTop', 'px');
+    transfer(div, node, 'marginBottom', 'px');
+    transfer(div, node, 'marginRight', 'px');
     transfer(div, node, 'flexDirection');
     transfer(div, node, 'flex');
     parent.appendChild(div);
@@ -249,5 +253,23 @@ describe('Layout', function() {
       }]
     });
   });
+
+  it('should layout node with targetted margin', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5},
+      children: [
+        {style: {width: 100, height: 100,
+                 marginTop: 50, marginLeft: 15, marginBottom: 20}},
+        {style: {width: 100, height: 100, marginLeft: 30}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 10, left: 5,
+      children: [
+        {width: 100, height: 100, top: 50, left: 15},
+        {width: 100, height: 100, top: 170, left: 30}
+      ]
+    });
+  });
+
 });
 

src/Layout.js

@@ -20,13 +20,42 @@ function computeLayout(node) {
     return layout;
   }
 
-  function getMargin(node) {
+  function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  function getMargin(location, node) {
+    var key = 'margin' + capitalizeFirst(location);
+    if (key in node.style) {
+      return node.style[key];
+    }
+
+    key = 'margin' + capitalizeFirst(axis[location]);
+    if (key in node.style) {
+      return node.style[key];
+    }
+
     if ('margin' in node.style) {
       return node.style.margin;
     }
+
     return 0;
   }
 
+  var axis = {
+    left: 'horizontal',
+    right: 'horizontal',
+    top: 'vertical',
+    bottom: 'vertical'
+  };
+  var leading = {
+    row: 'left',
+    column: 'top'
+  };
+  var trailing = {
+    row: 'right',
+    column: 'bottom'
+  };
   var pos = {
     row: 'left',
     column: 'top'
@@ -71,15 +100,17 @@ function computeLayout(node) {
     var mainPos = 0;
     children.forEach(function(child) {
       child.layout[pos[mainAxis]] += mainPos;
-      mainPos += child.layout[dim[mainAxis]] + 2 * getMargin(child);
+      mainPos += child.layout[dim[mainAxis]] +
+        getMargin(leading[mainAxis], child) +
+        getMargin(trailing[mainAxis], child);
     });
 
     if (node.layout[dim[mainAxis]] === undefined && !mainDimInStyle) {
       node.layout[dim[mainAxis]] = mainPos;
     }
     node.layout[dim[crossAxis]] = node.style[dim[crossAxis]];
-    node.layout.top += getMargin(node);
+    node.layout[leading[mainAxis]] += getMargin(leading[mainAxis], node);
-    node.layout.left += getMargin(node);
+    node.layout[leading[crossAxis]] += getMargin(leading[crossAxis], node);
   }
 
   fillNodes(node);