diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index d5958b97..d920b8f5 100644 --- a/src/Layout-test-utils.js +++ b/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); diff --git a/src/Layout.js b/src/Layout.js index b78667d3..db06c972 100755 --- a/src/Layout.js +++ b/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; diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index d89070ba..6ebc63af 100755 --- a/src/__tests__/Layout-test.js +++ b/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)]; } }