New round-to-pixel-grid algorithm that fixes possible subpixel gaps between sibling nodes
Summary:
This diff introduces new, little bit sophisticated round-to-pixel-grid algorithm.
**Motivation:**
Previous simple and straightforward solution works in most cases but sometimes produce the not-so-great result. A while ago Nick Lockwood described this problem and proposed the solution in RN's RCTShadowView class:
For example, say you have the following structure:
// +--------+---------+--------+
// | |+-------+| |
// | || || |
// | |+-------+| |
// +--------+---------+--------+
Say the screen width is 320 pts so the three big views will get the following x bounds from our layout system:
{0, 106.667}, {106.667, 213.333}, {213.333, 320}
Assuming screen scale is 2, these numbers must be rounded to the nearest 0.5 to fit the pixel grid:
{0, 106.5}, {106.5, 213.5}, {213.5, 320}
You'll notice that the three widths are 106.5, 107, 106.5.
This is great for the parent views but it gets trickier when we consider rounding for the subview. When we go to round the bounds for the subview in the middle, it's relative bounds are {0, 106.667} which gets rounded to {0, 106.5}. This will cause the subview to be one pixel smaller than it should be. This is why we need to pass in the absolute position in order to do the rounding relative to the screen's grid rather than the view's grid. After passing in the absolutePosition of {106.667, y}, we do the following calculations:
absoluteLeft = round(absolutePosition.x + viewPosition.left) = round(106.667 + 0) = 106.5
absoluteRight = round(absolutePosition.x + viewPosition.left + viewSize.width) + round(106.667 + 0 + 106.667) = 213.5
width = 213.5 - 106.5 = 107
You'll notice that this is the same width we calculated for the parent view because we've taken its position into account.
I believe this is awesome. I also believe that we have to decouple this logic from RN and put it into awesome Yoga. So I did it in this diff.
**Fun fact:**
The original implementation of this algorithm in RN had (and still have) a bug, which was found by Dustin dshahidehpour and fixed in D4133643. Therefore that diff was unlanded because it broke something unrelated inside RN text engine. I will fix that problem in RN later.
**Why do we need to change test methodology?**
Because the way we receive layout metrics from Chrome browser actually directly related to rounding problem. Previously we used `offsetHeight` and `offsetWidth` properties of the DOM node, which contain naively rounded values from `computedStyle` or `getBoundingClientRect`. (Which is we are trying to fix!) So, I added the new function that computes node size using two-step-rounding approach, conceptually similar to one that implemented in Yoga. Note: Chrome browser performs rounding layout as part of rendering process and actual values that can ve computed by counting actual pixel are different from these natively rounded ones.
**Why do some tests now have different desired values?**
These changes actually prove that my approach is correct and more useful for actual view rendering goals. So, let's take a look at test with changed values `rounding_fractial_input_3`:
Previously: 64+25+24=114 (Incorrect!)
Now: 65+24+25=114 (Correct!)
Previously: 64+25+24=114 (Incorrect!)
Now: 65+24+25=114 (Correct!)
Reviewed By: emilsjolander
Differential Revision: D4941266
fbshipit-source-id: 07500f5cc93c628219500e9e07291438e9d5d36c
This commit is contained in:
Valentin Shergin
committed by
Facebook Github Bot
Facebook Github Bot
parent
f2b5d0fef7
commit
aa5b296ac7
@@ -709,17 +709,17 @@ it("rounding_fractial_input_3", function () {
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(100 === root_child0.getComputedWidth(), "100 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(64 === root_child0.getComputedHeight(), "64 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
console.assert(65 === root_child0.getComputedHeight(), "65 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(64 === root_child1.getComputedTop(), "64 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(100 === root_child1.getComputedWidth(), "100 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(25 === root_child1.getComputedHeight(), "25 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
console.assert(24 === root_child1.getComputedHeight(), "24 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(89 === root_child2.getComputedTop(), "89 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(100 === root_child2.getComputedWidth(), "100 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(24 === root_child2.getComputedHeight(), "24 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
console.assert(25 === root_child2.getComputedHeight(), "25 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
|
||||
|
||||
@@ -731,17 +731,17 @@ it("rounding_fractial_input_3", function () {
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(100 === root_child0.getComputedWidth(), "100 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(64 === root_child0.getComputedHeight(), "64 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
console.assert(65 === root_child0.getComputedHeight(), "65 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(64 === root_child1.getComputedTop(), "64 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(100 === root_child1.getComputedWidth(), "100 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(25 === root_child1.getComputedHeight(), "25 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
console.assert(24 === root_child1.getComputedHeight(), "24 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(89 === root_child2.getComputedTop(), "89 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(100 === root_child2.getComputedWidth(), "100 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(24 === root_child2.getComputedHeight(), "24 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
console.assert(25 === root_child2.getComputedHeight(), "25 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
} finally {
|
||||
if (typeof root !== "undefined") {
|
||||
root.freeRecursive();
|
||||
@@ -827,3 +827,318 @@ it("rounding_fractial_input_4", function () {
|
||||
config.free();
|
||||
}
|
||||
});
|
||||
it("rounding_inner_node_controversy_horizontal", function () {
|
||||
var config = Yoga.Config.create();
|
||||
|
||||
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ROUNDING, true);
|
||||
|
||||
try {
|
||||
var root = Yoga.Node.create(config);
|
||||
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
|
||||
root.setWidth(320);
|
||||
|
||||
var root_child0 = Yoga.Node.create(config);
|
||||
root_child0.setFlexGrow(1);
|
||||
root_child0.setHeight(10);
|
||||
root.insertChild(root_child0, 0);
|
||||
|
||||
var root_child1 = Yoga.Node.create(config);
|
||||
root_child1.setFlexGrow(1);
|
||||
root_child1.setHeight(10);
|
||||
root.insertChild(root_child1, 1);
|
||||
|
||||
var root_child1_child0 = Yoga.Node.create(config);
|
||||
root_child1_child0.setFlexGrow(1);
|
||||
root_child1_child0.setHeight(10);
|
||||
root_child1.insertChild(root_child1_child0, 0);
|
||||
|
||||
var root_child2 = Yoga.Node.create(config);
|
||||
root_child2.setFlexGrow(1);
|
||||
root_child2.setHeight(10);
|
||||
root.insertChild(root_child2, 2);
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(320 === root.getComputedWidth(), "320 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(10 === root.getComputedHeight(), "10 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(107 === root_child0.getComputedWidth(), "107 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child0.getComputedHeight(), "10 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(107 === root_child1.getComputedLeft(), "107 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(106 === root_child1.getComputedWidth(), "106 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child1.getComputedHeight(), "10 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(106 === root_child1_child0.getComputedWidth(), "106 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child1_child0.getComputedHeight(), "10 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(213 === root_child2.getComputedLeft(), "213 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child2.getComputedTop(), "0 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(107 === root_child2.getComputedWidth(), "107 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child2.getComputedHeight(), "10 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(320 === root.getComputedWidth(), "320 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(10 === root.getComputedHeight(), "10 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(213 === root_child0.getComputedLeft(), "213 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(107 === root_child0.getComputedWidth(), "107 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child0.getComputedHeight(), "10 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(107 === root_child1.getComputedLeft(), "107 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(106 === root_child1.getComputedWidth(), "106 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child1.getComputedHeight(), "10 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(106 === root_child1_child0.getComputedWidth(), "106 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child1_child0.getComputedHeight(), "10 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child2.getComputedTop(), "0 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(107 === root_child2.getComputedWidth(), "107 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(10 === root_child2.getComputedHeight(), "10 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
} finally {
|
||||
if (typeof root !== "undefined") {
|
||||
root.freeRecursive();
|
||||
}
|
||||
|
||||
config.free();
|
||||
}
|
||||
});
|
||||
it("rounding_inner_node_controversy_vertical", function () {
|
||||
var config = Yoga.Config.create();
|
||||
|
||||
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ROUNDING, true);
|
||||
|
||||
try {
|
||||
var root = Yoga.Node.create(config);
|
||||
root.setHeight(320);
|
||||
|
||||
var root_child0 = Yoga.Node.create(config);
|
||||
root_child0.setFlexGrow(1);
|
||||
root_child0.setWidth(10);
|
||||
root.insertChild(root_child0, 0);
|
||||
|
||||
var root_child1 = Yoga.Node.create(config);
|
||||
root_child1.setFlexGrow(1);
|
||||
root_child1.setWidth(10);
|
||||
root.insertChild(root_child1, 1);
|
||||
|
||||
var root_child1_child0 = Yoga.Node.create(config);
|
||||
root_child1_child0.setFlexGrow(1);
|
||||
root_child1_child0.setWidth(10);
|
||||
root_child1.insertChild(root_child1_child0, 0);
|
||||
|
||||
var root_child2 = Yoga.Node.create(config);
|
||||
root_child2.setFlexGrow(1);
|
||||
root_child2.setWidth(10);
|
||||
root.insertChild(root_child2, 2);
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(10 === root.getComputedWidth(), "10 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(320 === root.getComputedHeight(), "320 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(10 === root_child0.getComputedWidth(), "10 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child0.getComputedHeight(), "107 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(107 === root_child1.getComputedTop(), "107 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(10 === root_child1.getComputedWidth(), "10 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1.getComputedHeight(), "106 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(10 === root_child1_child0.getComputedWidth(), "10 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child0.getComputedHeight(), "106 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(213 === root_child2.getComputedTop(), "213 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(10 === root_child2.getComputedWidth(), "10 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child2.getComputedHeight(), "107 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(10 === root.getComputedWidth(), "10 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(320 === root.getComputedHeight(), "320 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(10 === root_child0.getComputedWidth(), "10 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child0.getComputedHeight(), "107 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(107 === root_child1.getComputedTop(), "107 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(10 === root_child1.getComputedWidth(), "10 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1.getComputedHeight(), "106 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(10 === root_child1_child0.getComputedWidth(), "10 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child0.getComputedHeight(), "106 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(213 === root_child2.getComputedTop(), "213 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(10 === root_child2.getComputedWidth(), "10 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child2.getComputedHeight(), "107 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
} finally {
|
||||
if (typeof root !== "undefined") {
|
||||
root.freeRecursive();
|
||||
}
|
||||
|
||||
config.free();
|
||||
}
|
||||
});
|
||||
it("rounding_inner_node_controversy_combined", function () {
|
||||
var config = Yoga.Config.create();
|
||||
|
||||
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ROUNDING, true);
|
||||
|
||||
try {
|
||||
var root = Yoga.Node.create(config);
|
||||
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
|
||||
root.setWidth(640);
|
||||
root.setHeight(320);
|
||||
|
||||
var root_child0 = Yoga.Node.create(config);
|
||||
root_child0.setFlexGrow(1);
|
||||
root_child0.setHeight("100%");
|
||||
root.insertChild(root_child0, 0);
|
||||
|
||||
var root_child1 = Yoga.Node.create(config);
|
||||
root_child1.setFlexGrow(1);
|
||||
root_child1.setHeight("100%");
|
||||
root.insertChild(root_child1, 1);
|
||||
|
||||
var root_child1_child0 = Yoga.Node.create(config);
|
||||
root_child1_child0.setFlexGrow(1);
|
||||
root_child1_child0.setWidth("100%");
|
||||
root_child1.insertChild(root_child1_child0, 0);
|
||||
|
||||
var root_child1_child1 = Yoga.Node.create(config);
|
||||
root_child1_child1.setFlexGrow(1);
|
||||
root_child1_child1.setWidth("100%");
|
||||
root_child1.insertChild(root_child1_child1, 1);
|
||||
|
||||
var root_child1_child1_child0 = Yoga.Node.create(config);
|
||||
root_child1_child1_child0.setFlexGrow(1);
|
||||
root_child1_child1_child0.setWidth("100%");
|
||||
root_child1_child1.insertChild(root_child1_child1_child0, 0);
|
||||
|
||||
var root_child1_child2 = Yoga.Node.create(config);
|
||||
root_child1_child2.setFlexGrow(1);
|
||||
root_child1_child2.setWidth("100%");
|
||||
root_child1.insertChild(root_child1_child2, 2);
|
||||
|
||||
var root_child2 = Yoga.Node.create(config);
|
||||
root_child2.setFlexGrow(1);
|
||||
root_child2.setHeight("100%");
|
||||
root.insertChild(root_child2, 2);
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(640 === root.getComputedWidth(), "640 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(320 === root.getComputedHeight(), "320 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(213 === root_child0.getComputedWidth(), "213 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child0.getComputedHeight(), "320 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(213 === root_child1.getComputedLeft(), "213 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1.getComputedWidth(), "214 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child1.getComputedHeight(), "320 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child0.getComputedWidth(), "214 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child1_child0.getComputedHeight(), "107 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child1.getComputedLeft(), "0 === root_child1_child1.getComputedLeft() (" + root_child1_child1.getComputedLeft() + ")");
|
||||
console.assert(107 === root_child1_child1.getComputedTop(), "107 === root_child1_child1.getComputedTop() (" + root_child1_child1.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child1.getComputedWidth(), "214 === root_child1_child1.getComputedWidth() (" + root_child1_child1.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child1.getComputedHeight(), "106 === root_child1_child1.getComputedHeight() (" + root_child1_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child1_child0.getComputedLeft(), "0 === root_child1_child1_child0.getComputedLeft() (" + root_child1_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child1_child0.getComputedTop(), "0 === root_child1_child1_child0.getComputedTop() (" + root_child1_child1_child0.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child1_child0.getComputedWidth(), "214 === root_child1_child1_child0.getComputedWidth() (" + root_child1_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child1_child0.getComputedHeight(), "106 === root_child1_child1_child0.getComputedHeight() (" + root_child1_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child2.getComputedLeft(), "0 === root_child1_child2.getComputedLeft() (" + root_child1_child2.getComputedLeft() + ")");
|
||||
console.assert(213 === root_child1_child2.getComputedTop(), "213 === root_child1_child2.getComputedTop() (" + root_child1_child2.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child2.getComputedWidth(), "214 === root_child1_child2.getComputedWidth() (" + root_child1_child2.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child1_child2.getComputedHeight(), "107 === root_child1_child2.getComputedHeight() (" + root_child1_child2.getComputedHeight() + ")");
|
||||
|
||||
console.assert(427 === root_child2.getComputedLeft(), "427 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child2.getComputedTop(), "0 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(213 === root_child2.getComputedWidth(), "213 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child2.getComputedHeight(), "320 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
|
||||
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
|
||||
|
||||
console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
|
||||
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
|
||||
console.assert(640 === root.getComputedWidth(), "640 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
|
||||
console.assert(320 === root.getComputedHeight(), "320 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
|
||||
|
||||
console.assert(427 === root_child0.getComputedLeft(), "427 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
|
||||
console.assert(213 === root_child0.getComputedWidth(), "213 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child0.getComputedHeight(), "320 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(213 === root_child1.getComputedLeft(), "213 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1.getComputedWidth(), "214 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child1.getComputedHeight(), "320 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child0.getComputedLeft(), "0 === root_child1_child0.getComputedLeft() (" + root_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child0.getComputedTop(), "0 === root_child1_child0.getComputedTop() (" + root_child1_child0.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child0.getComputedWidth(), "214 === root_child1_child0.getComputedWidth() (" + root_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child1_child0.getComputedHeight(), "107 === root_child1_child0.getComputedHeight() (" + root_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child1.getComputedLeft(), "0 === root_child1_child1.getComputedLeft() (" + root_child1_child1.getComputedLeft() + ")");
|
||||
console.assert(107 === root_child1_child1.getComputedTop(), "107 === root_child1_child1.getComputedTop() (" + root_child1_child1.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child1.getComputedWidth(), "214 === root_child1_child1.getComputedWidth() (" + root_child1_child1.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child1.getComputedHeight(), "106 === root_child1_child1.getComputedHeight() (" + root_child1_child1.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child1_child0.getComputedLeft(), "0 === root_child1_child1_child0.getComputedLeft() (" + root_child1_child1_child0.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child1_child1_child0.getComputedTop(), "0 === root_child1_child1_child0.getComputedTop() (" + root_child1_child1_child0.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child1_child0.getComputedWidth(), "214 === root_child1_child1_child0.getComputedWidth() (" + root_child1_child1_child0.getComputedWidth() + ")");
|
||||
console.assert(106 === root_child1_child1_child0.getComputedHeight(), "106 === root_child1_child1_child0.getComputedHeight() (" + root_child1_child1_child0.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child1_child2.getComputedLeft(), "0 === root_child1_child2.getComputedLeft() (" + root_child1_child2.getComputedLeft() + ")");
|
||||
console.assert(213 === root_child1_child2.getComputedTop(), "213 === root_child1_child2.getComputedTop() (" + root_child1_child2.getComputedTop() + ")");
|
||||
console.assert(214 === root_child1_child2.getComputedWidth(), "214 === root_child1_child2.getComputedWidth() (" + root_child1_child2.getComputedWidth() + ")");
|
||||
console.assert(107 === root_child1_child2.getComputedHeight(), "107 === root_child1_child2.getComputedHeight() (" + root_child1_child2.getComputedHeight() + ")");
|
||||
|
||||
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
|
||||
console.assert(0 === root_child2.getComputedTop(), "0 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
|
||||
console.assert(213 === root_child2.getComputedWidth(), "213 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
|
||||
console.assert(320 === root_child2.getComputedHeight(), "320 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
|
||||
} finally {
|
||||
if (typeof root !== "undefined") {
|
||||
root.freeRecursive();
|
||||
}
|
||||
|
||||
config.free();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user