<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal">Hi,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I’m on a slightly older pull from WebKit trunk (179714) and I’m seeing this issue where border radius is lost if a css filter is also applied. My sample page looks like this:<o:p></o:p></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><!DOCTYPE html><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><html><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><title>Basic CSS Filters</title><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><head>Basic CSS Filters</head><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><style><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt">#pic {<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"> border-radius: 10px;<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"> -webkit-filter: sepia(0.8);<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt">}<o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"></style><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><body><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"><div><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"> <img id="pic" src="testImage.jpg"><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"></div><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"></body><o:p></o:p></span></p>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:9.0pt"></html><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:9.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal">When I run with the above code the image is rendered with the Sepi filter, but the border radius is not applied. If I comment out the filter the image is properly rendered with the border radius applied. By debugging I can see that a
different code path is followed in the two cases. <o:p></o:p></p>
<p class="MsoNormal"><b>Without the filter</b>:<o:p></o:p></p>
<p class="MsoNormal">> WebKitd.dll!WebCore::GraphicsContext::clip(const WebCore::Path & path, WebCore::WindRule windRule) Line 951 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::GraphicsContext::clipRoundedRect(const WebCore::FloatRoundedRect & rect) Line 586 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderBoxModelObject::clipRoundedInnerRect(WebCore::GraphicsContext * context, const WebCore::FloatRect & rect, const WebCore::FloatRoundedRect & clipRect) Line 540 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderReplaced::paint(WebCore::PaintInfo & paintInfo, const WebCore::LayoutPoint & paintOffset) Line 180 C++<o:p></o:p></p>
<p class="MsoNormal">…<o:p></o:p></p>
<p class="MsoNormal">we get into <span style="font-size:9.5pt;font-family:Consolas;color:black;background:white;mso-highlight:white">
clipRoundedInnerRect</span><span style="font-size:9.5pt;font-family:Consolas;color:black">
</span>which goes into the code which can perform the clipping operation, and all works as expected.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><b>With the Filter (3 callstacks below):<o:p></o:p></b></p>
<p class="MsoNormal">> WebKitd.dll!WebCore::GraphicsLayer::setContentsClippingRect(const WebCore::FloatRoundedRect & roundedRect) Line 377 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::updateImageContents() Line 1960 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::updateConfiguration() Line 595 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerCompositor::rebuildCompositingLayerTree(WebCore::RenderLayer & layer, WTF::Vector<WebCore::GraphicsLayer *,0,WTF::CrashOnOverflow> & childLayersOfEnclosingLayer, int depth) Line 1522
C++<o:p></o:p></p>
<p class="MsoNormal">…<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">> WebKitd.dll!WebCore::GraphicsLayer::setContentsClippingRect(const WebCore::FloatRoundedRect & roundedRect) Line 377 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::resetContentsRect() Line 1124 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::updateAfterDescendants() Line 1003 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerCompositor::rebuildCompositingLayerTree(WebCore::RenderLayer & layer, WTF::Vector<WebCore::GraphicsLayer *,0,WTF::CrashOnOverflow> & childLayersOfEnclosingLayer, int depth) Line 1609
C++<o:p></o:p></p>
<p class="MsoNormal">…<o:p></o:p></p>
<p class="MsoNormal">> WebKitd.dll!WebCore::GraphicsLayer::setContentsClippingRect(const WebCore::FloatRoundedRect & roundedRect) Line 377 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::resetContentsRect() Line 1124 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerBacking::updateAfterDescendants() Line 1003 C++<o:p></o:p></p>
<p class="MsoNormal"> WebKitd.dll!WebCore::RenderLayerCompositor::updateCompositingDescendantGeometry(WebCore::RenderLayer & compositingAncestor, WebCore::RenderLayer & layer, bool compositedChildrenOnly) Line 1862 C++<o:p></o:p></p>
<p class="MsoNormal">…<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">In this path we never call <span style="font-size:9.5pt;font-family:Consolas;color:black;background:white;mso-highlight:white">
clipRoundedInnerRect</span><span style="font-size:9.5pt;font-family:Consolas;color:black">,
</span>we do however call setContentsClippingRect with what looks like appropriate parameters to do what we would want. However upon investigation it appears that this data is not used by anything. Looking at other ports it seems that GraphicsLayerCA.cpp
may be making use of this data in its clipping technique.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Looking for fixes that might already be available I found the two below interesting, however note that I already have these in the change that we last took. They just sounds extremely similar to what I’m describing.<o:p></o:p></p>
<p class="MsoNormal"><a href="http://trac.webkit.org/changeset/179147">http://trac.webkit.org/changeset/179147</a><o:p></o:p></p>
<p class="MsoNormal"><a href="http://trac.webkit.org/changeset/175794">http://trac.webkit.org/changeset/175794</a><o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I’m wondering if it can be confirmed that this issue has been a problem for other ports as well? Are there any fixes that address my problem that I may have overlooked? What if anything needs to be done to support this (is something like
what is done in the CA port a requirement?) Any advice on implementing the minimal changes, CA’s changes appear extensive.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thanks for any advice<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Chris Vienneau<o:p></o:p></p>
</div>
</body>
</html>