Avoid over-eager clipping of child layers in multicolumn #47276

Ahmad-S792 · 2025-06-27T01:15:30Z

`53e4565`

Avoid over-eager clipping of child layers in multicolumn
https://bugs.webkit.org/show_bug.cgi?id=272280
rdar://126413036

Reviewed by NOBODY (OOPS!).

This patch aligns WebKit with Gecko / Firefox and Blink / Chromium.

Merge: https://chromium.googlesource.com/chromium/src.git/+/e500cbd3ba36bf3216087481790f5aece0e778a5

Self-painting layers (caused by e.g. position:relative) don't contribute to
visual overflow in their parent layout object; see
RenderBox::addOverflowFromChild(). We cannot use the visual overflow rectangle
set on the flow thread when calculating the bounding box of a fragment
established by a child layer.

Therefore, only clip in the flow thread's block direction in
overflowRectForFragmentedFlowPortion(), and leave the inline axis alone. I
simplified the implementation, since it's now way easier to start with an
infinite rectangle, and just limit the dimensions that need it afterwards.

Also got rid of an old check for shouldClipFragmentedFlowContent(), which
must have been residue from the CSS regions implementation.

This also happened to fix some inaccuracies mostly invisible to the naked
eye, when it comes to transform:scale()d text with glyphs that have negative
left bearing or overflow the line box vertically. It looks like we measure and
lay out with the CSS computed font, and then switch to a scaled font when
painting, so that it looks crisp and nice.

In WebKit, we didn't had equivalent to `infiniteIntRect` so introduce
'renderableInfiniteRect' and use it for our use case similar to other cases
in WebKit.

* Source/WebCore/rendering/RenderFragmentContainer.cpp:
(WebCore::RenderFragmentContainer::overflowRectForFragmentedFlowPortion const):

> Local Tests:
* LayoutTests/fast/multicol/scale-transform-text.html: Add Test Case
* LayoutTests/fast/multicol/scale-transform-text-expected.html: Add Test Case Expectation
* LayoutTests/fast/multicol/overflowing-relpos.html: Add Test Case
* LayoutTests/fast/multicol/overflowing-relpos-expected.html: Add Test Case Expectation

> WPT Progressions:
* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-break/relpos-inline-hit-testing-expected.txt:

> Rebaselines:
* LayoutTests/imported/blink/fast/multicol/unbreakable-block-too-tall-at-column-start.html: WPE & GTK Specific Pixel Failures
* LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/anchor-scroll-003-expected.txt:
* LayoutTests/fast/multicol/client-rects.html: GTK specific

53e4565

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	⏳ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2025-06-27T01:15:36Z

EWS run on previous version of this PR (hash daf5431)

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	❌ 🧪 wpe-wk2	⏳ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	❌ 🧪 ios-wk2-wpt	❌ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	❌ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	❌ 🧪 mac-AS-debug-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	❌ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2025-06-27T06:35:28Z

EWS run on previous version of this PR (hash 7ea91dd)

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	❌ 🧪 wpe-wk2	⏳ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	~~🧪 mac-wk1~~	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

https://bugs.webkit.org/show_bug.cgi?id=272280 rdar://126413036 Reviewed by NOBODY (OOPS!). This patch aligns WebKit with Gecko / Firefox and Blink / Chromium. Merge: https://chromium.googlesource.com/chromium/src.git/+/e500cbd3ba36bf3216087481790f5aece0e778a5 Self-painting layers (caused by e.g. position:relative) don't contribute to visual overflow in their parent layout object; see RenderBox::addOverflowFromChild(). We cannot use the visual overflow rectangle set on the flow thread when calculating the bounding box of a fragment established by a child layer. Therefore, only clip in the flow thread's block direction in overflowRectForFragmentedFlowPortion(), and leave the inline axis alone. I simplified the implementation, since it's now way easier to start with an infinite rectangle, and just limit the dimensions that need it afterwards. Also got rid of an old check for shouldClipFragmentedFlowContent(), which must have been residue from the CSS regions implementation. This also happened to fix some inaccuracies mostly invisible to the naked eye, when it comes to transform:scale()d text with glyphs that have negative left bearing or overflow the line box vertically. It looks like we measure and lay out with the CSS computed font, and then switch to a scaled font when painting, so that it looks crisp and nice. In WebKit, we didn't had equivalent to `infiniteIntRect` so introduce 'renderableInfiniteRect' and use it for our use case similar to other cases in WebKit. * Source/WebCore/rendering/RenderFragmentContainer.cpp: (WebCore::RenderFragmentContainer::overflowRectForFragmentedFlowPortion const): > Local Tests: * LayoutTests/fast/multicol/scale-transform-text.html: Add Test Case * LayoutTests/fast/multicol/scale-transform-text-expected.html: Add Test Case Expectation * LayoutTests/fast/multicol/overflowing-relpos.html: Add Test Case * LayoutTests/fast/multicol/overflowing-relpos-expected.html: Add Test Case Expectation > WPT Progressions: * LayoutTests/TestExpectations: * LayoutTests/imported/w3c/web-platform-tests/css/css-break/relpos-inline-hit-testing-expected.txt: > Rebaselines: * LayoutTests/imported/blink/fast/multicol/unbreakable-block-too-tall-at-column-start.html: WPE & GTK Specific Pixel Failures * LayoutTests/imported/w3c/web-platform-tests/css/css-anchor-position/anchor-scroll-003-expected.txt: * LayoutTests/fast/multicol/client-rects.html: GTK specific

