diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index e36e9401..13e8a7d7 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -88,6 +88,44 @@ var layoutTestUtils = (function() { var realComputeLayout = computeLayout; } + function roundLayout(layout) { + // Chrome rounds all the numbers with a precision of 1/64 + // Reproduce the same behavior + function round(number) { + var floored = Math.floor(number); + var decimal = number - floored; + if (decimal === 0) { + return number; + } + var minDifference = Infinity; + var minDecimal = Infinity; + for (var i = 1; i < 64; ++i) { + var roundedDecimal = i / 64; + var difference = Math.abs(roundedDecimal - decimal); + if (difference < minDifference) { + minDifference = difference; + minDecimal = roundedDecimal; + } + } + return floored + minDecimal; + } + + function rec(layout) { + layout.top = round(layout.top); + layout.left = round(layout.left); + layout.width = round(layout.width); + layout.height = round(layout.height); + if (layout.children) { + for (var i = 0; i < layout.children.length; ++i) { + rec(layout.children[i]); + } + } + } + + rec(layout); + return layout; + } + function computeCSSLayout(rootNode) { function fillNodes(node) { node.layout = { @@ -119,7 +157,7 @@ var layoutTestUtils = (function() { fillNodes(rootNode); realComputeLayout(rootNode); - return extractNodes(rootNode); + return roundLayout(extractNodes(rootNode)); } function computeDOMLayout(node) { diff --git a/src/__tests__/Layout-random-test.js b/src/__tests__/Layout-random-test.js index c6f8a4e6..13700482 100644 --- a/src/__tests__/Layout-random-test.js +++ b/src/__tests__/Layout-random-test.js @@ -89,18 +89,18 @@ describe('Random layout', function() { for (var i = 0; i < 100; ++i) { var node = generateRandomNode(); + // The iframe's body has a natural width of 300 that it doesn't really make + // to replicate in the test suite. The easiest workaround is not to test + // alignSelf, position and flex properties on the root element. + delete node.style.alignSelf; + delete node.style.flex; + delete node.style.position; + it('should layout randomly #' + i +'.', function(node) { if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) { node = reduceTest(node); } - // The iframe's body has a natural width of 300 that it doesn't really make - // to replicate in the test suite. The easiest workaround is not to test - // alignSelf, position and flex properties on the root element. - delete node.style.alignSelf; - delete node.style.flex; - delete node.style.position; - testRandomLayout(node, i); }.bind(this, node)); } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index b072d32c..a1cd6309 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -1114,6 +1114,23 @@ describe('Layout', function() { ); }); + xit('should layout with nested padding', function() { + testLayout( + {style: {}, children: [ + {style: {}, children: [ + {style: {}} + ]}, + {style: {padding: 5}} + ]}, + {width: 10, height: 10, top: 0, left: 0, children: [ + {width: 10, height: 0, top: 0, left: 0, children: [ + {width: 10, height: 0, top: 0, left: 0} + ]}, + {width: 10, height: 10, top: 0, left: 0} + ]} + ); + }); + xit('should layout flex-wrap', function() { testLayout( {style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [