simple top left

spec/LayoutSpec.js

@@ -9,6 +9,7 @@ var iframe = (function() {
   style.innerText = (function() {/*
     body, div {
       box-sizing: border-box;
+      position: relative;
 
       display: flex;
       flex-direction: column;
@@ -46,6 +47,8 @@ function computeDOMLayout(node) {
     var div = document.createElement('div');
     transfer(div, node, 'width', 'px');
     transfer(div, node, 'height', 'px');
+    transfer(div, node, 'top', 'px');
+    transfer(div, node, 'left', 'px');
     transferSpacing(div, node, 'margin');
     transferSpacing(div, node, 'padding');
     transfer(div, node, 'flexDirection');
@@ -539,6 +542,13 @@ describe('Layout', function() {
     );
   });
 
+  it('should layout node with top', function() {
+    testLayout(
+      {style: {top: 5, left: 5}},
+      {width: 0, height: 0, top: 5, left: 5}
+    );
+  });
+
   it('should layout randomly', function() {
     function RNG(seed) {
       this.state = seed;

src/Layout.js

@@ -84,6 +84,13 @@ function computeLayout(node) {
       getMargin(node, trailing[axis]);
   }
 
+  function getPosition(node, pos) {
+    if (pos in node.style) {
+      return node.style[pos];
+    }
+    return 0;
+  }
+
   var axis = {
     left: 'horizontal',
     right: 'horizontal',
@@ -211,8 +218,10 @@ function computeLayout(node) {
       child.layout[pos[crossAxis]] += leadingCrossDim;
     });
 
-    node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]);
-    node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]);
+    node.layout[leading[mainAxis]] += getMargin(node, leading[mainAxis]) +
+      getPosition(node, leading[mainAxis]);
+    node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
+      getPosition(node, leading[crossAxis]);
   }
 
   fillNodes(node);