webkit-early-warning-system · 2025-06-27T08:00:38Z

EWS run on current version of this PR (hash 53e4565)

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	⏳ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

alanbaradlay · 2025-06-29T15:48:26Z

Source/WebCore/rendering/RenderFragmentContainer.cpp

+    auto renderableInfiniteRect = [] {
+        // Return a infinite-like rect whose values are such that, when converted to float pixel values, they can reasonably represent device pixels.
+        return LayoutRect(LayoutUnit::nearlyMin() / 32, LayoutUnit::nearlyMin() / 32, LayoutUnit::nearlyMax() / 16, LayoutUnit::nearlyMax() / 16);
+    }();


any particular reason for not using LayoutRect's infiniteRect?

It leads to WPT failure - css/css-break/out-of-flow-in-multicolumn-018.htm.

@alanbaradlay - I noticed that Blink has infiniteIntRect, which is different from our infiniteRect. I think either we update our or introduce newer helper. I copied this one from Simon's from here - https://searchfox.org/wubkat/rev/4e9806c2e7f7c29e4a6d87ebeca603c4cc8f080c/Source/WebCore/rendering/RenderLayerCompositor.cpp#3630 to workaround here.

Let me debug this.

I am going to defer to @smfr on this, but 1, it does not scale well 2, technically we now return a non-infinite rect even when there's no clipping at all (so comparing to LayoutRect::infiniteRect() will return false)

Ahmad-S792 self-assigned this Jun 27, 2025

Ahmad-S792 added the Layout and Rendering For bugs with layout and rendering of Web pages. label Jun 27, 2025

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jun 27, 2025

Ahmad-S792 removed the merging-blocked Applied to prevent a change from being merged label Jun 27, 2025

Ahmad-S792 force-pushed the eng/Avoid-over-eager-clipping-of-child-layers-in-multicolumn branch from daf5431 to 7ea91dd Compare June 27, 2025 06:35

Ahmad-S792 requested a review from alanbaradlay June 27, 2025 06:36

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jun 27, 2025

Ahmad-S792 removed the merging-blocked Applied to prevent a change from being merged label Jun 27, 2025

Ahmad-S792 force-pushed the eng/Avoid-over-eager-clipping-of-child-layers-in-multicolumn branch from 7ea91dd to 53e4565 Compare June 27, 2025 08:00

Ahmad-S792 added the request-merge-queue Request a pull request to be added to merge-queue once ready label Jun 28, 2025

alanbaradlay reviewed Jun 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Avoid over-eager clipping of child layers in multicolumn #47276

Avoid over-eager clipping of child layers in multicolumn #47276

Uh oh!

Ahmad-S792 commented Jun 27, 2025 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

Uh oh!

alanbaradlay Jun 29, 2025

Uh oh!

Ahmad-S792 Jun 29, 2025

Uh oh!

Ahmad-S792 Jun 29, 2025 •

edited

Loading

Uh oh!

alanbaradlay Jun 29, 2025

Uh oh!

alanbaradlay Jun 29, 2025

Uh oh!

Uh oh!

Avoid over-eager clipping of child layers in multicolumn #47276

Are you sure you want to change the base?

Avoid over-eager clipping of child layers in multicolumn #47276

Uh oh!

Conversation

Ahmad-S792 commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

53e4565

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-early-warning-system commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alanbaradlay Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

Ahmad-S792 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

Ahmad-S792 Jun 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alanbaradlay Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

alanbaradlay Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Ahmad-S792 commented Jun 27, 2025 •

edited

Loading

`53e4565`

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

webkit-early-warning-system commented Jun 27, 2025 •

edited

Loading

Ahmad-S792 Jun 29, 2025 •

edited

Loading