Bug 215445 - [GTK][WPE] CSS backdrop overlay corners are not rounded on results.webkit.org
Summary: [GTK][WPE] CSS backdrop overlay corners are not rounded on results.webkit.org
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKitGTK (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Miguel Gomez
URL:
Keywords:
: 218785 (view as bug list)
Depends on: 174457
Blocks: 218962
  Show dependency treegraph
 
Reported: 2020-08-13 04:23 PDT by Philippe Normand
Modified: 2020-11-15 12:49 PST (History)
12 users (show)

See Also:


Attachments
screenshot (182.09 KB, image/png)
2020-08-13 04:25 PDT, Philippe Normand
no flags Details
WIP (5.13 KB, patch)
2020-10-22 03:51 PDT, Carlos Garcia Campos
no flags Details | Formatted Diff | Diff
Patch (9.65 KB, patch)
2020-11-13 02:38 PST, Miguel Gomez
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].