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>
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -248,3 +253,72 @@ TEST(CSSLayoutTest, do_not_clamp_height_of_absolute_node_to_height_of_its_overfl
|
||||
|
||||
CSSNodeFreeRecursive(root);
|
||||
}
|
||||
|
||||
TEST(CSSLayoutTest, absolute_layout_within_border) {
|
||||
const CSSNodeRef root = CSSNodeNew();
|
||||
CSSNodeStyleSetMargin(root, CSSEdgeLeft, 10);
|
||||
CSSNodeStyleSetMargin(root, CSSEdgeTop, 10);
|
||||
CSSNodeStyleSetMargin(root, CSSEdgeRight, 10);
|
||||
CSSNodeStyleSetMargin(root, CSSEdgeBottom, 10);
|
||||
CSSNodeStyleSetPadding(root, CSSEdgeLeft, 10);
|
||||
CSSNodeStyleSetPadding(root, CSSEdgeTop, 10);
|
||||
CSSNodeStyleSetPadding(root, CSSEdgeRight, 10);
|
||||
CSSNodeStyleSetPadding(root, CSSEdgeBottom, 10);
|
||||
CSSNodeStyleSetBorder(root, CSSEdgeLeft, 10);
|
||||
CSSNodeStyleSetBorder(root, CSSEdgeTop, 10);
|
||||
CSSNodeStyleSetBorder(root, CSSEdgeRight, 10);
|
||||
CSSNodeStyleSetBorder(root, CSSEdgeBottom, 10);
|
||||
CSSNodeStyleSetWidth(root, 100);
|
||||
CSSNodeStyleSetHeight(root, 100);
|
||||
|
||||
const CSSNodeRef root_child0 = CSSNodeNew();
|
||||
CSSNodeStyleSetPositionType(root_child0, CSSPositionTypeAbsolute);
|
||||
CSSNodeStyleSetPosition(root_child0, CSSEdgeLeft, 0);
|
||||
CSSNodeStyleSetPosition(root_child0, CSSEdgeTop, 0);
|
||||
CSSNodeStyleSetWidth(root_child0, 50);
|
||||
CSSNodeStyleSetHeight(root_child0, 50);
|
||||
CSSNodeInsertChild(root, root_child0, 0);
|
||||
|
||||
const CSSNodeRef root_child1 = CSSNodeNew();
|
||||
CSSNodeStyleSetPositionType(root_child1, CSSPositionTypeAbsolute);
|
||||
CSSNodeStyleSetPosition(root_child1, CSSEdgeRight, 0);
|
||||
CSSNodeStyleSetPosition(root_child1, CSSEdgeBottom, 0);
|
||||
CSSNodeStyleSetWidth(root_child1, 50);
|
||||
CSSNodeStyleSetHeight(root_child1, 50);
|
||||
CSSNodeInsertChild(root, root_child1, 1);
|
||||
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
|
||||
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetLeft(root));
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetTop(root));
|
||||
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetTop(root_child0));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_EQ(40, CSSNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_EQ(40, CSSNodeLayoutGetTop(root_child1));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child1));
|
||||
|
||||
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
|
||||
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetLeft(root));
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetTop(root));
|
||||
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
|
||||
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_EQ(10, CSSNodeLayoutGetTop(root_child0));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_EQ(40, CSSNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_EQ(40, CSSNodeLayoutGetTop(root_child1));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child1));
|
||||
|
||||
CSSNodeFreeRecursive(root);
|
||||
}
|
||||
|
Reference in New Issue
Block a user