Files
yoga/tests/CSSLayoutMeasureModeTest.cpp
Emil Sjolander 15d5cb0169 BREAKING - Fix unconstraint sizing in main axis
Summary:
@public
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.

This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.

Reviewed By: majak

Differential Revision: D3876927

fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
2016-09-26 06:22:39 -07:00

295 lines
10 KiB
C++

/**
* Copyright (c) 2014-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#include <CSSLayout/CSSLayout.h>
#include <gtest/gtest.h>
struct _MeasureConstraint {
float width;
CSSMeasureMode widthMode;
float height;
CSSMeasureMode heightMode;
};
struct _MeasureConstraintList {
uint32_t length;
struct _MeasureConstraint *constraints;
};
static CSSSize _measure(void *context,
float width,
CSSMeasureMode widthMode,
float height,
CSSMeasureMode heightMode) {
struct _MeasureConstraintList *constraintList = (struct _MeasureConstraintList *)context;
struct _MeasureConstraint *constraints = constraintList->constraints;
uint32_t currentIndex = constraintList->length;
(&constraints[currentIndex])->width = width;
(&constraints[currentIndex])->widthMode = widthMode;
(&constraints[currentIndex])->height = height;
(&constraints[currentIndex])->heightMode = heightMode;
constraintList->length = currentIndex + 1;
return CSSSize {
.width = widthMode == CSSMeasureModeUndefined ? 10 : width,
.height = heightMode == CSSMeasureModeUndefined ? 10 : width,
};
}
TEST(CSSLayoutTest, exactly_measure_stretched_child_column) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].width);
ASSERT_EQ(CSSMeasureModeExactly, constraintList.constraints[0].widthMode);
}
TEST(CSSLayoutTest, exactly_measure_stretched_child_row) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeExactly, constraintList.constraints[0].heightMode);
}
TEST(CSSLayoutTest, at_most_main_axis_column) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].heightMode);
}
TEST(CSSLayoutTest, at_most_cross_axis_column) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].width);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].widthMode);
}
TEST(CSSLayoutTest, at_most_main_axis_row) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].width);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].widthMode);
}
TEST(CSSLayoutTest, at_most_cross_axis_row) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
CSSNodeStyleSetWidth(root, 100);
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].heightMode);
}
TEST(CSSLayoutTest, flex_child) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeStyleSetFlexGrow(root_child0, 1);
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(2, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].heightMode);
ASSERT_EQ(100, constraintList.constraints[1].height);
ASSERT_EQ(CSSMeasureModeExactly, constraintList.constraints[1].heightMode);
}
TEST(CSSLayoutTest, flex_child_with_flex_basis) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetHeight(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeStyleSetFlexGrow(root_child0, 1);
CSSNodeStyleSetFlexBasis(root_child0, 0);
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeExactly, constraintList.constraints[0].heightMode);
}
TEST(CSSLayoutTest, overflow_scroll_column) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
CSSNodeStyleSetOverflow(root, CSSOverflowScroll);
CSSNodeStyleSetHeight(root, 100);
CSSNodeStyleSetWidth(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_EQ(100, constraintList.constraints[0].width);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].widthMode);
ASSERT_TRUE(CSSValueIsUndefined(constraintList.constraints[0].height));
ASSERT_EQ(CSSMeasureModeUndefined, constraintList.constraints[0].heightMode);
}
TEST(CSSLayoutTest, overflow_scroll_row) {
struct _MeasureConstraintList constraintList = _MeasureConstraintList {
.length = 0,
.constraints = (struct _MeasureConstraint *) malloc(10 * sizeof(struct _MeasureConstraint)),
};
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetAlignItems(root, CSSAlignFlexStart);
CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
CSSNodeStyleSetOverflow(root, CSSOverflowScroll);
CSSNodeStyleSetHeight(root, 100);
CSSNodeStyleSetWidth(root, 100);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeSetContext(root_child0, &constraintList);
CSSNodeSetMeasureFunc(root_child0, _measure);
CSSNodeInsertChild(root, root_child0, 0);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(1, constraintList.length);
ASSERT_TRUE(CSSValueIsUndefined(constraintList.constraints[0].width));
ASSERT_EQ(CSSMeasureModeUndefined, constraintList.constraints[0].widthMode);
ASSERT_EQ(100, constraintList.constraints[0].height);
ASSERT_EQ(CSSMeasureModeAtMost, constraintList.constraints[0].heightMode);
}