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:
committed by
Facebook Github Bot
parent
dcf57d2f7e
commit
85c2e406e4
@@ -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()
|
||||
{
|
||||
|
@@ -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>
|
||||
|
||||
|
@@ -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();
|
||||
|
@@ -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();
|
||||
|
||||
|
@@ -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);
|
||||
|
@@ -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();
|
||||
|
||||
|
32
yoga/Yoga.c
32
yoga/Yoga.c
@@ -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(¤tRelativeChild->style.maxDimensions[dim[mainAxis]],
|
||||
mainAxisParentSize),
|
||||
fmaxf(YGResolveValue(¤tRelativeChild->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(¤tRelativeChild->style.maxDimensions[dim[mainAxis]],
|
||||
mainAxisParentSize),
|
||||
fmaxf(YGResolveValue(¤tRelativeChild->style.minDimensions[dim[mainAxis]],
|
||||
mainAxisParentSize),
|
||||
currentRelativeChild->layout.computedFlexBasis));
|
||||
float updatedMainSize = childFlexBasis;
|
||||
|
||||
if (remainingFreeSpace < 0) {
|
||||
|
Reference in New Issue
Block a user