diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index c9c7ce6d..2c135b33 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -27,6 +27,50 @@ var layoutTestUtils = (function() { return iframe; })(); + var realComputeLayout = computeLayout; + + function computeCSSLayout(rootNode) { + var body = iframe.contentDocument.body; + + function fillNodes(node) { + node.layout = { + width: undefined, + height: undefined, + top: 0, + left: 0 + }; + if (!node.style) { + 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) { + node.children = []; + } + node.children.forEach(fillNodes); + } + + fillNodes(rootNode); + return realComputeLayout(rootNode); + } + function computeDOMLayout(node) { var body = iframe.contentDocument.body; @@ -112,7 +156,7 @@ var layoutTestUtils = (function() { } function isEqual(a, b) { - // computeLayout and computeDOMLayout output a tree with same ordered elements + // computeCSSLayout and computeDOMLayout output a tree with same ordered elements return JSON.stringify(a) === JSON.stringify(b); } @@ -120,7 +164,7 @@ var layoutTestUtils = (function() { function isWorking() { return isEqual( computeDOMLayout(node), - computeLayout(node) + computeCSSLayout(node) ); } if (isWorking()) { @@ -184,16 +228,16 @@ var layoutTestUtils = (function() { return { testLayout: function(node, expectedLayout) { - var layout = computeLayout(node); + var layout = computeCSSLayout(node); var domLayout = computeDOMLayout(node); testNamedLayout('expected-dom', expectedLayout, domLayout); testNamedLayout('layout-dom', layout, domLayout); }, testRandomLayout: function(node, i) { - expect({i: i, node: node, layout: computeLayout(node)}) + expect({i: i, node: node, layout: computeCSSLayout(node)}) .toEqual({i: i, node: node, layout: computeDOMLayout(node)}); }, - computeLayout: computeLayout, + computeLayout: computeCSSLayout, computeDOMLayout: computeDOMLayout, reduceTest: reduceTest } diff --git a/src/Layout.js b/src/Layout.js index 23db16a8..e831fb6c 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1,22 +1,6 @@ var computeLayout = (function() { - function fillNodes(node) { - node.layout = { - width: undefined, - height: undefined, - top: 0, - left: 0 - }; - if (!node.style) { - node.style = {}; - } - if (!node.children) { - node.children = []; - } - node.children.forEach(fillNodes); - } - function extractNodes(node) { var layout = node.layout; delete node.layout; @@ -231,9 +215,10 @@ var computeLayout = (function() { node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) + getRelativePosition(node, crossAxis); - if ('text' in node.style) { - node.layout.width = 36; - node.layout.height = 18; + if ('measure' in node.style) { + var dimensions = node.style.measure(node.style.width); + node.layout.width = dimensions.width; + node.layout.height = dimensions.height; return; } @@ -464,7 +449,6 @@ var computeLayout = (function() { } var fn = function(node) { - fillNodes(node); layoutNode(node); return extractNodes(node); }; diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index a363f6b0..ad8e55f6 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -751,6 +751,13 @@ describe('Layout', function() { ) }); + it('should layout node with text and width', function() { + testLayout( + {style: {text: 'kikoo loool', width: 10}}, + {width: 10, height: 36, top: 0, left: 0} + ) + }); + it('should layout randomly', function() {