Bug 174157

Summary:

[GTK][WPE] border-radius with non visible border doesn't work on images that have their own RenderLayer

Product:

WebKit

Reporter:

Miguel Gomez <magomez>

Component:

WebKitGTK

Assignee:

Miguel Gomez <magomez>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bugs-noreply, buildbot, cgarcia, commit-queue, rniwa

Priority:

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=174457

Attachments:

Description	Flags
Patch	none
Archive of layout-test-results from ews103 for mac-elcapitan	none
Archive of layout-test-results from ews105 for mac-elcapitan-wk2	none
Archive of layout-test-results from ews122 for ios-simulator-wk2	none
Patch	none
Archive of layout-test-results from ews124 for ios-simulator-wk2	none

Miguel Gomez

Reported 2017-07-05 07:39:50 PDT

Take this example page: <!DOCTYPE HTML> <html> <head> </head> <body> <img style="border-radius: 12px; -webkit-transform: translateZ(0); border: 0px solid;" src="put_your_image_here"> </body> </html> This should output a single image with rounded corners, but it just shows normal corners. If the transform is removed, it will work properly no matter the border size. When the transform is applied it will work properly only if the border has a non zero value. This happens because the transform causes the image to be pushed to its own RenderLayer. In this case, if there's a visible border, the image gets rendered to the layer backingStore with cairo, as usual, using a clipping path to draw the rounded rectangle and everything goes fine. But if the border is not visible, the image is not rendered with cairo. It's set as the contentsLayer to a TextureMapperLayer, and the border clipping is expected to be performed during the composition, which is not happening currently. GraphicsLayerCA uses a new GraphicsLayer with the rounded rectangle as a mask for the image, and during the composition the clipping is performed. We can do 2 things here, force the usage of cairo even if the border is not visible (the easy fix), or implement a rounded rectangle clipping area in the TextureMapper and use it when needed (the complicated one).

Attachments
Patch (39.76 KB, patch) 2017-07-12 06:04 PDT, Miguel Gomez	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ews103 for mac-elcapitan (1.64 MB, application/zip) 2017-07-12 07:03 PDT, Build Bot	no flags	Details
Archive of layout-test-results from ews105 for mac-elcapitan-wk2 (1.73 MB, application/zip) 2017-07-12 07:08 PDT, Build Bot	no flags	Details
Archive of layout-test-results from ews122 for ios-simulator-wk2 (8.41 MB, application/zip) 2017-07-12 07:10 PDT, Build Bot	no flags	Details
Patch (2.19 KB, patch) 2017-07-12 08:43 PDT, Miguel Gomez	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ews124 for ios-simulator-wk2 (986.63 KB, application/zip) 2017-07-12 10:04 PDT, Build Bot	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Miguel Gomez

Comment 1 2017-07-12 05:55:03 PDT

I've been trying to implement the complicated fix, which means clipping the image during the composition stage, using a rounded rect as the clipping shape. I managed to implement the rounded rect clipping using the stencil, but I realized that this solution is not performing antialiasing to the clip, which means that I need to take a different path, and it will take some time. In the meanwhile, as this is a bit of a blocker for scenarios, I'll provide the easy fix, which means that the images won't be directly composited when they have a border-radius property. They will be rendered with cairo instead.

Miguel Gomez

Comment 2 2017-07-12 06:04:32 PDT

Created attachment 315231 [details] Patch

Build Bot

Comment 3 2017-07-12 07:03:43 PDT

Comment on attachment 315231 [details] Patch Attachment 315231 [details] did not pass mac-ews (mac): Output: http://webkit-queues.webkit.org/results/4106845 New failing tests: compositing/border-radius-compositing.html

Build Bot

Comment 4 2017-07-12 07:03:47 PDT

Created attachment 315237 [details] Archive of layout-test-results from ews103 for mac-elcapitan The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: ews103 Port: mac-elcapitan Platform: Mac OS X 10.11.6

Build Bot

Comment 5 2017-07-12 07:08:47 PDT

Comment on attachment 315231 [details] Patch Attachment 315231 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-queues.webkit.org/results/4106856 New failing tests: compositing/border-radius-compositing.html

Build Bot

Comment 6 2017-07-12 07:08:49 PDT

Created attachment 315238 [details] Archive of layout-test-results from ews105 for mac-elcapitan-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews105 Port: mac-elcapitan-wk2 Platform: Mac OS X 10.11.6

Build Bot

Comment 7 2017-07-12 07:10:04 PDT

Comment on attachment 315231 [details] Patch Attachment 315231 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: http://webkit-queues.webkit.org/results/4106865 New failing tests: compositing/border-radius-compositing.html

Build Bot

Comment 8 2017-07-12 07:10:05 PDT

Created attachment 315239 [details] Archive of layout-test-results from ews122 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews122 Port: ios-simulator-wk2 Platform: Mac OS X 10.12.5

Miguel Gomez

Comment 9 2017-07-12 07:11:35 PDT

I'm surprised that the test doesn't pass on mac ports. I'll skip it for them then.

Miguel Gomez

Comment 10 2017-07-12 08:03:50 PDT

(In reply to Miguel Gomez from comment #9) > I'm surprised that the test doesn't pass on mac ports. I'll skip it for them > then. On a second thought, I think I'm going to remove the test. WPE is skipping the compositing tests, so it won't run there. And for WebKitGTK+ it's probably going to fail when the opengl clipping is implemented: even if we use antialiasing, the result is not guaranteed to be same than with cairo.

Miguel Gomez

Comment 11 2017-07-12 08:43:42 PDT

Created attachment 315244 [details] Patch

Build Bot

Comment 12 2017-07-12 10:04:48 PDT

Comment on attachment 315244 [details] Patch Attachment 315244 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: http://webkit-queues.webkit.org/results/4107566 New failing tests: imported/w3c/IndexedDB-private-browsing/idbfactory_open12.html

Build Bot

Comment 13 2017-07-12 10:04:50 PDT

Created attachment 315251 [details] Archive of layout-test-results from ews124 for ios-simulator-wk2 The attached test failures were seen while running run-webkit-tests on the ios-sim-ews. Bot: ews124 Port: ios-simulator-wk2 Platform: Mac OS X 10.12.5

WebKit Commit Bot

Comment 14 2017-07-13 01:21:50 PDT

Comment on attachment 315244 [details] Patch Clearing flags on attachment: 315244 Committed r219445: <http://trac.webkit.org/changeset/219445>

WebKit Commit Bot

Comment 15 2017-07-13 01:21:52 PDT

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.