Bug 216978 – REGRESSION (r260276): Transform `scale()` removes round corners declared with `border-radius` on a hover state in Safari

• Component: Compositing
• Status: RESOLVED FIXED

Overview:
Please take a look at the demo: https://jsfiddle.net/0fpho21q/2/

Steps to Reproduce:
1. Open the link above.
2. Hover over the first button.
3. Hover over the second button.

Actual Results: 
Round corners are removed from the first button.

Expected Results:
Round corners should be kept on a hover state, i.e. observe behavior of the second button.

Build Date & Hardware: Date and hardware of the build in which you first encountered the bug.
Safari Version 14.0 (15610.1.28.1.9, 15610), macOS Catalina Version 10.15.6

Additional Builds and Platforms:
Works as intended in Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/69660229>

[Simon Fraser (smfr)]

Created attachment 410052 [details]
Testcase

[Simon Fraser (smfr)]

This is about clip rects and compositing.

[Simon Fraser (smfr)]

This is because PaintLayerFlag::PaintingOverflowContents is set so we incorrectly ignore ore the clip.

[Simon Fraser (smfr)]

... and the transform makes a layer a clipRectsContext.rootLayer

[Brendan Donovan]

*** Bug 223507 has been marked as a duplicate of this bug. ***

[Cameron McCormack (:heycam)]

Created attachment 426891 [details]
Testcase without :hover

Just the bad sub-test.

[Cameron McCormack (:heycam)]

Created attachment 428248 [details]
Patch

[Cameron McCormack (:heycam)]

Created attachment 428348 [details]
Patch

[Darin Adler]

Comment on attachment 428348 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=428348&action=review

It’s possible that one of the more layout-savvy people wants to look this over too, but this looks obviously right to me.

> Source/WebCore/rendering/RenderLayer.cpp:4495
> +        // FIXME: Do we need to set the posClipRect to be affected by border-radius too?

Seems like our job is to come up with a test case for this so we don’t have to leave a question behind in the code.

> LayoutTests/fast/layers/overflow-scroll-transform-border-radius.html:5
> +    <div id="e" style="width: 50px; height: 50px; background-color: blue;"></div>

Not sure we need the id property here.

[Cameron McCormack (:heycam)]

(In reply to Darin Adler from comment #10)
> > Source/WebCore/rendering/RenderLayer.cpp:4495
> > +        // FIXME: Do we need to set the posClipRect to be affected by border-radius too?
> 
> Seems like our job is to come up with a test case for this so we don’t have
> to leave a question behind in the code.

I tried and failed to make a test case that needed this the other day.  Now trying the "assert if we look at this state and run the whole test suite" technique.  Will remove the comment if nothing comes up.

[Cameron McCormack (:heycam)]

Created attachment 428569 [details]
Patch

[EWS]

Committed r277462 (237705@main): <https://commits.webkit.org/237705@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 428569 [details].