diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index fd471e3f..0004c618 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -460,6 +460,21 @@ describe('Layout', function() { }); }); + it('should layout child with margin', function() { + testLayout({ + style: {}, + children: [ + {style: {margin: 5}} + ] + }, { + width: 10, height: 10, top: 0, left: 0, + children: [ + {width: 0, height: 0, top: 5, left: 5} + ] + }); + }); + + it('should layout randomly', function() { function RNG(seed) { this.state = seed; @@ -476,6 +491,14 @@ describe('Layout', function() { node.style[attribute] = Math.floor(rng.nextFloat() * (max - min)) + min; } } + function randChildren(node, chance) { + while (Math.random() < chance) { + if (!node.children) { + node.children = []; + } + node.children.push(generateRandomNode()); + } + } function generateRandomNode() { var node = {style: {}}; randMinMax(node, 0.1, 'width', 0, 1000); @@ -485,6 +508,7 @@ describe('Layout', function() { randMinMax(node, 0.1, 'marginTop', -5, 20); randMinMax(node, 0.1, 'marginRight', -5, 20); randMinMax(node, 0.1, 'marginBottom', -5, 20); + randChildren(node, 0.2); return node; } diff --git a/src/Layout.js b/src/Layout.js index e8d1c6b3..bc8f32b4 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -154,8 +154,12 @@ function computeLayout(node) { betweenMainDim; if (child.layout[dim[crossAxis]] !== undefined) { - if (child.layout[dim[crossAxis]] > crossDim) { - crossDim = child.layout[dim[crossAxis]]; + var childCrossDim = child.layout[dim[crossAxis]] + + getMargin(leading[crossAxis], child) + + getMargin(trailing[crossAxis], child); + + if (childCrossDim > crossDim) { + crossDim = childCrossDim; } } }); @@ -178,7 +182,9 @@ function computeLayout(node) { } else if (alignItem === 'flex-end') { leadingCrossDim = remainingCrossDim; } else if (alignItem === 'stretch') { - child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]]; + child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] - + getMargin(leading[crossAxis], child) - + getMargin(trailing[crossAxis], child); } child.layout[pos[crossAxis]] += leadingCrossDim; });