implement 1/64 rounding like chrome. Didn't add a test for it because this is Chrome specific and shouldn't be on ios and android

This commit is contained in:
Christopher Chedeau
2014-12-11 16:31:57 +00:00
parent ab64a5b624
commit 544f377f20
3 changed files with 63 additions and 8 deletions

View File

@@ -88,6 +88,44 @@ var layoutTestUtils = (function() {
var realComputeLayout = computeLayout; 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 computeCSSLayout(rootNode) {
function fillNodes(node) { function fillNodes(node) {
node.layout = { node.layout = {
@@ -119,7 +157,7 @@ var layoutTestUtils = (function() {
fillNodes(rootNode); fillNodes(rootNode);
realComputeLayout(rootNode); realComputeLayout(rootNode);
return extractNodes(rootNode); return roundLayout(extractNodes(rootNode));
} }
function computeDOMLayout(node) { function computeDOMLayout(node) {

View File

@@ -89,18 +89,18 @@ describe('Random layout', function() {
for (var i = 0; i < 100; ++i) { for (var i = 0; i < 100; ++i) {
var node = generateRandomNode(); 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) { it('should layout randomly #' + i +'.', function(node) {
if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) { if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) {
node = reduceTest(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); testRandomLayout(node, i);
}.bind(this, node)); }.bind(this, node));
} }

View File

@@ -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() { xit('should layout flex-wrap', function() {
testLayout( testLayout(
{style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [ {style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [