Absolute positioned items should apear inside padding but outside border
Summary: Absolute positioned elements were not correctly respecting border / padding. https://github.com/facebook/css-layout/issues/245 fixes #245 Reviewed By: gkassabli Differential Revision: D4153332 fbshipit-source-id: 251e29e02018a433f60349b78c03feb121512797
This commit is contained in:
committed by
Facebook Github Bot
parent
f5912a97e4
commit
ff602d4606
@@ -31,6 +31,11 @@
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="absolute_layout_within_border" style="height:100px; width:100px; border-width: 10px; margin: 10px; padding: 10px;">
|
||||
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
|
||||
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px;"></div>
|
||||
</div>
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -264,5 +269,76 @@ namespace Facebook.CSSLayout
|
||||
Assert.AreEqual(100, root_child0_child0.LayoutHeight);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void Test_absolute_layout_within_border()
|
||||
{
|
||||
CSSNode root = new CSSNode();
|
||||
root.SetMargin(CSSEdge.Left, 10);
|
||||
root.SetMargin(CSSEdge.Top, 10);
|
||||
root.SetMargin(CSSEdge.Right, 10);
|
||||
root.SetMargin(CSSEdge.Bottom, 10);
|
||||
root.SetPadding(CSSEdge.Left, 10);
|
||||
root.SetPadding(CSSEdge.Top, 10);
|
||||
root.SetPadding(CSSEdge.Right, 10);
|
||||
root.SetPadding(CSSEdge.Bottom, 10);
|
||||
root.SetBorder(CSSEdge.Left, 10);
|
||||
root.SetBorder(CSSEdge.Top, 10);
|
||||
root.SetBorder(CSSEdge.Right, 10);
|
||||
root.SetBorder(CSSEdge.Bottom, 10);
|
||||
root.StyleWidth = 100;
|
||||
root.StyleHeight = 100;
|
||||
|
||||
CSSNode root_child0 = new CSSNode();
|
||||
root_child0.PositionType = CSSPositionType.Absolute;
|
||||
root_child0.SetPosition(CSSEdge.Left, 0);
|
||||
root_child0.SetPosition(CSSEdge.Top, 0);
|
||||
root_child0.StyleWidth = 50;
|
||||
root_child0.StyleHeight = 50;
|
||||
root.Insert(0, root_child0);
|
||||
|
||||
CSSNode root_child1 = new CSSNode();
|
||||
root_child1.PositionType = CSSPositionType.Absolute;
|
||||
root_child1.SetPosition(CSSEdge.Right, 0);
|
||||
root_child1.SetPosition(CSSEdge.Bottom, 0);
|
||||
root_child1.StyleWidth = 50;
|
||||
root_child1.StyleHeight = 50;
|
||||
root.Insert(1, root_child1);
|
||||
root.StyleDirection = CSSDirection.LeftToRight;
|
||||
root.CalculateLayout();
|
||||
|
||||
Assert.AreEqual(10, root.LayoutX);
|
||||
Assert.AreEqual(10, root.LayoutY);
|
||||
Assert.AreEqual(100, root.LayoutWidth);
|
||||
Assert.AreEqual(100, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(10, root_child0.LayoutX);
|
||||
Assert.AreEqual(10, root_child0.LayoutY);
|
||||
Assert.AreEqual(50, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(50, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(40, root_child1.LayoutX);
|
||||
Assert.AreEqual(40, root_child1.LayoutY);
|
||||
Assert.AreEqual(50, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(50, root_child1.LayoutHeight);
|
||||
|
||||
root.StyleDirection = CSSDirection.RightToLeft;
|
||||
root.CalculateLayout();
|
||||
|
||||
Assert.AreEqual(10, root.LayoutX);
|
||||
Assert.AreEqual(10, root.LayoutY);
|
||||
Assert.AreEqual(100, root.LayoutWidth);
|
||||
Assert.AreEqual(100, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(10, root_child0.LayoutX);
|
||||
Assert.AreEqual(10, root_child0.LayoutY);
|
||||
Assert.AreEqual(50, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(50, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(40, root_child1.LayoutX);
|
||||
Assert.AreEqual(40, root_child1.LayoutY);
|
||||
Assert.AreEqual(50, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(50, root_child1.LayoutHeight);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user