Bug 215445

Summary: [GTK][WPE] CSS backdrop overlay corners are not rounded on results.webkit.org
Product: WebKit Reporter: Philippe Normand <pnormand>
Component: WebKitGTKAssignee: Miguel Gomez <magomez>
Status: RESOLVED FIXED    
Severity: Normal CC: bugs-noreply, cgarcia, cmarcelo, ews-watchlist, gyuyoung.kim, Hironori.Fujii, kondapallykalyan, luiz, magomez, ryuan.choi, sergio, zeno
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 174457    
Bug Blocks: 218962    
Attachments:
Description Flags
screenshot
none
WIP
none
Patch none

Description Philippe Normand 2020-08-13 04:23:35 PDT
See screenshot
Comment 1 Philippe Normand 2020-08-13 04:25:11 PDT
Created attachment 406507 [details]
screenshot
Comment 2 Carlos Garcia Campos 2020-10-22 03:51:06 PDT
Created attachment 412082 [details]
WIP

This patch that applies on top of bug #174457 fixes results.webkit.org and two layout tests:

css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html
css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html

But other tests are still failing:

css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-reflection-add-backdrop.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-reflection-value-change.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-reflection.html [ ImageOnlyFailure ]

In some cases it seems the expected file is the one giving the wrong results, though and in others there are just a few pixels difference.
Comment 3 Miguel Gomez 2020-11-11 08:50:39 PST
As you say, the patch makes this tests pass:
 
css3/filters/backdrop/backdrop-filter-uneven-corner-radii.html
css3/filters/backdrop/backdrop-filter-with-border-radius-value-change.html

and it breaks

css3/filters/backdrop/add-remove-add-backdrop-filter.html

I already found the problem with that one and modified the patch to make it work.

Then I see these still failing. They seem to have the same reason: in some cases the rounded clip works, but instead of having the rectangle corners (the ones out of the ellipse) transparent, they are white. And this happens only sometimes, not always. I'm still trying to find the issue.

css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html [ ImageOnlyFailure ]
css3/filters/backdrop/backdrop-filter-with-border-radius.html

And there's also this one failing. I haven't looked into it, but seems a different issue:

css3/filters/backdrop/effect-hw.html [ ImageOnlyFailure ]
Comment 4 Fujii Hironori 2020-11-11 12:00:26 PST
*** Bug 218785 has been marked as a duplicate of this bug. ***
Comment 5 Miguel Gomez 2020-11-12 08:09:46 PST
I found the problem that was causing most of the rendering issues. I'll send the (very simple) patch on a different bug, as it's a different issue. Once that's fixed, I'll send a patch to this bug that fixes all the tests except these 2:

css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.html
css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html

The thing with these is that the result is visually correct, but there are some pixels on the rounded part of the rectangles that don't match because of the different antialiasing results between the opengl clip and cairo. Sadly, being them reftests, I don't see a way to make them pass.
Comment 6 Carlos Garcia Campos 2020-11-12 08:45:46 PST
(In reply to Miguel Gomez from comment #5)
> I found the problem that was causing most of the rendering issues. I'll send
> the (very simple) patch on a different bug, as it's a different issue. Once
> that's fixed, I'll send a patch to this bug that fixes all the tests except
> these 2:
> 
> css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection-add.
> html
> css3/filters/backdrop/backdrop-filter-with-border-radius-and-reflection.html
> 
> The thing with these is that the result is visually correct, but there are
> some pixels on the rounded part of the rectangles that don't match because
> of the different antialiasing results between the opengl clip and cairo.
> Sadly, being them reftests, I don't see a way to make them pass.

Great, it's ok to mark them as failures then.
Comment 7 Miguel Gomez 2020-11-13 02:38:10 PST
Created attachment 414022 [details]
Patch
Comment 8 Miguel Gomez 2020-11-13 02:47:55 PST
(In reply to Miguel Gomez from comment #7)
> Created attachment 414022 [details]
> Patch

The patch is similar to the one sent by Carlos except for the change in CoordinatedGraphicsLayer::flushCompositingStateForThisLayerOnly().

There's this test
LayoutTests/css3/filters/backdrop/add-remove-add-backdrop-filter.html
that fails with Carlos' patch. It's a tricky situation where the backdropFiltersRect is never sent to the scene because the filter is added and removed, and there's no backdrop layer when the backdropFiltersRect is flushed to the state.

My patch always updates the backdropFiltersRect, which is a solution. In any case the value won't be used if there's no backdrop layer. Other possible solution would be resetting the backdropFiltersRect when the filters are removed from the CoordinatedGraphicsLayer, but the effect is the same.
Comment 9 EWS 2020-11-13 05:12:39 PST
Committed r269772: <https://trac.webkit.org/changeset/269772>

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