The total flex factores need to be a minimum of 1 if any

Summary:
The only thing I found in the spec for this change is the following. Not exactly sure if this is the thing this PR is about:

> For each flex item, subtract its outer flex base size from its max-content contribution size. If that result is not zero, divide it by (if the result was positive) its **flex grow factor floored at 1** or (if the result was negative) by its scaled flex shrink factor, having **floored the flex shrink factor at 1**. This is the item’s max-content flex fraction.

But at least it seems a required change.

Fixes facebook/yoga#566
Closes https://github.com/facebook/yoga/pull/572

Differential Revision: D5264388

Pulled By: emilsjolander

fbshipit-source-id: 0004d1c3b9bad070a98cd6766c1adc06a54475f8
This commit is contained in:
Lukas Wöhrl
2017-06-16 07:31:19 -07:00
committed by Facebook Github Bot
parent 6c67684fa6
commit ca2c607f90
6 changed files with 290 additions and 0 deletions

View File

@@ -429,5 +429,73 @@ namespace Facebook.Yoga
Assert.AreEqual(0f, root_child0_child0.LayoutHeight);
}
[Test]
public void Test_flex_grow_less_than_factor_one()
{
YogaConfig config = new YogaConfig();
YogaNode root = new YogaNode(config);
root.Width = 200;
root.Height = 500;
YogaNode root_child0 = new YogaNode(config);
root_child0.FlexGrow = 0.2f;
root_child0.FlexBasis = 40;
root.Insert(0, root_child0);
YogaNode root_child1 = new YogaNode(config);
root_child1.FlexGrow = 0.2f;
root.Insert(1, root_child1);
YogaNode root_child2 = new YogaNode(config);
root_child2.FlexGrow = 0.4f;
root.Insert(2, root_child2);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();
Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(200f, root.LayoutWidth);
Assert.AreEqual(500f, root.LayoutHeight);
Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(200f, root_child0.LayoutWidth);
Assert.AreEqual(132f, root_child0.LayoutHeight);
Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(132f, root_child1.LayoutY);
Assert.AreEqual(200f, root_child1.LayoutWidth);
Assert.AreEqual(92f, root_child1.LayoutHeight);
Assert.AreEqual(0f, root_child2.LayoutX);
Assert.AreEqual(224f, root_child2.LayoutY);
Assert.AreEqual(200f, root_child2.LayoutWidth);
Assert.AreEqual(184f, root_child2.LayoutHeight);
root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();
Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(200f, root.LayoutWidth);
Assert.AreEqual(500f, root.LayoutHeight);
Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(200f, root_child0.LayoutWidth);
Assert.AreEqual(132f, root_child0.LayoutHeight);
Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(132f, root_child1.LayoutY);
Assert.AreEqual(200f, root_child1.LayoutWidth);
Assert.AreEqual(92f, root_child1.LayoutHeight);
Assert.AreEqual(0f, root_child2.LayoutX);
Assert.AreEqual(224f, root_child2.LayoutY);
Assert.AreEqual(200f, root_child2.LayoutWidth);
Assert.AreEqual(184f, root_child2.LayoutHeight);
}
}
}

View File

@@ -35,3 +35,9 @@
<div style="flex-grow:1; flex-shrink:1;"></div>
</div>
</div>
<div id="flex_grow_less_than_factor_one" style="height: 500px; width: 200px; flex-direction:column;">
<div style="flex-grow:0.2; flex-shrink:0; flex-basis: 40px;"></div>
<div style="flex-grow:0.2; flex-shrink:0;"></div>
<div style="flex-grow:0.4; flex-shrink:0;"></div>
</div>

View File

