Skip to content

GitLab

T
tangled
Commit 58c72c8f authored by robhogan's avatar robhogan Committed by Commit bot
Browse files
Options

Treat implicit height on positioned objects as non-auto 

When calculating a block's percentage relativePositionOffset() we ought to consider
containing blocks with an implicit height from top/bottom as having a height we
can use to calculate an offset from.

BUG=61049

Review-Url: https://codereview.chromium.org/2288563002
Cr-Commit-Position: refs/heads/master@{#415415}
parent e268c721
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 2 deletions
third_party/WebKit/LayoutTests/fast/block/positioning/relative-with-implicit-height-containing-block-2.html 0 → 100644
View file @ 58c72c8f
<!DOCTYPE html>
<style>
#wrapper {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
#child {
position: relative;
width: 100px;
height: 100px;
top: 50%;
background-color: green;
}
#ref {
position: absolute;
width: 100px;
height: 100px;
top: 300px;
left: 0px;
background-color: red;
}
</style>
<p>crbug.com/61049: There should be no red box below.</p>
<div id="log"></div>
<div id="ref"></div>
<div id="wrapper">
<div id="child"></div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
test(() => {
assert_equals(document.getElementById("child").getClientRects()[0].top, window.innerHeight / 2, "Child should be at 300px.");
}, "Check that #child is in the correct position.");
</script>
third_party/WebKit/LayoutTests/fast/block/positioning/relative-with-implicit-height-containing-block.html 0 → 100644
View file @ 58c72c8f
<!DOCTYPE html>
<style>
#wrapper {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
#child {
position: relative;
width: 100px;
height: 100px;
top: 50%;
background-color: green;
}
#ref {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
background-color: red;
}
</style>
<p>crbug.com/61049: There should be no red box below.</p>
<div id="log"></div>
<div id="ref"></div>
<div style="position: absolute; height: 200px; width: 200px; top: 50px;">
<div id="wrapper">
<div id="child" data-positioned-offset-y=100></div>
</div>
</div>
<script src="../../../resources/check-layout.js"></script>
<script>
checkLayout("#child", log);
</script>
third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
View file @ 58c72c8f
......@@ -492,6 +492,11 @@ void LayoutBoxModelObject::updateFromStyle()
setHorizontalWritingMode(styleToUse.isHorizontalWritingMode());
}
static inline bool isOutOfFlowPositionedWithImplicitHeight(const LayoutBoxModelObject* child)
{
return child->isOutOfFlowPositioned() && !child->style()->logicalTop().isAuto() && !child->style()->logicalBottom().isAuto();
}
LayoutBlock* LayoutBoxModelObject::containingBlockForAutoHeightDetection(Length logicalHeight) const
{
// For percentage heights: The percentage is calculated with respect to the height of the generated box's
......@@ -519,7 +524,7 @@ LayoutBlock* LayoutBoxModelObject::containingBlockForAutoHeightDetection(Length
if (cb->isLayoutView())
return nullptr;
if (cb->isOutOfFlowPositioned() && !cb->style()->logicalTop().isAuto() && !cb->style()->logicalBottom().isAuto())
if (isOutOfFlowPositionedWithImplicitHeight(cb))
return nullptr;
return cb;
......@@ -543,7 +548,7 @@ bool LayoutBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight(bool che
if (!checkingContainingBlock && thisBox->hasOverrideContainingBlockLogicalHeight())
return false;
}
if (logicalHeightLength.isAuto())
if (logicalHeightLength.isAuto() && !isOutOfFlowPositionedWithImplicitHeight(this))
return true;
if (document().inQuirksMode())
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment