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:
@@ -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) {
|
||||||
|
@@ -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));
|
||||||
}
|
}
|
||||||
|
@@ -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: [
|
||||||
|
Reference in New Issue
Block a user