Fix sizing of absolutely positioned nodes inside overflow:hidden parent
Summary: When an absolutely positioned node appeared inside an overflow:hidden parent, we were limiting its height. This is inconsistent with how layout behaves on the web. Closes https://github.com/facebook/css-layout/pull/218 Reviewed By: lucasr Differential Revision: D3797285 Pulled By: emilsjolander fbshipit-source-id: 98f98e77aa26edce86b9882c1cac284799b69a27
This commit is contained in:
committed by
Facebook Github Bot 2
parent
d9191431ff
commit
b51e832e4e
@@ -1764,16 +1764,6 @@ static void layoutNodeImpl(const CSSNodeRef node,
|
|||||||
childWidthMeasureMode = CSSMeasureModeAtMost;
|
childWidthMeasureMode = CSSMeasureModeAtMost;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The W3C spec doesn't say anything about the 'overflow' property,
|
|
||||||
// but all major browsers appear to implement the following logic.
|
|
||||||
if (node->style.overflow == CSSOverflowHidden) {
|
|
||||||
if (isMainAxisRow && CSSValueIsUndefined(childHeight) &&
|
|
||||||
!CSSValueIsUndefined(availableInnerHeight)) {
|
|
||||||
childHeight = availableInnerHeight;
|
|
||||||
childHeightMeasureMode = CSSMeasureModeAtMost;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
layoutNodeInternal(currentAbsoluteChild,
|
layoutNodeInternal(currentAbsoluteChild,
|
||||||
childWidth,
|
childWidth,
|
||||||
childHeight,
|
childHeight,
|
||||||
|
@@ -1336,15 +1336,6 @@ public class LayoutEngine {
|
|||||||
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
|
childWidthMeasureMode = CSSMeasureMode.AT_MOST;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The W3C spec doesn't say anything about the 'overflow' property,
|
|
||||||
// but all major browsers appear to implement the following logic.
|
|
||||||
if (node.style.overflow == CSSOverflow.HIDDEN) {
|
|
||||||
if (isMainAxisRow && Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) {
|
|
||||||
childHeight = availableInnerHeight;
|
|
||||||
childHeightMeasureMode = CSSMeasureMode.AT_MOST;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
layoutNodeInternal(layoutContext, currentAbsoluteChild, childWidth, childHeight, direction, childWidthMeasureMode, childHeightMeasureMode, false, "abs-measure");
|
layoutNodeInternal(layoutContext, currentAbsoluteChild, childWidth, childHeight, direction, childWidthMeasureMode, childHeightMeasureMode, false, "abs-measure");
|
||||||
childWidth = currentAbsoluteChild.layout.measuredDimensions[DIMENSION_WIDTH] + (currentAbsoluteChild.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + currentAbsoluteChild.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]));
|
childWidth = currentAbsoluteChild.layout.measuredDimensions[DIMENSION_WIDTH] + (currentAbsoluteChild.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + currentAbsoluteChild.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW]));
|
||||||
childHeight = currentAbsoluteChild.layout.measuredDimensions[DIMENSION_HEIGHT] + (currentAbsoluteChild.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + currentAbsoluteChild.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]));
|
childHeight = currentAbsoluteChild.layout.measuredDimensions[DIMENSION_HEIGHT] + (currentAbsoluteChild.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + currentAbsoluteChild.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN]));
|
||||||
|
@@ -22,6 +22,11 @@
|
|||||||
* <div id="absolute_layout_width_height_left_top_right_bottom" style="width: 100px; height: 100px;">
|
* <div id="absolute_layout_width_height_left_top_right_bottom" style="width: 100px; height: 100px;">
|
||||||
* <div style="width:10px; height: 10px; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px;"></div>
|
* <div style="width:10px; height: 10px; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px;"></div>
|
||||||
* </div>
|
* </div>
|
||||||
|
* <div id="do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_parent" style="height: 50px; width: 50px; overflow: hidden; flex-direction: row;">
|
||||||
|
* <div style="position: absolute; left: 0; top: 0;">
|
||||||
|
* <div style="width: 100px; height: 100px;"></div>
|
||||||
|
* </div>
|
||||||
|
* </div>
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -129,3 +134,36 @@ TEST(CSSLayoutTest, absolute_layout_width_height_left_top_right_bottom) {
|
|||||||
ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
|
ASSERT_EQ(10, CSSNodeLayoutGetWidth(root_child0));
|
||||||
ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
|
ASSERT_EQ(10, CSSNodeLayoutGetHeight(root_child0));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TEST(CSSLayoutTest, do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_parent) {
|
||||||
|
const CSSNodeRef root = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionRow);
|
||||||
|
CSSNodeStyleSetOverflow(root, CSSOverflowHidden);
|
||||||
|
CSSNodeStyleSetWidth(root, 50);
|
||||||
|
CSSNodeStyleSetHeight(root, 50);
|
||||||
|
|
||||||
|
const CSSNodeRef root_child0 = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetPositionType(root_child0, CSSPositionTypeAbsolute);
|
||||||
|
CSSNodeInsertChild(root, root_child0, 0);
|
||||||
|
|
||||||
|
const CSSNodeRef root_child0_child0 = CSSNodeNew();
|
||||||
|
CSSNodeStyleSetWidth(root_child0_child0, 100);
|
||||||
|
CSSNodeStyleSetHeight(root_child0_child0, 100);
|
||||||
|
CSSNodeInsertChild(root_child0, root_child0_child0, 0);
|
||||||
|
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
|
||||||
|
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root));
|
||||||
|
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root));
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root_child0));
|
||||||
|
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0_child0));
|
||||||
|
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0_child0));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0_child0));
|
||||||
|
ASSERT_EQ(100, CSSNodeLayoutGetHeight(root_child0_child0));
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user