DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Fix wraping calculation if min-size constraint exists

Browse Source 
Summary:
Fixes #261
Closes https://github.com/facebook/css-layout/pull/262

Reviewed By: splhack

Differential Revision: D4245200

Pulled By: emilsjolander

fbshipit-source-id: 77d802d71010ed426511d6a01e6de1e7c9194179
This commit is contained in:
Lukas Woehrl
2017-01-16 16:09:43 -08:00
committed by Facebook Github Bot
parent 0bcec80dfe
commit be8773fee0
7 changed files with 231 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
csharp/tests/Facebook.Yoga/YGFlexWrapTest.cs
View File

@@ -354,5 +354,61 @@ namespace Facebook.Yoga
Assert.AreEqual(30f, root_child3.LayoutHeight);
}
[Test]
public void Test_flex_wrap_children_with_min_main_overriding_flex_basis()
{
YogaNode root = new YogaNode();
root.FlexDirection = YogaFlexDirection.Row;
root.Wrap = YogaWrap.Wrap;
root.Width = 100;
YogaNode root_child0 = new YogaNode();
root_child0.FlexBasis = 50;
root_child0.MinWidth = 55;
root_child0.Height = 50;
root.Insert(0, root_child0);
YogaNode root_child1 = new YogaNode();
root_child1.FlexBasis = 50;
root_child1.MinWidth = 55;
root_child1.Height = 50;
root.Insert(1, root_child1);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();
Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);
Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(55f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(50f, root_child1.LayoutY);
Assert.AreEqual(55f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);
root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();
Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);
Assert.AreEqual(45f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(55f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
Assert.AreEqual(45f, root_child1.LayoutX);
Assert.AreEqual(50f, root_child1.LayoutY);
Assert.AreEqual(55f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);
}
}
}

5
gentest/fixtures/YGFlexWrapTest.html
View File

@@ -25,3 +25,8 @@
<div style="height: 30px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
</div>
<div id="flex_wrap_children_with_min_main_overriding_flex_basis" style="width: 100px; flex-wrap: wrap; flex-direction: row;">
<div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
<div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
</div>

3
gentest/fixtures/YGPercentageTest.html
View File

@@ -45,7 +45,6 @@
<div style="flex-grow: 4; flex-basis: 15%; max-width: 20%;"></div>
</div>
<div id="percentage_flex_basis_main_min_width" experiments="Rounding" style="width: 200px; height: 200px; flex-direction: row;">
<div style="flex-grow: 1; flex-basis: 15%; min-width: 60%;"></div>
<div style="flex-grow: 4; flex-basis: 10%; min-width: 20%;"></div>
@@ -79,4 +78,4 @@
<div id="percentage_absolute_position" experiments="Rounding" style="width: 200px; height: 100px;">
<div style="position: absolute; top: 10%; left: 30%; width: 10px; height: 10px;"></div>
</div>
</div>

55
java/tests/com/facebook/yoga/YGFlexWrapTest.java
View File

