diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 1dca0677..7a7686d1 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -109,14 +109,6 @@ var layoutTestUtils = (function() { return JSON.stringify(a) === JSON.stringify(b); } - function printNode(node) { - console.log( - JSON.stringify(node) - .replace(/"([a-zA-Z]+)":/g, '$1: ') - .replace(/,/g, ', ') - .replace(/"/g, '\'') - ); - } function reduceTest(node) { function isWorking() { return isEqual( @@ -125,7 +117,7 @@ var layoutTestUtils = (function() { ); } if (isWorking()) { - return console.log('Bail early, already working'); + return node; } var isModified = true; @@ -180,9 +172,7 @@ var layoutTestUtils = (function() { rec(node); } - printNode(node); - printNode(computeDOMLayout(node)); - printNode(computeLayout(node)); + return node; } return { @@ -196,6 +186,7 @@ var layoutTestUtils = (function() { expect({i: i, node: node, layout: computeLayout(node)}) .toEqual({i: i, node: node, layout: computeDOMLayout(node)}); }, + computeLayout: computeLayout, computeDOMLayout: computeDOMLayout, reduceTest: reduceTest } diff --git a/src/Layout.js b/src/Layout.js index 54ded250..1ca26500 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -180,12 +180,15 @@ var computeLayout = (function() { var/*float*/ mainContentDim = 0; var/*int*/ flexibleChildrenCount = 0; + var/*int*/ absoluteChildrenCount = 0; for (var/*int*/ i = 0; i < node.children.length; ++i) { var/*css_node_t**/ child = node.children[i]; if (isUndefined(node.layout[dim[mainAxis]]) || !getFlex(child)) { layoutNode(child); if (getPositionType(child) === 'relative') { mainContentDim += getDimWithMargin(child, mainAxis); + } else { + absoluteChildrenCount++; } } else { flexibleChildrenCount++; @@ -218,9 +221,9 @@ var computeLayout = (function() { } else if (justifyContent == CSS_JUSTIFY_FLEX_END) { leadingMainDim = remainingMainDim; } else if (justifyContent == CSS_JUSTIFY_SPACE_BETWEEN) { - betweenMainDim = remainingMainDim / (node.children.length - 1); + betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount - 1); } else if (justifyContent == CSS_JUSTIFY_SPACE_AROUND) { - betweenMainDim = remainingMainDim / node.children.length; + betweenMainDim = remainingMainDim / (node.children.length - absoluteChildrenCount); leadingMainDim = betweenMainDim / 2; } } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 04bcfe0e..f34b6361 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -1,6 +1,9 @@ var testLayout = layoutTestUtils.testLayout; var testRandomLayout = layoutTestUtils.testRandomLayout; +var computeLayout = layoutTestUtils.computeLayout; +var computeDOMLayout = layoutTestUtils.computeDOMLayout; +var reduceTest = layoutTestUtils.reduceTest; describe('Layout', function() { it('should layout a single node with width and height', function() { @@ -592,6 +595,19 @@ describe('Layout', function() { ); }); + it('should layout node with space-around and child position absolute', function() { + testLayout( + {style: {height: 200, justifyContent: 'space-around'}, children: [ + {style: {position: 'absolute'}}, + {style: {}} + ]}, + {width: 0, height: 200, top: 0, left: 0, children: [ + {width: 0, height: 0, top: 100, left: 0}, + {width: 0, height: 0, top: 100, left: 0} + ]} + ); + }) + it('should layout randomly', function() { function RNG(seed) { this.state = seed; @@ -651,9 +667,13 @@ describe('Layout', function() { return node; } - for (var i = 0; i < 1000; ++i) { + for (var i = 0; i < 100; ++i) { var node = generateRandomNode(); + if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout)) { + node = reduceTest(node); + } + // The iframe's body has a natural width of 300 that it doesn't really make // to replicate in the test suite. The easiest workaround is not to test // alignSelf, position and flex properties on the root element.