position: absolute, top and left

src/Layout.js

@@ -102,6 +102,10 @@ var computeLayout = (function() {
     return !isUndefined(node.style[dim[axis]]);
   }
 
+  function isPosDefined(node, pos) {
+    return !isUndefined(node.style[pos]);
+  }
+
 
   function getPosition(node, pos) {
     if (pos in node.style) {
@@ -226,7 +230,11 @@ var computeLayout = (function() {
     var/*float*/ mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim;
     for (var/*int*/ i = 0; i < node.children.length; ++i) {
       var/*css_node_t**/ child = node.children[i];
-      child.layout[pos[mainAxis]] += mainPos;
+      if (getPositionType(child) === 'absolute' && isPosDefined(child, leading[mainAxis])) {
+        child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]);
+      } else {
+        child.layout[pos[mainAxis]] += mainPos;
+      }
       if (getPositionType(child) === 'relative') {
         mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim;
 

src/__tests__/Layout-test.js

@@ -535,7 +535,7 @@ describe('Layout', function() {
     );
   });
 
-  it('should layout node with specified width', function() {
+  it('should layout node with padding and child with position absolute', function() {
     testLayout(
       {style: {padding: 5}, children: [
         {style: {position: 'absolute'}}
@@ -546,6 +546,19 @@ describe('Layout', function() {
     );
   });
 
+  it('should layout node with position absolute, top and left', function() {
+    testLayout(
+      {style: {}, children: [
+        {style: {height: 100}},
+        {style: {position: 'absolute', top: 10, left: 10}}
+      ]},
+      {width: 0, height: 100, top: 0, left: 0, children: [
+        {width: 0, height: 100, top: 0, left: 0},
+        {width: 0, height: 0, top: 10, left: 10}
+      ]}
+    );
+  });
+
   it('should layout randomly', function() {
     function RNG(seed) {
       this.state = seed;
@@ -559,7 +572,7 @@ describe('Layout', function() {
     var rng = new RNG(0);
     function randMinMax(node, chance, attribute, min, max) {
       if (rng.nextFloat() < chance) {
-        if (attribute === 'left' || attribute === 'top' || attribute === 'right' || attribute === 'bottom') {
+        if (attribute === 'right' || attribute === 'bottom') {
           return;
         }
         node.style[attribute] = Math.floor(rng.nextFloat() * (max - min)) + min;