Fix flex basis not accounting for max size constraint

Summary: Fix flex basis not being constraint to the max size in the main direction. Previously this caused the added test to fail due to NaN in child dimensions.

Reviewed By: gkassabli

Differential Revision: D5044314

fbshipit-source-id: d9f9db832e4943a57a89c9d162ff6077b709795a
This commit is contained in:
Emil Sjolander
2017-05-12 09:03:22 -07:00
committed by Facebook Github Bot
parent dcf57d2f7e
commit 85c2e406e4
8 changed files with 305 additions and 48 deletions

View File

@@ -905,6 +905,64 @@ namespace Facebook.Yoga
Assert.AreEqual(50f, root_child1.LayoutHeight);
}
[Test]
public void Test_child_min_max_width_flexing()
{
YogaConfig config = new YogaConfig();
YogaNode root = new YogaNode(config);
root.FlexDirection = YogaFlexDirection.Row;
root.Width = 120;
root.Height = 50;
YogaNode root_child0 = new YogaNode(config);
root_child0.FlexGrow = 1;
root_child0.FlexBasis = 0;
root_child0.MinWidth = 60;
root.Insert(0, root_child0);
YogaNode root_child1 = new YogaNode(config);
root_child1.FlexGrow = 1;
root_child1.FlexBasis = 50.Percent();
root_child1.MaxWidth = 20;
root.Insert(1, root_child1);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();
Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(120f, root.LayoutWidth);
Assert.AreEqual(50f, root.LayoutHeight);
Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
Assert.AreEqual(100f, root_child1.LayoutX);
Assert.AreEqual(0f, root_child1.LayoutY);
Assert.AreEqual(20f, 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(120f, root.LayoutWidth);
Assert.AreEqual(50f, root.LayoutHeight);
Assert.AreEqual(20f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(0f, root_child1.LayoutY);
Assert.AreEqual(20f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);
}
[Test]
public void Test_min_width_overrides_width()
{

View File

@@ -84,6 +84,11 @@
<div style="height: 50px;"></div>
</div>
<div id="child_min_max_width_flexing" style="width: 120px; height: 50px; flex-direction: row; align-items:stretch">
<div style="min-width: 60px; flex-grow:1; flex-shrink:0; flex-basis: 0px"></div>
<div style="max-width: 20px; flex-grow:1; flex-shrink:0; flex-basis: 50%"></div>
</div>
<div id="min_width_overrides_width" style="min-width: 100px; width: 50px;">
</div>

View File

@@ -887,6 +887,63 @@ public class YGMinMaxDimensionTest {
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
}
@Test
public void test_child_min_max_width_flexing() {
YogaConfig config = new YogaConfig();
final YogaNode root = new YogaNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setWidth(120f);
root.setHeight(50f);
final YogaNode root_child0 = new YogaNode(config);
root_child0.setFlexGrow(1f);
root_child0.setFlexBasis(0f);
root_child0.setMinWidth(60f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = new YogaNode(config);
root_child1.setFlexGrow(1f);
root_child1.setFlexBasisPercent(50f);
root_child1.setMaxWidth(20f);
root.addChildAt(root_child1, 1);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(120f, root.getLayoutWidth(), 0.0f);
assertEquals(50f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(100f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.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(120f, root.getLayoutWidth(), 0.0f);
assertEquals(50f, root.getLayoutHeight(), 0.0f);
assertEquals(20f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
}
@Test
public void test_min_width_overrides_width() {
YogaConfig config = new YogaConfig();

View File

@@ -950,6 +950,67 @@ it("flex_grow_within_constrained_max_column", function () {
config.free();
}
});
it("child_min_max_width_flexing", function () {
var config = Yoga.Config.create();
try {
var root = Yoga.Node.create(config);
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
root.setWidth(120);
root.setHeight(50);
var root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root_child0.setFlexBasis(0);
root_child0.setMinWidth(60);
root.insertChild(root_child0, 0);
var root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root_child1.setFlexBasis("50%");
root_child1.setMaxWidth(20);
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(120 === root.getComputedWidth(), "120 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(50 === root.getComputedHeight(), "50 === 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(100 === root_child0.getComputedWidth(), "100 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(50 === root_child0.getComputedHeight(), "50 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
console.assert(100 === root_child1.getComputedLeft(), "100 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
console.assert(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(20 === root_child1.getComputedWidth(), "20 === 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(120 === root.getComputedWidth(), "120 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(50 === root.getComputedHeight(), "50 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
console.assert(20 === root_child0.getComputedLeft(), "20 === 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(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(0 === root_child1.getComputedTop(), "0 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
console.assert(20 === root_child1.getComputedWidth(), "20 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
config.free();
}
});
it("min_width_overrides_width", function () {
var config = Yoga.Config.create();

View File

@@ -276,7 +276,7 @@ TEST(YogaTest, aspect_ratio_with_max_main_defined) {
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(40, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(40, YGNodeLayoutGetHeight(root_child0));
YGNodeFreeRecursive(root);
@@ -320,7 +320,7 @@ TEST(YogaTest, aspect_ratio_with_min_main_defined) {
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_EQ(30, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(40, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(40, YGNodeLayoutGetHeight(root_child0));
YGNodeFreeRecursive(root);

View File

@@ -900,6 +900,64 @@ TEST(YogaTest, flex_grow_within_constrained_max_column) {
YGConfigFree(config);
}
TEST(YogaTest, child_min_max_width_flexing) {
const YGConfigRef config = YGConfigNew();
const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
YGNodeStyleSetWidth(root, 120);
YGNodeStyleSetHeight(root, 50);
const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexGrow(root_child0, 1);
YGNodeStyleSetFlexBasis(root_child0, 0);
YGNodeStyleSetMinWidth(root_child0, 60);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child1 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexGrow(root_child1, 1);
YGNodeStyleSetFlexBasisPercent(root_child1, 50);
YGNodeStyleSetMaxWidth(root_child1, 20);
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(120, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(20, 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(120, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child1));
YGNodeFreeRecursive(root);
YGConfigFree(config);
}
TEST(YogaTest, min_width_overrides_width) {
const YGConfigRef config = YGConfigNew();

View File

@@ -449,7 +449,8 @@ void YGNodeSetMeasureFunc(const YGNodeRef node, YGMeasureFunc measureFunc) {
// TODO: t18095186 Move nodeType to opt-in function and mark appropriate places in Litho
node->nodeType = YGNodeTypeDefault;
} else {
YGAssertWithNode(node,
YGAssertWithNode(
node,
YGNodeGetChildCount(node) == 0,
"Cannot set measure function: Nodes with measure functions cannot have children.");
node->measure = measureFunc;
@@ -471,7 +472,9 @@ YGBaselineFunc YGNodeGetBaselineFunc(const YGNodeRef node) {
}
void YGNodeInsertChild(const YGNodeRef node, const YGNodeRef child, const uint32_t index) {
YGAssertWithNode(node, child->parent == NULL, "Child already has a parent, it must be removed first.");
YGAssertWithNode(node,
child->parent == NULL,
"Child already has a parent, it must be removed first.");
YGAssertWithNode(node,
node->measure == NULL,
"Cannot add child: Nodes with measure functions cannot have children.");
@@ -704,7 +707,9 @@ static inline const YGValue *YGNodeResolveFlexBasisPtr(const YGNodeRef node) {
#define YG_NODE_LAYOUT_RESOLVED_PROPERTY_IMPL(type, name, instanceName) \
type YGNodeLayoutGet##name(const YGNodeRef node, const YGEdge edge) { \
YGAssertWithNode(node, edge < YGEdgeEnd, "Cannot get layout properties of multi-edge shorthands"); \
YGAssertWithNode(node, \
edge < YGEdgeEnd, \
"Cannot get layout properties of multi-edge shorthands"); \
\
if (edge == YGEdgeLeft) { \
if (node->layout.direction == YGDirectionRTL) { \
@@ -1949,11 +1954,13 @@ static void YGNodelayoutImpl(const YGNodeRef node,
const bool performLayout,
const YGConfigRef config) {
YGAssertWithNode(node,
YGFloatIsUndefined(availableWidth) ? widthMeasureMode == YGMeasureModeUndefined : true,
YGFloatIsUndefined(availableWidth) ? widthMeasureMode == YGMeasureModeUndefined
: true,
"availableWidth is indefinite so widthMeasureMode must be "
"YGMeasureModeUndefined");
YGAssertWithNode(node,
YGFloatIsUndefined(availableHeight) ? heightMeasureMode == YGMeasureModeUndefined : true,
YGFloatIsUndefined(availableHeight) ? heightMeasureMode == YGMeasureModeUndefined
: true,
"availableHeight is indefinite so heightMeasureMode must be "
"YGMeasureModeUndefined");
@@ -2337,7 +2344,12 @@ static void YGNodelayoutImpl(const YGNodeRef node,
float deltaFlexGrowFactors = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != NULL) {
childFlexBasis = currentRelativeChild->layout.computedFlexBasis;
childFlexBasis =
fminf(YGResolveValue(&currentRelativeChild->style.maxDimensions[dim[mainAxis]],
mainAxisParentSize),
fmaxf(YGResolveValue(&currentRelativeChild->style.minDimensions[dim[mainAxis]],
mainAxisParentSize),
currentRelativeChild->layout.computedFlexBasis));
if (remainingFreeSpace < 0) {
flexShrinkScaledFactor = -YGNodeResolveFlexShrink(currentRelativeChild) * childFlexBasis;
@@ -2375,6 +2387,7 @@ static void YGNodelayoutImpl(const YGNodeRef node,
baseMainSize,
availableInnerMainDim,
availableInnerWidth);
if (baseMainSize != boundMainSize) {
// By excluding this item's size and flex factor from remaining,
// this item's
@@ -2399,7 +2412,12 @@ static void YGNodelayoutImpl(const YGNodeRef node,
deltaFreeSpace = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != NULL) {
childFlexBasis = currentRelativeChild->layout.computedFlexBasis;
childFlexBasis =
fminf(YGResolveValue(&currentRelativeChild->style.maxDimensions[dim[mainAxis]],
mainAxisParentSize),
fmaxf(YGResolveValue(&currentRelativeChild->style.minDimensions[dim[mainAxis]],
mainAxisParentSize),
currentRelativeChild->layout.computedFlexBasis));
float updatedMainSize = childFlexBasis;
if (remainingFreeSpace < 0) {