handling when height/width is smaller than the padding

src/Layout-test-utils.js

@@ -163,7 +163,10 @@ var layoutTestUtils = (function() {
       for (var i = 0; node.children && i < node.children.length; ++i) {
         var value = node.children[i];
         node.children.splice(i, 1);
-        if (isWorking() && node.children) {
+        if (isWorking()) {
+          if (!node.children) {
+            node.children = [];
+          }
           node.children.splice(i, 0, value);
           rec(node.children[i]);
         } else {
@@ -179,10 +182,9 @@ var layoutTestUtils = (function() {
 
     printNode(node);
     printNode(computeDOMLayout(node));
+    printNode(computeLayout(node));
   }
 
-reduceTest({ style : { top : 0, marginLeft : 18 }, children : [ { style : { left : -7, paddingRight : 2, alignItems : 'stretch' }, children : [ { style : { left : 9 } }, { style : { width : 377, top : 0, marginTop : 0, flexDirection : 'column' } }, { style : { paddingTop : 10 } } ] }, { style : { width : 222, paddingTop : 1, alignSelf : 'stretch' } }, { style : { width : 61, left : 3 } } ] })
-
   return {
     testLayout: function(node, expectedLayout) {
       var layout = computeLayout(node);

src/Layout.js

@@ -158,12 +158,20 @@ var computeLayout = (function() {
 
     var/*bool*/ mainDimInStyle = isDimDefined(node, mainAxis);
     if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) {
-      node.layout[dim[mainAxis]] = node.style[dim[mainAxis]];
+      node.layout[dim[mainAxis]] = Math.max(
+        node.style[dim[mainAxis]],
+        getPadding(node, leading[mainAxis]) +
+          getPadding(node, trailing[mainAxis])
+      );
     }
 
     var/*bool*/ crossDimInStyle = isDimDefined(node, crossAxis);
     if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) {
-      node.layout[dim[crossAxis]] = node.style[dim[crossAxis]];
+      node.layout[dim[crossAxis]] = Math.max(
+        node.style[dim[crossAxis]],
+        getPadding(node, leading[crossAxis]) +
+          getPadding(node, trailing[crossAxis])
+      );
     }
 
     var/*float*/ mainContentDim = 0;

src/__tests__/Layout-test.js

@@ -495,7 +495,7 @@ describe('Layout', function() {
 
   it('should layout node with position: absolute, padding and alignSelf: center', function() {
     testLayout(
-      {style : {}, children : [
+      {style: {}, children: [
         {style: {paddingRight: 12, alignSelf: 'center', position: 'absolute'}}
       ]},
       {width: 0, height: 0, top: 0, left: 0, children: [
@@ -504,6 +504,20 @@ describe('Layout', function() {
     );
   });
 
+  it('should work with height smaller than paddingBottom', function() {
+    testLayout(
+      {style: {height: 5, paddingBottom: 20}},
+      {width: 0, height: 20, top: 0, left: 0}
+    );
+  });
+
+  it('should work with width smaller than paddingLeft', function() {
+    testLayout(
+      {style: {width: 5, paddingLeft: 20}},
+      {width: 20, height: 0, top: 0, left: 0}
+    );
+  });
+
   it('should layout randomly', function() {
     function RNG(seed) {
       this.state = seed;
@@ -517,11 +531,17 @@ 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') {
+          return;
+        }
         node.style[attribute] = Math.floor(rng.nextFloat() * (max - min)) + min;
       }
     }
     function randEnum(node, chance, attribute, enumValues) {
       if (rng.nextFloat() < chance) {
+        if (attribute === 'position') {
+          return;
+        }
         node.style[attribute] = enumValues[Math.floor(rng.nextFloat() * enumValues.length)];
       }
     }