diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index dc7cde93..c7889973 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -485,6 +485,14 @@ describe('Layout', function() { }); }); + it('should layout for center', function() { + testLayout({ + style: {justifyContent: 'center'} + }, { + width: 0, height: 0, top: 0, left: 0, + }); + }); + it('should layout randomly', function() { function RNG(seed) { this.state = seed; @@ -501,6 +509,11 @@ describe('Layout', function() { node.style[attribute] = Math.floor(rng.nextFloat() * (max - min)) + min; } } + function randEnum(node, chance, attribute, enumValues) { + if (rng.nextFloat() < chance) { + node.style[attribute] = enumValues[Math.floor(rng.nextFloat() * enumValues.length)]; + } + } function randChildren(node, chance) { while (rng.nextFloat() < chance) { if (!node.children) { @@ -518,6 +531,8 @@ describe('Layout', function() { randMinMax(node, 0.1, 'marginTop', -5, 20); randMinMax(node, 0.1, 'marginRight', -5, 20); randMinMax(node, 0.1, 'marginBottom', -5, 20); + randEnum(node, 0.1, 'flexDirection', ['row', 'column']); + randEnum(node, 0.1, 'justifyContent', ['flex-start', 'center', 'flex-end', 'space-between', 'space-around']); randChildren(node, 0.2); return node; } diff --git a/src/Layout.js b/src/Layout.js index 8393daad..957f18fe 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -117,30 +117,32 @@ function computeLayout(node) { } }); - var remainingMainDim = node.layout[dim[mainAxis]] - mainContentDim; var leadingMainDim = 0; var betweenMainDim = 0; - if (flexibleChildrenCount) { - var flexibleMainDim = remainingMainDim / flexibleChildrenCount; - children.forEach(function(child) { - if (child.style.flex) { - child.layout[dim[mainAxis]] = flexibleMainDim; - layoutNode(child); + if (node.layout[dim[mainAxis]] !== undefined) { + var remainingMainDim = node.layout[dim[mainAxis]] - mainContentDim; + if (flexibleChildrenCount) { + var flexibleMainDim = remainingMainDim / flexibleChildrenCount; + children.forEach(function(child) { + if (child.style.flex) { + child.layout[dim[mainAxis]] = flexibleMainDim; + layoutNode(child); + } + }); + } else { + var justifyContent = getJustifyContent(node); + if (justifyContent == 'flex-start') { + // Do nothing + } else if (justifyContent === 'flex-end') { + leadingMainDim = remainingMainDim; + } else if (justifyContent === 'center') { + leadingMainDim = remainingMainDim / 2; + } else if (justifyContent === 'space-between') { + betweenMainDim = remainingMainDim / (children.length - 1); + } else if (justifyContent === 'space-around') { + betweenMainDim = remainingMainDim / children.length; + leadingMainDim = betweenMainDim / 2; } - }); - } else { - var justifyContent = getJustifyContent(node); - if (justifyContent == 'flex-start') { - // Do nothing - } else if (justifyContent === 'flex-end') { - leadingMainDim = remainingMainDim; - } else if (justifyContent === 'center') { - leadingMainDim = remainingMainDim / 2; - } else if (justifyContent === 'space-between') { - betweenMainDim = remainingMainDim / (children.length - 1); - } else if (justifyContent === 'space-around') { - betweenMainDim = remainingMainDim / children.length; - leadingMainDim = betweenMainDim / 2; } }