Skip to content

Commit

Permalink
Take margin into account on max dimension
Browse files Browse the repository at this point in the history 
Summary:
We need to take the margin into account if we clip on max dimension. Fixes #466.
Closes #467

Differential Revision: D4681342

Pulled By: emilsjolander

fbshipit-source-id: 56311df9864a284d553c31f1c6db382f337f1fad
  • Loading branch information
@woehrl01 @facebook-github-bot
woehrl01 authored and facebook-github-bot committed Mar 9, 2017
1 parent 8dea884 commit 09f0c2d
Show file tree
Hide file tree
Showing 6 changed files with 372 additions and 23 deletions.
84 changes: 84 additions & 0 deletions csharp/tests/Facebook.Yoga/YGMarginTest.cs
View file
Expand Up @@ -1352,5 +1352,89 @@ public void Test_margin_auto_top_and_bottom_strech()
Assert.AreEqual(50f, root_child1.LayoutHeight);
}

[Test]
public void Test_margin_should_not_be_part_of_max_height()
{
YogaConfig config = new YogaConfig();

YogaNode root = new YogaNode(config);
root.Width = 250;
root.Height = 250;

YogaNode root_child0 = new YogaNode(config);
root_child0.MarginTop = 20;
root_child0.Width = 100;
root_child0.Height = 100;
root_child0.MaxHeight = 100;
root.Insert(0, root_child0);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(250f, root.LayoutWidth);
Assert.AreEqual(250f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(20f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(100f, root_child0.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(250f, root.LayoutWidth);
Assert.AreEqual(250f, root.LayoutHeight);

Assert.AreEqual(150f, root_child0.LayoutX);
Assert.AreEqual(20f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(100f, root_child0.LayoutHeight);
}

[Test]
public void Test_margin_should_not_be_part_of_max_width()
{
YogaConfig config = new YogaConfig();

YogaNode root = new YogaNode(config);
root.Width = 250;
root.Height = 250;

YogaNode root_child0 = new YogaNode(config);
root_child0.MarginLeft = 20;
root_child0.Width = 100;
root_child0.MaxWidth = 100;
root_child0.Height = 100;
root.Insert(0, root_child0);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(250f, root.LayoutWidth);
Assert.AreEqual(250f, root.LayoutHeight);

Assert.AreEqual(20f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(100f, root_child0.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(250f, root.LayoutWidth);
Assert.AreEqual(250f, root.LayoutHeight);

Assert.AreEqual(150f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(100f, root_child0.LayoutHeight);
}

}
}
8 changes: 8 additions & 0 deletions gentest/fixtures/YGMarginTest.html
View file
Expand Up @@ -116,3 +116,11 @@
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
<div style="width: 50px; height: 50px;"></div>
</div>

<div id="margin_should_not_be_part_of_max_height" style="width: 250px; height: 250px;">
<div style="width: 100px; height: 100px; max-height: 100px; margin-top: 20px;"></div>
</div>

<div id="margin_should_not_be_part_of_max_width" style="width: 250px; height: 250px;">
<div style="width: 100px; height: 100px; max-width: 100px; margin-left: 20px;"></div>
</div>
82 changes: 82 additions & 0 deletions java/tests/com/facebook/yoga/YGMarginTest.java
View file
Expand Up @@ -1326,4 +1326,86 @@ public void test_margin_auto_top_and_bottom_strech() {
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
}

@Test
public void test_margin_should_not_be_part_of_max_height() {
YogaConfig config = new YogaConfig();

final YogaNode root = new YogaNode(config);
root.setWidth(250f);
root.setHeight(250f);

final YogaNode root_child0 = new YogaNode(config);
root_child0.setMargin(YogaEdge.TOP, 20f);
root_child0.setWidth(100f);
root_child0.setHeight(100f);
root_child0.setMaxHeight(100f);
root.addChildAt(root_child0, 0);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(250f, root.getLayoutWidth(), 0.0f);
assertEquals(250f, root.getLayoutHeight(), 0.0f);

assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(20f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child0.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(250f, root.getLayoutWidth(), 0.0f);
assertEquals(250f, root.getLayoutHeight(), 0.0f);

assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(20f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
}

@Test
public void test_margin_should_not_be_part_of_max_width() {
YogaConfig config = new YogaConfig();

final YogaNode root = new YogaNode(config);
root.setWidth(250f);
root.setHeight(250f);

final YogaNode root_child0 = new YogaNode(config);
root_child0.setMargin(YogaEdge.LEFT, 20f);
root_child0.setWidth(100f);
root_child0.setMaxWidth(100f);
root_child0.setHeight(100f);
root.addChildAt(root_child0, 0);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(250f, root.getLayoutWidth(), 0.0f);
assertEquals(250f, 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(100f, root_child0.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(250f, root.getLayoutWidth(), 0.0f);
assertEquals(250f, root.getLayoutHeight(), 0.0f);

assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
}

}
82 changes: 82 additions & 0 deletions javascript/tests/Facebook.Yoga/YGMarginTest.js
View file
Expand Up @@ -1321,3 +1321,85 @@ it("margin_auto_top_and_bottom_strech", function () {
}
}
});
it("margin_should_not_be_part_of_max_height", function () {
try {
var root = Yoga.Node.create(config);
root.setWidth(250);
root.setHeight(250);

var root_child0 = Yoga.Node.create(config);
root_child0.setMargin(Yoga.EDGE_TOP, 20);
root_child0.setWidth(100);
root_child0.setHeight(100);
root_child0.setMaxHeight(100);
root.insertChild(root_child0, 0);
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(250 === root.getComputedWidth(), "250 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(250 === root.getComputedHeight(), "250 === root.getComputedHeight() (" + root.getComputedHeight() + ")");

console.assert(0 === root_child0.getComputedLeft(), "0 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
console.assert(20 === root_child0.getComputedTop(), "20 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
console.assert(100 === root_child0.getComputedWidth(), "100 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(100 === root_child0.getComputedHeight(), "100 === root_child0.getComputedHeight() (" + root_child0.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(250 === root.getComputedWidth(), "250 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(250 === root.getComputedHeight(), "250 === root.getComputedHeight() (" + root.getComputedHeight() + ")");

console.assert(150 === root_child0.getComputedLeft(), "150 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
console.assert(20 === root_child0.getComputedTop(), "20 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
console.assert(100 === root_child0.getComputedWidth(), "100 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
console.assert(100 === root_child0.getComputedHeight(), "100 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
}
});
it("margin_should_not_be_part_of_max_width", function () {
try {
var root = Yoga.Node.create(config);
root.setWidth(250);
root.setHeight(250);

var root_child0 = Yoga.Node.create(config);
root_child0.setMargin(Yoga.EDGE_LEFT, 20);
root_child0.setWidth(100);
root_child0.setMaxWidth(100);
root_child0.setHeight(100);
root.insertChild(root_child0, 0);
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(250 === root.getComputedWidth(), "250 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(250 === root.getComputedHeight(), "250 === 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(100 === root_child0.getComputedHeight(), "100 === root_child0.getComputedHeight() (" + root_child0.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(250 === root.getComputedWidth(), "250 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
console.assert(250 === root.getComputedHeight(), "250 === root.getComputedHeight() (" + root.getComputedHeight() + ")");

console.assert(150 === root_child0.getComputedLeft(), "150 === 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(100 === root_child0.getComputedHeight(), "100 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
}
});
84 changes: 84 additions & 0 deletions tests/YGMarginTest.cpp
View file
Expand Up @@ -1346,3 +1346,87 @@ TEST(YogaTest, margin_auto_top_and_bottom_strech) {

YGConfigFree(config);
}

TEST(YogaTest, margin_should_not_be_part_of_max_height) {
const YGConfigRef config = YGConfigNew();

const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetWidth(root, 250);
YGNodeStyleSetHeight(root, 250);

const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetMargin(root_child0, YGEdgeTop, 20);
YGNodeStyleSetWidth(root_child0, 100);
YGNodeStyleSetHeight(root_child0, 100);
YGNodeStyleSetMaxHeight(root_child0, 100);
YGNodeInsertChild(root, root_child0, 0);
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetHeight(root));

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0));

YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetHeight(root));

ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0));

YGNodeFreeRecursive(root);

YGConfigFree(config);
}

TEST(YogaTest, margin_should_not_be_part_of_max_width) {
const YGConfigRef config = YGConfigNew();

const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetWidth(root, 250);
YGNodeStyleSetHeight(root, 250);

const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetMargin(root_child0, YGEdgeLeft, 20);
YGNodeStyleSetWidth(root_child0, 100);
YGNodeStyleSetMaxWidth(root_child0, 100);
YGNodeStyleSetHeight(root_child0, 100);
YGNodeInsertChild(root, root_child0, 0);
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(250, 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(100, YGNodeLayoutGetHeight(root_child0));

YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetHeight(root));

ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0));

YGNodeFreeRecursive(root);

YGConfigFree(config);
}

0 comments on commit 09f0c2d

Please sign in to comment.