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

BREAKING: Change aspect ratio behavior

Browse Source 
Summary:
@public

== Before ==
- Aspect ratio would do its best to fit within it's parent constraints
- Aspect ratio would prioritize `alignItems: stretch` over other sizing properties.

== After ==
- Aspect ratio is allowed to make a node grow past its parent constraints. This matches many other aspects of flexbox where parent constraints are not treated as hard constraints but rather as suggestions.
- Aspect ratio only takes `alignItems: stretch` into account if no other size definition is defined. This matches the interaction of other properties with `alignItems: stretch`.

== Updating your code ==

**You probably don't need to do anything** but in case something does break in your product it should be as easy as  adding `{width: '100%', height: '100%', flexShrink: 1}` to the style declaring the `aspectRatio`.

Reviewed By: gkassabli

Differential Revision: D5639187

fbshipit-source-id: 603e8fcc3373f0b7f2461da2dad1625ab59dcb19
This commit is contained in:
Emil Sjolander
2017-08-21 03:09:09 -07:00
committed by Facebook Github Bot
parent 32f128640b
commit 35a9f33abb
2 changed files with 226 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
tests/YGAspectRatioTest.cpp
View File

@@ -171,6 +171,38 @@ TEST(YogaTest, aspect_ratio_flex_shrink) {
YGNodeFreeRecursive(root);
}
TEST(YogaTest, aspect_ratio_flex_shrink_2) {
const YGNodeRef root = YGNodeNew();
YGNodeStyleSetWidth(root, 100);
YGNodeStyleSetHeight(root, 100);
const YGNodeRef root_child0 = YGNodeNew();
YGNodeStyleSetHeightPercent(root_child0, 100);
YGNodeStyleSetFlexShrink(root_child0, 1);
YGNodeStyleSetAspectRatio(root_child0, 1);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child1 = YGNodeNew();
YGNodeStyleSetHeightPercent(root_child1, 100);
YGNodeStyleSetFlexShrink(root_child1, 1);
YGNodeStyleSetAspectRatio(root_child1, 1);
YGNodeInsertChild(root, root_child1, 1);
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_EQ(50, YGNodeLayoutGetTop(root_child1));
ASSERT_EQ(50, YGNodeLayoutGetWidth(root_child1));
ASSERT_EQ(50, YGNodeLayoutGetHeight(root_child1));
YGNodeFreeRecursive(root);
}
TEST(YogaTest, aspect_ratio_basis) {
const YGNodeRef root = YGNodeNew();
YGNodeStyleSetAlignItems(root, YGAlignFlexStart);
@@ -562,8 +594,8 @@ TEST(YogaTest, aspect_ratio_overrides_flex_grow_row) {
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(200, YGNodeLayoutGetHeight(root_child0));
YGNodeFreeRecursive(root);
}
@@ -584,8 +616,8 @@ TEST(YogaTest, aspect_ratio_overrides_flex_grow_column) {
ASSERT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(200, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root_child0));
YGNodeFreeRecursive(root);
}
@@ -747,3 +779,96 @@ TEST(YogaTest, aspect_ratio_defined_cross_with_margin) {
YGNodeFreeRecursive(root);
}
TEST(YogaTest, aspect_ratio_should_prefer_explicit_height) {
const YGConfigRef config = YGConfigNew();
YGConfigSetUseWebDefaults(config, true);
const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root, YGFlexDirectionColumn);
const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root_child0, YGFlexDirectionColumn);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child0_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root_child0_child0, YGFlexDirectionColumn);
YGNodeStyleSetHeight(root_child0_child0, 100);
YGNodeStyleSetAspectRatio(root_child0_child0, 2);
YGNodeInsertChild(root_child0, root_child0_child0, 0);
YGNodeCalculateLayout(root, 100, 200, YGDirectionLTR);
ASSERT_EQ(100, YGNodeLayoutGetWidth(root));
ASSERT_EQ(200, YGNodeLayoutGetHeight(root));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(200, YGNodeLayoutGetWidth(root_child0_child0));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root_child0_child0));
YGNodeFreeRecursive(root);
}
TEST(YogaTest, aspect_ratio_should_prefer_explicit_width) {
const YGConfigRef config = YGConfigNew();
YGConfigSetUseWebDefaults(config, true);
const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root_child0, YGFlexDirectionRow);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child0_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root_child0_child0, YGFlexDirectionRow);
YGNodeStyleSetWidth(root_child0_child0, 100);
YGNodeStyleSetAspectRatio(root_child0_child0, 0.5);
YGNodeInsertChild(root_child0, root_child0_child0, 0);
YGNodeCalculateLayout(root, 200, 100, YGDirectionLTR);
ASSERT_EQ(200, YGNodeLayoutGetWidth(root));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0_child0));
ASSERT_EQ(200, YGNodeLayoutGetHeight(root_child0_child0));
YGNodeFreeRecursive(root);
}
TEST(YogaTest, aspect_ratio_should_prefer_flexed_dimension) {
const YGConfigRef config = YGConfigNew();
YGConfigSetUseWebDefaults(config, true);
const YGNodeRef root = YGNodeNewWithConfig(config);
const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root_child0, YGFlexDirectionColumn);
YGNodeStyleSetAspectRatio(root_child0, 2);
YGNodeStyleSetFlexGrow(root_child0, 1);
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child0_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetAspectRatio(root_child0_child0, 4);
YGNodeStyleSetFlexGrow(root_child0_child0, 1);
YGNodeInsertChild(root_child0, root_child0_child0, 0);
YGNodeCalculateLayout(root, 100, 100, YGDirectionLTR);
ASSERT_EQ(100, YGNodeLayoutGetWidth(root));
ASSERT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_EQ(200, YGNodeLayoutGetWidth(root_child0_child0));
ASSERT_EQ(50, YGNodeLayoutGetHeight(root_child0_child0));
YGNodeFreeRecursive(root);
}