@@ -421,4 +421,71 @@ public class YGFlexTest {
assertEquals(0f, root_child0_child0.getLayoutHeight(), 0.0f);
}
@Test
public void test_flex_grow_less_than_factor_one() {
YogaConfig config = new YogaConfig();
final YogaNode root = new YogaNode(config);
root.setWidth(200f);
root.setHeight(500f);
final YogaNode root_child0 = new YogaNode(config);
root_child0.setFlexGrow(0.2f);
root_child0.setFlexBasis(40f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = new YogaNode(config);
root_child1.setFlexGrow(0.2f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = new YogaNode(config);
root_child2.setFlexGrow(0.4f);
root.addChildAt(root_child2, 2);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(200f, root.getLayoutWidth(), 0.0f);
assertEquals(500f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(200f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(132f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(132f, root_child1.getLayoutY(), 0.0f);
assertEquals(200f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(224f, root_child2.getLayoutY(), 0.0f);
assertEquals(200f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(184f, root_child2.getLayoutHeight(), 0.0f);
root.setDirection(YogaDirection.RTL);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(200f, root.getLayoutWidth(), 0.0f);
assertEquals(500f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(200f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(132f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(132f, root_child1.getLayoutY(), 0.0f);
assertEquals(200f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(92f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(224f, root_child2.getLayoutY(), 0.0f);
assertEquals(200f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(184f, root_child2.getLayoutHeight(), 0.0f);
}
}

View File

@@ -444,3 +444,74 @@ it("flex_grow_shrink_at_most", function () {
config.free();
}
});
it("flex_grow_less_than_factor_one", function () {
var config = Yoga.Config.create();
try {
var root = Yoga.Node.create(config);
root.setWidth(200);
root.setHeight(500);
var root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(0.2);
root_child0.setFlexBasis(40);
root.insertChild(root_child0, 0);
var root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(0.2);
root.insertChild(root_child1, 1);
var root_child2 = Yoga.Node.create(config);
root_child2.setFlexGrow(0.4);
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(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(500 === root.getComputedHeight(), "500 === 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(200 === root_child0.getComputedWidth(), "200 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(132 === root_child0.getComputedHeight(), "132 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
console.assert(132 === root_child1.getComputedTop(), "132 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(200 === root_child1.getComputedWidth(), "200 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
console.assert(92 === root_child1.getComputedHeight(), "92 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
console.assert(224 === root_child2.getComputedTop(), "224 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
console.assert(200 === root_child2.getComputedWidth(), "200 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
console.assert(184 === root_child2.getComputedHeight(), "184 === 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(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(500 === root.getComputedHeight(), "500 === 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(200 === root_child0.getComputedWidth(), "200 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(132 === root_child0.getComputedHeight(), "132 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
console.assert(132 === root_child1.getComputedTop(), "132 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(200 === root_child1.getComputedWidth(), "200 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
console.assert(92 === root_child1.getComputedHeight(), "92 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
console.assert(0 === root_child2.getComputedLeft(), "0 === root_child2.getComputedLeft() (" + root_child2.getComputedLeft() + ")");
console.assert(224 === root_child2.getComputedTop(), "224 === root_child2.getComputedTop() (" + root_child2.getComputedTop() + ")");
console.assert(200 === root_child2.getComputedWidth(), "200 === root_child2.getComputedWidth() (" + root_child2.getComputedWidth() + ")");
console.assert(184 === root_child2.getComputedHeight(), "184 === root_child2.getComputedHeight() (" + root_child2.getComputedHeight() + ")");
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
config.free();
}
});

View File

@@ -423,3 +423,71 @@ TEST(YogaTest, flex_grow_shrink_at_most) {
YGConfigFree(config);
}
TEST(YogaTest, flex_grow_less_than_factor_one) {
const YGConfigRef config = YGConfigNew();
const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetWidth(root, 200);
YGNodeStyleSetHeight(root, 500);
const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexGrow(root_child0, 0.2f);
YGNodeStyleSetFlexBasis(root_child0, 40);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child1 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexGrow(root_child1, 0.2f);
YGNodeInsertChild(root, root_child1, 1);
const YGNodeRef root_child2 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexGrow(root_child2, 0.4f);
YGNodeInsertChild(root, root_child2, 2);
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(500, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(132, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(132, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(92, YGNodeLayoutGetHeight(root_child1));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
ASSERT_FLOAT_EQ(224, YGNodeLayoutGetTop(root_child2));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(184, YGNodeLayoutGetHeight(root_child2));
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(500, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(132, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(132, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(92, YGNodeLayoutGetHeight(root_child1));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
ASSERT_FLOAT_EQ(224, YGNodeLayoutGetTop(root_child2));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(184, YGNodeLayoutGetHeight(root_child2));
YGNodeFreeRecursive(root);
YGConfigFree(config);
}

View File

@@ -2278,6 +2278,16 @@ static void YGNodelayoutImpl(const YGNodeRef node,
}
}
// The total flex factor needs to be floored to 1.
if (totalFlexGrowFactors > 0 && totalFlexGrowFactors < 1) {
totalFlexGrowFactors = 1;
}
// The total flex shrink factor needs to be floored to 1.
if (totalFlexShrinkScaledFactors > 0 && totalFlexShrinkScaledFactors < 1) {
totalFlexShrinkScaledFactors = 1;
}
// If we don't need to measure the cross axis, we can skip the entire flex
// step.
const bool canSkipFlex = !performLayout && measureModeCrossDim == YGMeasureModeExactly;