[Webkit-unassigned] [Bug 174157] New: [GTK][WPE] border-radius with non visible border doesn't work on images that have their own RenderLayer

Wed Jul 5 07:39:50 PDT 2017

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

            Bug ID: 174157
           Summary: [GTK][WPE] border-radius with non visible border
                    doesn't work on images that have their own RenderLayer
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit Gtk
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: magomez at igalia.com
                CC: bugs-noreply at webkitgtk.org

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).

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170705/6bdb4183/attachment.html>