@@ -349,4 +349,59 @@ public class YGFlexWrapTest {
assertEquals(30f, root_child3.getLayoutHeight(), 0.0f);
}
@Test
public void test_flex_wrap_children_with_min_main_overriding_flex_basis() {
final YogaNode root = new YogaNode();
root.setFlexDirection(YogaFlexDirection.ROW);
root.setWrap(YogaWrap.WRAP);
root.setWidth(100f);
final YogaNode root_child0 = new YogaNode();
root_child0.setFlexBasis(50f);
root_child0.setMinWidth(55f);
root_child0.setHeight(50f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = new YogaNode();
root_child1.setFlexBasis(50f);
root_child1.setMinWidth(55f);
root_child1.setHeight(50f);
root.addChildAt(root_child1, 1);
root.setDirection(YogaDirection.LTR);
root.calculateLayout();
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(100f, root.getLayoutWidth(), 0.0f);
assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(55f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(50f, root_child1.getLayoutY(), 0.0f);
assertEquals(55f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
root.setDirection(YogaDirection.RTL);
root.calculateLayout();
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(100f, root.getLayoutWidth(), 0.0f);
assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(45f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(55f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(45f, root_child1.getLayoutX(), 0.0f);
assertEquals(50f, root_child1.getLayoutY(), 0.0f);
assertEquals(55f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
}
}

57
javascript/tests/Facebook.Yoga/YGFlexWrapTest.js
View File

@@ -352,3 +352,60 @@ it("wrap_row_align_items_center", function () {
(typeof gc !== "undefined") && gc();
console.assert(0 === Yoga.getInstanceCount(), "0 === Yoga.getInstanceCount() (" + Yoga.getInstanceCount() + ")");
});
it("flex_wrap_children_with_min_main_overriding_flex_basis", function () {
var root = Yoga.Node.create();
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
root.setFlexWrap(Yoga.WRAP_WRAP);
root.setWidth(100);
var root_child0 = Yoga.Node.create();
root_child0.setFlexBasis(50);
root_child0.setMinWidth(55);
root_child0.setHeight(50);
root.insertChild(root_child0, 0);
var root_child1 = Yoga.Node.create();
root_child1.setFlexBasis(50);
root_child1.setMinWidth(55);
root_child1.setHeight(50);
root.insertChild(root_child1, 1);
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(100 === root.getComputedWidth(), "100 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(100 === root.getComputedHeight(), "100 === 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(55 === root_child0.getComputedWidth(), "55 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(50 === root_child0.getComputedHeight(), "50 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
console.assert(0 === root_child1.getComputedLeft(), "0 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
console.assert(50 === root_child1.getComputedTop(), "50 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(55 === root_child1.getComputedWidth(), "55 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.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(100 === root.getComputedWidth(), "100 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(100 === root.getComputedHeight(), "100 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
console.assert(45 === root_child0.getComputedLeft(), "45 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
console.assert(55 === root_child0.getComputedWidth(), "55 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(50 === root_child0.getComputedHeight(), "50 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
console.assert(45 === root_child1.getComputedLeft(), "45 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
console.assert(50 === root_child1.getComputedTop(), "50 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(55 === root_child1.getComputedWidth(), "55 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
if (typeof root !== "undefined")
root.freeRecursive();
(typeof gc !== "undefined") && gc();
console.assert(0 === Yoga.getInstanceCount(), "0 === Yoga.getInstanceCount() (" + Yoga.getInstanceCount() + ")");
});

54
tests/YGFlexWrapTest.cpp
View File

@@ -340,3 +340,57 @@ TEST(YogaTest, wrap_row_align_items_center) {
YGNodeFreeRecursive(root);
}
TEST(YogaTest, flex_wrap_children_with_min_main_overriding_flex_basis) {
const YGNodeRef root = YGNodeNew();
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
YGNodeStyleSetFlexWrap(root, YGWrapWrap);
YGNodeStyleSetWidth(root, 100);
const YGNodeRef root_child0 = YGNodeNew();
YGNodeStyleSetFlexBasis(root_child0, 50);
YGNodeStyleSetMinWidth(root_child0, 55);
YGNodeStyleSetHeight(root_child0, 50);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child1 = YGNodeNew();
YGNodeStyleSetFlexBasis(root_child1, 50);
YGNodeStyleSetMinWidth(root_child1, 55);
YGNodeStyleSetHeight(root_child1, 50);
YGNodeInsertChild(root, root_child1, 1);
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(55, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(55, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child1));
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(45, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(55, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(45, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(55, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child1));
YGNodeFreeRecursive(root);
}

5
yoga/Yoga.c
View File

@@ -1984,8 +1984,9 @@ static void YGNodelayoutImpl(const YGNodeRef node,
child->lineIndex = lineCount;
if (child->style.positionType != YGPositionTypeAbsolute) {
const float outerFlexBasis = child->layout.computedFlexBasis +
YGNodeMarginForAxis(child, mainAxis, availableInnerWidth);
const float outerFlexBasis =
fmaxf(YGValueResolve(&child->style.minDimensions[dim[mainAxis]], mainAxisParentSize), child->layout.computedFlexBasis) +
YGNodeMarginForAxis(child, mainAxis, availableInnerWidth);
// If this is a multi-line flow and this item pushes us over the
// available size, we've