Fix justify content + min dimension usage in root
Summary: Min dimension was not respected when calculating justify content. This diff ensures that the min dimension is taken into account when at most measure spec is used. Reviewed By: gkassabli, lucasr Differential Revision: D4021443 fbshipit-source-id: 00f58c6078ac3076221e1148aacc34712786deb5
This commit is contained in:
committed by
Facebook Github Bot
parent
c619c0be5a
commit
b21efa45e6
@@ -1514,10 +1514,14 @@ static void layoutNodeImpl(const CSSNodeRef node,
|
|||||||
// that are aligned "stretch". We need to compute these stretch values and
|
// that are aligned "stretch". We need to compute these stretch values and
|
||||||
// set the final positions.
|
// set the final positions.
|
||||||
|
|
||||||
// If we are using "at most" rules in the main axis, we won't distribute
|
// If we are using "at most" rules in the main axis. Calculate the remaining space when
|
||||||
// any remaining space at this point.
|
// constraint by the min size defined for the main axis.
|
||||||
if (measureModeMainDim == CSSMeasureModeAtMost) {
|
if (measureModeMainDim == CSSMeasureModeAtMost) {
|
||||||
remainingFreeSpace = 0;
|
if (!CSSValueIsUndefined(node->style.minDimensions[dim[mainAxis]]) && node->style.minDimensions[dim[mainAxis]] >= 0) {
|
||||||
|
remainingFreeSpace = fmaxf(0, node->style.minDimensions[dim[mainAxis]] - (availableInnerMainDim - remainingFreeSpace));
|
||||||
|
} else {
|
||||||
|
remainingFreeSpace = 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (justifyContent) {
|
switch (justifyContent) {
|
||||||
|
@@ -27,6 +27,14 @@
|
|||||||
<div style="flex-grow: 1; min-width: 60px;"></div>
|
<div style="flex-grow: 1; min-width: 60px;"></div>
|
||||||
<div style="flex-grow: 1;"></div>
|
<div style="flex-grow: 1;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="justify_content_min_max" style="max-height: 200px; min-height: 100px; width: 100px; justify-content: center;">
|
||||||
|
<div style="width: 60px; height: 60px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="align_items_min_max" style="max-width: 200px; min-width: 100px; height: 100px; align-items: center;">
|
||||||
|
<div style="width: 60px; height: 60px;"></div>
|
||||||
|
</div>
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -206,3 +214,79 @@ TEST(CSSLayoutTest, min_width) {
|
|||||||
|
|
||||||
CSSNodeFreeRecursive(root);
|
CSSNodeFreeRecursive(root);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TEST(CSSLayoutTest, justify_content_min_max) {
|
||||||
|
const CSSNodeRef root = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetJustifyContent(root, CSSJustifyCenter);
|
||||||
|
CSSNodeStyleSetWidth(root, 100);
|
||||||
|
CSSNodeStyleSetMinHeight(root, 100);
|
||||||
|
CSSNodeStyleSetMaxHeight(root, 200);
|
||||||
|
|
||||||
|
const CSSNodeRef root_child0 = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetWidth(root_child0, 60);
|
||||||
|
CSSNodeStyleSetHeight(root_child0, 60);
|
||||||
|
CSSNodeInsertChild(root, root_child0, 0);
|
||||||
|
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
|
||||||
|
ASSERT_EQ(20, CSSNodeLayoutGetTop(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetWidth(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
|
||||||
|
|
||||||
|
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||||
|
|
||||||
|
ASSERT_EQ(40, CSSNodeLayoutGetLeft(root_child0));
|
||||||
|
ASSERT_EQ(20, CSSNodeLayoutGetTop(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetWidth(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
|
||||||
|
|
||||||
|
CSSNodeFreeRecursive(root);
|
||||||
|
}
|
||||||
|
|
||||||
|
TEST(CSSLayoutTest, align_items_min_max) {
|
||||||
|
const CSSNodeRef root = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetAlignItems(root, CSSAlignCenter);
|
||||||
|
CSSNodeStyleSetMinWidth(root, 100);
|
||||||
|
CSSNodeStyleSetMaxWidth(root, 200);
|
||||||
|
CSSNodeStyleSetHeight(root, 100);
|
||||||
|
|
||||||
|
const CSSNodeRef root_child0 = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetWidth(root_child0, 60);
|
||||||
|
CSSNodeStyleSetHeight(root_child0, 60);
|
||||||
|
CSSNodeInsertChild(root, root_child0, 0);
|
||||||
|
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||||
|
|
||||||
|
ASSERT_EQ(20, CSSNodeLayoutGetLeft(root_child0));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetWidth(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
|
||||||
|
|
||||||
|
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||||
|
|
||||||
|
ASSERT_EQ(20, CSSNodeLayoutGetLeft(root_child0));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetWidth(root_child0));
|
||||||
|
ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
|
||||||
|
|
||||||
|
CSSNodeFreeRecursive(root);
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user