Skip to content
Permalink
Browse files
Positioned element with percentage padding should recalc width when c…
…ontaining block changed

Positioned element with percentage padding should recalc width when containing block changed
https://bugs.webkit.org/show_bug.cgi?id=80808

Reviewed by Alan Baradlay.

This patch is to align Webkit behavior with Blink / Chrome and Gecko / Firefox.

Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=184672

and a test case from Patch Authored by SravanKumar Sandela.

RenderBlock::removePositionObjects usually don't recalc the width of
positioned descendants with percentage padding unless its width is changed.
For positioned elements which changed their containing block, it should be considered as if the width of the containing block changed.

* Source/WebCore/rendering/RenderBlock.cpp:
(RenderBlock::removePositionObjects): Add condition to recalculate the width
* LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc.html: Added Test Case
* LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc-expected.html: Added Test Case Expectations
* LayoutTests/fast/block/absolute-position-change-width-with-inline-container.html: Added Test Case
* LayoutTests/fast/block/absolute-position-change-width-with-inline-container-expected.html: Added Test Case Expectations

Canonical link: https://commits.webkit.org/256315@main
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Nov 4, 2022
1 parent 5551d9e commit c1324d73bd3c9620496236c7b3abbda0c0cbd607
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 2 deletions.
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {
position: relative;
}
.abs {
outline: solid 1px skyblue;
position: absolute;
left: 0;
top: 0;
right: 0;
}
</style>
</head>
<body>
<p>When you click <button id="more">moooore</button>, the span.abs should expand with the container</p>
<p><span id="container"><span class="abs">&nbsp;</span>Words, words, words moooore</span>
</body>
</html>
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {
position: relative;
}
.abs {
outline: solid 1px skyblue;
position: absolute;
left: 0;
top: 0;
right: 0;
}
</style>
<script type='text/javascript'>
window.onload=function(){
var span = document.createElement('span');
span.innerHTML = ' moooore';
document.getElementById('container').appendChild(span);
};
</script>
</head>
<body>
<p>When you click <button id="more">moooore</button>, the span.abs should expand with the container</p>
<p><span id="container"><span class="abs">&nbsp;</span>Words, words, words</span>
</body>
</html>
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
#dynamic-container {
width: 500px;
}
#percentage-padding {
position: absolute;
padding: 10%;
}
</style>
<div id='dynamic-container'>
<div id='percentage-padding'>
There should be no line break.
</div>
</div>
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<style>
#dynamic-container {
width: 500px;
transform: translateX(0);
}
#percentage-padding {
position: absolute;
padding: 10%;
}
</style>
<div id='dynamic-container'>
<div id='percentage-padding'>
There should be no line break.
</div>
</div>
<script>
document.body.offsetTop;
document.getElementById('dynamic-container').style.transform = "none";
</script>
@@ -2,7 +2,7 @@
* Copyright (C) 1999 Lars Knoll (knoll@kde.org)
* (C) 1999 Antti Koivisto (koivisto@kde.org)
* (C) 2007 David Smith (catfish.man@gmail.com)
* Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
* Copyright (C) 2003-2022 Apple Inc. All rights reserved.
* Copyright (C) Research In Motion Limited 2010. All rights reserved.
*
* This library is free software; you can redistribute it and/or
@@ -1810,8 +1810,11 @@ void RenderBlock::removePositionedObjects(const RenderBlock* newContainingBlockC
if (newContainingBlockCandidate && !renderer->isDescendantOf(newContainingBlockCandidate))
continue;
renderersToRemove.append(renderer);
if (containingBlockState == NewContainingBlock)
if (containingBlockState == NewContainingBlock) {
renderer->setChildNeedsLayout(MarkOnlyThis);
if (renderer->needsPreferredWidthsRecalculation())
renderer->setPreferredLogicalWidthsDirty(true, MarkOnlyThis);
}
// It is the parent block's job to add positioned children to positioned objects list of its containing block.
// Dirty the parent to ensure this happens. We also need to make sure the new containing block is dirty as well so
// that it gets to these new positioned objects.

0 comments on commit c1324d7

Please sign in to comment.