Use -webkit-clip-path shapes to clip HTML elements

• Component: CSS
• Status: RESOLVED FIXED

[Dirk Schulze]

Use -webkit-clip-path shapes to clip HTML elements.

[Dirk Schulze]

Created attachment 161838 [details]
Patch

[Simon Fraser (smfr)]

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?

[Dirk Schulze]

(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

[Dirk Schulze]

Created attachment 162118 [details]
Patch

[Dirk Schulze]

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

[Dirk Schulze]

Committed r127608: <http://trac.webkit.org/changeset/127608>

[Dirk Schulze]

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.

[Dirk Schulze]

Marking as closed was somehow the default setting on this bug. Opening the bug again.

[Dirk Schulze]

Wrong bug report :(