Use -webkit-clip-path shapes to clip HTML elements.
Created attachment 161838 [details] Patch
Comment on attachment 161838 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=161838&action=review > Source/WebCore/ChangeLog:10 > + -webkit-clip-path creates a new layer for HTML elements now. The border, > + background and content gets clipped by the clip path after any filter was > + applied. Does the spec say that clipPath is applied after filters? Is this the same as SVG? What happens to an HTML element with a filter and overflow:hidden?
(In reply to comment #2) > (From update of attachment 161838 [details]) > View in context: https://bugs.webkit.org/attachment.cgi?id=161838&action=review > > > Source/WebCore/ChangeLog:10 > > + -webkit-clip-path creates a new layer for HTML elements now. The border, > > + background and content gets clipped by the clip path after any filter was > > + applied. > > Does the spec say that clipPath is applied after filters? Is this the same as SVG? Yes, Filter Effects and CSS Masking use the painting model of SVG, which says first filter, then masking, clipping, opacity.[1][2] Exactly as it is with the patch right now. > What happens to an HTML element with a filter and overflow:hidden? Just tried it. Filters do apply to overflow:hidden content. But clipping doesn't stand alone: p {width: 200px; height: 200px; overflow:hidden; -webkit-clip-path: circle(100px, 100px, 100px); } Doesn't clip. p {width: 200px; height: 200px; overflow:hidden; -webkit-clip-path: circle(100px, 100px, 100px); -webkit-transform: translate3d(0,0,0);} Clip applies. The same for translate3d(0,0,0) - the clipping applies after using the transform. So do I need to require a new compositing layer for clip-path as well? What is happening on the overflow:hidden case? [1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-mask-rendering-model [2] https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterProperty
Created attachment 162118 [details] Patch
The last patch fixes the issue with overflow: hidden. The clip-path gets applied correctly now. I also added a test for it. On overflow: scroll, the scroll bars get clipped, just like for 'clip'. On scrolling itself, the shape stays at it's position, the same like for 'clip' :).
Committed r127608: <http://trac.webkit.org/changeset/127608>
The improvement is about 5% on the same build (w/ and w/o patch). More improvement is possible. Looking into that on a next patch further.
Marking as closed was somehow the default setting on this bug. Opening the bug again.
Wrong bug report :(