diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 2c135b33..b2e7ca2a 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -26,12 +26,11 @@ var layoutTestUtils = (function() { return iframe; })(); + var body = iframe.contentDocument.body; var realComputeLayout = computeLayout; function computeCSSLayout(rootNode) { - var body = iframe.contentDocument.body; - function fillNodes(node) { node.layout = { width: undefined, @@ -43,25 +42,7 @@ var layoutTestUtils = (function() { node.style = {}; } - if ('text' in node.style) { - node.style.measure = function(width) { - var span = document.createElement('span'); - span.style.position = 'absolute'; - if (width !== undefined) { - span.style.width = width + 'px'; - } - span.innerText = node.style.text; - body.appendChild(span); - var rect = span.getBoundingClientRect(); - body.removeChild(span); - return { - width: rect.width, - height: rect.height - }; - } - } - - if (!node.children) { + if (!node.children || node.style.measure) { node.children = []; } node.children.forEach(fillNodes); @@ -109,8 +90,8 @@ var layoutTestUtils = (function() { (node.children || []).forEach(function(child) { renderNode(div, child); }); - if (node.style.text) { - div.innerText = node.style.text; + if (node.style.measure) { + div.innerText = node.style.measure.toString(); } return div; } @@ -239,6 +220,25 @@ var layoutTestUtils = (function() { }, computeLayout: computeCSSLayout, computeDOMLayout: computeDOMLayout, - reduceTest: reduceTest + reduceTest: reduceTest, + text: function(text) { + var fn = function(width) { + var span = document.createElement('span'); + span.style.position = 'absolute'; + if (width !== undefined) { + span.style.width = width + 'px'; + } + span.innerText = text; + body.appendChild(span); + var rect = span.getBoundingClientRect(); + body.removeChild(span); + return { + width: rect.width, + height: rect.height + }; + }; + fn.toString = function() { return text; } + return fn; + } } })(); diff --git a/src/Layout.js b/src/Layout.js index e831fb6c..0b7a199c 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -217,8 +217,12 @@ var computeLayout = (function() { if ('measure' in node.style) { var dimensions = node.style.measure(node.style.width); - node.layout.width = dimensions.width; - node.layout.height = dimensions.height; + if (!isDimDefined(node, 'row')) { + node.layout.width = dimensions.width + getPaddingAndBorderAxis(node, 'row'); + } + if (!isDimDefined(node, 'column')) { + node.layout.height = dimensions.height + getPaddingAndBorderAxis(node, 'column'); + } return; } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index ad8e55f6..5941a502 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -4,6 +4,7 @@ var testRandomLayout = layoutTestUtils.testRandomLayout; var computeLayout = layoutTestUtils.computeLayout; var computeDOMLayout = layoutTestUtils.computeDOMLayout; var reduceTest = layoutTestUtils.reduceTest; +var text = layoutTestUtils.text; describe('Layout', function() { it('should layout a single node with width and height', function() { @@ -746,18 +747,25 @@ describe('Layout', function() { it('should layout node with text', function() { testLayout( - {style: {text: 'kikoo'}}, + {style: {measure: text('kikoo')}}, {width: 36, height: 18, top: 0, left: 0} ) }); it('should layout node with text and width', function() { testLayout( - {style: {text: 'kikoo loool', width: 10}}, + {style: {measure: text('kikoo loool'), width: 10}}, {width: 10, height: 36, top: 0, left: 0} ) }); + it('should layout node with padding and margin', function() { + testLayout( + {style: {measure: text('kikoo loool'), padding: 5, margin: 5}}, + {width: 82, height: 28, top: 5, left: 5} + ) + }); + it('should layout randomly', function() { @@ -816,6 +824,7 @@ describe('Layout', function() { randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']); randEnum(node, 0.5, 'flex', ['none', 1]); randEnum(node, 0.5, 'position', ['relative', 'absolute']); + randEnum(node, 0.5, 'measure', [text('kikoo'), text('kikooooooooooooo looool')]); randChildren(node, 0.2); return node; }