diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index 613378cc..9f369380 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -1,6 +1,4 @@ - - function setupIframe(callback) { var iframe = document.createElement('iframe'); document.body.appendChild(iframe); @@ -51,8 +49,8 @@ function computeDOMLayout(node) { var result = { width: rect.width, height: rect.height, - left: rect.left - parentRect.left, - top: rect.top - parentRect.top + top: rect.top - parentRect.top, + left: rect.left - parentRect.left }; var children = []; @@ -74,6 +72,7 @@ function testLayout(node, expectedLayout) { var domLayout = computeDOMLayout(node); expect(layout).toEqual(expectedLayout) expect(layout).toEqual(domLayout); + expect(expectedLayout).toEqual(domLayout); } describe('Layout', function() { @@ -144,5 +143,23 @@ describe('Layout', function() { width: 100, height: 200, top: 10, left: 10 }); }); + + it('should layout node with several children', function() { + testLayout({ + style: {width: 1000, height: 1000, margin: 10}, + children: [ + {style: {width: 100, height: 100, margin: 50}}, + {style: {width: 100, height: 100, margin: 25}}, + {style: {width: 100, height: 100, margin: 10}} + ] + }, { + width: 1000, height: 1000, top: 10, left: 10, + children: [ + {width: 100, height: 100, top: 50, left: 50}, + {width: 100, height: 100, top: 225, left: 25}, + {width: 100, height: 100, top: 360, left: 10} + ] + }); + }); }); diff --git a/src/Layout.js b/src/Layout.js index 01b3d842..9351bd9b 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -16,7 +16,7 @@ function computeLayout(node) { top: top, left: 0 })); - top += child.style.height; + top += child.style.height + 2 * getMargin(child); }); var result = {