diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index b2e7ca2a..9742009c 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -28,6 +28,9 @@ var layoutTestUtils = (function() { })(); var body = iframe.contentDocument.body; + var iframeText = document.createElement('iframe'); + document.body.appendChild(iframeText); + var realComputeLayout = computeLayout; function computeCSSLayout(rootNode) { @@ -222,16 +225,27 @@ var layoutTestUtils = (function() { computeDOMLayout: computeDOMLayout, reduceTest: reduceTest, text: function(text) { + var body = iframeText.contentDocument.body; var fn = function(width) { + var div = document.createElement('div'); var span = document.createElement('span'); - span.style.position = 'absolute'; - if (width !== undefined) { + span.style.display = 'flex'; + body.style.display = 'block'; + if (width === 'grow') { + span.style.position = 'absolute'; + } else if (width === 'shrink') { + div.style.display = 'flex'; + div.style.position = 'relative'; + body.style.display = 'flex'; + span.style.position = 'absolute'; + } else { span.style.width = width + 'px'; } span.innerText = text; - body.appendChild(span); + div.appendChild(span); + body.appendChild(div); var rect = span.getBoundingClientRect(); - body.removeChild(span); + body.removeChild(div); return { width: rect.width, height: rect.height diff --git a/src/Layout.js b/src/Layout.js index 0b7a199c..567de0f7 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -216,7 +216,15 @@ var computeLayout = (function() { getRelativePosition(node, crossAxis); if ('measure' in node.style) { - var dimensions = node.style.measure(node.style.width); + var width; + if (isDimDefined(node, 'row')) { + width = node.style.width; + } else if (node.style.position === 'absolute') { + width = 'shrink'; + } else { + width = 'grow'; + } + var dimensions = node.style.measure(width); if (!isDimDefined(node, 'row')) { node.layout.width = dimensions.width + getPaddingAndBorderAxis(node, 'row'); } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 5941a502..e3d49c1f 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -745,7 +745,7 @@ describe('Layout', function() { ) }); - it('should layout node with text', function() { + it('should layout node with just text', function() { testLayout( {style: {measure: text('kikoo')}}, {width: 36, height: 18, top: 0, left: 0} @@ -759,13 +759,24 @@ describe('Layout', function() { ) }); - it('should layout node with padding and margin', function() { + it('should layout node with text, 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 node with text and position absolute', function() { + testLayout( + {style: {}, children: [ + {style: {measure: text('kikoo loool'), position: 'absolute'}} + ]}, + {width: 0, height: 0, top: 0, left: 0, children: [ + {width: 36, height: 36, top: 0, left: 0} + ]} + ) + }); + it('should layout randomly', function() {