diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index 4b3a4d35..613378cc 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -36,6 +36,7 @@ function computeDOMLayout(node) { var div = document.createElement('div'); transferPx(div, node, 'width'); transferPx(div, node, 'height'); + transferPx(div, node, 'margin'); parent.appendChild(div); (node.children || []).forEach(function(child) { renderNode(div, child); @@ -135,5 +136,13 @@ describe('Layout', function() { }] }); }); + + it('should layout node with margin', function() { + testLayout({ + style: {width: 100, height: 200, margin: 10} + }, { + width: 100, height: 200, top: 10, left: 10 + }); + }); }); diff --git a/src/Layout.js b/src/Layout.js index 123ccb31..01b3d842 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1,6 +1,13 @@ function computeLayout(node) { + function getMargin(node) { + if ('margin' in node.style) { + return node.style.margin; + } + return 0; + } + function layoutNode(node, parent) { var top = 0; var children = []; @@ -15,8 +22,8 @@ function computeLayout(node) { var result = { width: node.style.width, height: node.style.height, - top: parent.top + 0, - left: parent.left + 0 + top: getMargin(node) + parent.top + 0, + left: getMargin(node) + parent.left + 0 }; if (children.length > 0) {