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
WebKit · Nov 4, 2022 · c1324d73bd3c9620496236c7b3abbda0c0cbd607 · c1324d7
1 parent 5551d9e
commit c1324d73bd3c9620496236c7b3abbda0c0cbd607
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 2 deletions.
diff --git a/LayoutTests/fast/block/absolute-position-change-width-with-inline-container-expected.html b/LayoutTests/fast/block/absolute-position-change-width-with-inline-container-expected.html
@@ -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>
diff --git a/LayoutTests/fast/block/absolute-position-change-width-with-inline-container.html b/LayoutTests/fast/block/absolute-position-change-width-with-inline-container.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>
diff --git a/LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc-expected.html b/LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc-expected.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>
diff --git a/LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc.html b/LayoutTests/fast/block/containing-block-change-percentage-padding-width-recalc.html
@@ -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>
diff --git a/Source/WebCore/rendering/RenderBlock.cpp b/Source/WebCore/rendering/RenderBlock.cpp
@@ -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.