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;
|
||||
}
|
||||
|
||||
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) {
|
||||
|
@@ -89,11 +89,6 @@ describe('Random layout', function() {
|
||||
|
||||
for (var i = 0; i < 100; ++i) {
|
||||
var node = generateRandomNode();
|
||||
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.
|
||||
@@ -101,6 +96,11 @@ describe('Random layout', function() {
|
||||
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);
|
||||
}
|
||||
|
||||
testRandomLayout(node, i);
|
||||
}.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() {
|
||||
testLayout(
|
||||
{style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [
|
||||
|
Reference in New Issue
Block a user