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

Redo layout of 'stretch' aligned items for correct positioning of nested

Browse Source 
items

Fixes facebook/css-layout#83, facebook/css-layout#100,
facebook/css-layout#127.
This commit is contained in:
Alex Bogomazov
2015-10-15 01:30:33 +03:00
parent dd8e5cd65d
commit 425345aa8d
15 changed files with 847 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/csharp/Facebook.CSSLayout.Tests/LayoutCachingTest.cs
View File

@@ -88,7 +88,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c0c0.HasNewLayout);
Assert.IsTrue(c1.HasNewLayout);
Assert.IsFalse(c1c0.HasNewLayout);
Assert.IsTrue(c1c0.HasNewLayout);
}
[Test]
@@ -136,7 +136,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c1.HasNewLayout);
Assert.IsTrue(c0.HasNewLayout);
Assert.IsFalse(c0c0.HasNewLayout);
Assert.IsTrue(c0c0.HasNewLayout);
}
[Test]
@@ -155,7 +155,7 @@ namespace Facebook.CSSLayout.Tests
root.calculateLayout();
markLayoutAppliedForTree(root);
c0.Height = 200;
c0.Width = 200;
root.calculateLayout();
Assert.IsTrue(root.HasNewLayout);
@@ -163,7 +163,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c0c0.HasNewLayout);
Assert.IsTrue(c1.HasNewLayout);
Assert.IsFalse(c1c0.HasNewLayout);
Assert.IsTrue(c1c0.HasNewLayout);
}
[Test]
@@ -234,7 +234,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c1.HasNewLayout);
Assert.IsTrue(c0.HasNewLayout);
Assert.IsFalse(c0c0.HasNewLayout);
Assert.IsTrue(c0c0.HasNewLayout);
}
}
}

202
src/csharp/Facebook.CSSLayout.Tests/LayoutEngineTest.cs
View File

@@ -8185,6 +8185,208 @@ public class LayoutEngineTest
[Test]
public void TestCase184()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.Row;
node_0.style.alignItems = CSSAlign.Stretch;
node_0.style.dimensions[DIMENSION_WIDTH] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.flexDirection = CSSFlexDirection.Row;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.flexDirection = CSSFlexDirection.Row;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.style.alignSelf = CSSAlign.Center;
}
}
node_1 = node_0.getChildAt(1);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 150;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 0;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.layout.position[POSITION_TOP] = 70;
node_3.layout.position[POSITION_LEFT] = 0;
node_3.layout.dimensions[DIMENSION_WIDTH] = 0;
node_3.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout content of an item which is stretched late", root_node, root_layout);
}
[Test]
public void TestCase185()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.dimensions[DIMENSION_WIDTH] = 200;
node_2.style.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
}
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 200;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 210;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 0;
node_1.layout.dimensions[DIMENSION_WIDTH] = 200;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 200;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 200;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 210;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 190;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 190;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
}
test("should layout items whose positioning is determined by sibling tree branches", root_node, root_layout);
}
[Test]
public void TestCase186()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.Row;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FlexStart;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.Stretch;
node_1.style.dimensions[DIMENSION_WIDTH] = 1;
node_1 = node_0.getChildAt(2);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 11;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 1;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
node_1 = node_0.getChildAt(2);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 11;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout child whose cross axis is undefined and whose alignSelf is stretch", root_node, root_layout);
}
[Test]
public void TestCase187()
{
TestCSSNode root_node = new TestCSSNode();
{

26
src/csharp/Facebook.CSSLayout/LayoutEngine.cs
View File

@@ -404,8 +404,8 @@ namespace Facebook.CSSLayout
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth;
float maxHeight;
float maxWidth = CSSConstants.Undefined;
float maxHeight = CSSConstants.Undefined;
for (i = startLine; i < childCount; ++i) {
child = node.getChildAt(i);
child.lineIndex = linesCount;
@@ -549,7 +549,7 @@ namespace Facebook.CSSLayout
if (isSimpleStackCross &&
(child.style.positionType != CSSPositionType.Relative ||
(alignItem != CSSAlign.Stretch && alignItem != CSSAlign.FlexStart) ||
!(!float.IsNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0))) {
(alignItem == CSSAlign.Stretch && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -759,15 +759,31 @@ namespace Facebook.CSSLayout
CSSAlign alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem == CSSAlign.Stretch) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (!(!float.IsNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0)) {
if (!(!float.IsNaN(child.style.dimensions[dim[crossAxis]]) && child.style.dimensions[dim[crossAxis]] >= 0.0)) {
float dimCrossAxis = child.layout.dimensions[dim[crossAxis]];
child.layout.dimensions[dim[crossAxis]] = Math.Max(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - (child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]))),
// You never want to go smaller than padding
((child.style.padding.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.border.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis])) + (child.style.padding.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) + child.style.border.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis])))
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout.dimensions[dim[crossAxis]] && child.getChildCount() > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout.position[leading[mainAxis]] -= child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[trailing[mainAxis]] -= child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[leading[crossAxis]] -= child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) +
getRelativePosition(child, crossAxis);
child.layout.position[trailing[crossAxis]] -= child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) +
getRelativePosition(child, crossAxis);
layoutNode(layoutContext, child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem != CSSAlign.FlexStart) {
// The remaining space between the parent dimensions+padding and child