Bug 163497 – Dynamically-added backdrop filter to clip-path'd element with 3D transform renders incorrectly (without clip)

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Tim Horton]

Steps to Reproduce:

1. Open test case.

Expected: Blur should be clipped to the red circle.
Actual: It is not; the whole bounding box of the element is backdrop blurred.

Notes:
If #blur doesn't get a layer, everything is fine.
If the backdrop-filter is applied to #blur in the style instead of dynamically added after the fact, everything is fine.
This affects adding backdrop-filters via the inspector, too, of course (and made me think I was crazy for quite some time before realizing what was up).

[Tim Horton]

Created attachment 291741 [details]
repro

[Tim Horton]

Created attachment 291742 [details]
wrong!

Created attachment 292513 [details]
Ensure that the mask is updated

[Build Bot]

Comment on attachment 292513 [details]
Ensure that the mask is updated

Attachment 292513 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/2347099

New failing tests:
css3/filters/backdrop/dynamic-with-clip-path.html

[Build Bot]

Created attachment 292517 [details]
Archive of layout-test-results from ews116 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews116  Port: mac-yosemite  Platform: Mac OS X 10.10.5

Not sure how to explain the (small) difference in results in Yosemite. Might be able to fix it by using something other than a blur for the backdrop filter.

Created attachment 292520 [details]
Ensure that the mask is updated

[Simon Fraser (smfr)]

Comment on attachment 292520 [details]
Ensure that the mask is updated

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

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path-expected.html:13
> +            -webkit-transform: translatez(0);

No need for prefix.

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:13
> +        -webkit-transform: translatez(0);

Ditto.

[Simon Fraser (smfr)]

Comment on attachment 292520 [details]
Ensure that the mask is updated

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

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path-expected.html:11
> +            position: absolute;
> +            width: 200px;

Weird indentation.

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:23
> +        document.getElementById("filter").style.webkitBackdropFilter = "invert()";

I slightly prefer putting the test style under a class selector, and here doing a document.getElementById("filter").classList.add(...)

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:25
> +    }, 100);

0 works for me.

Thanks, Simon! Made the changes and fixed in <https://trac.webkit.org/r207723>.