Bug 95646 - Use -webkit-clip-path shapes to clip HTML elements
Summary: Use -webkit-clip-path shapes to clip HTML elements
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Dirk Schulze
URL: http://dvcs.w3.org/hg/FXTF/raw-file/t...
Keywords:
Depends on:
Blocks: 95389
  Show dependency treegraph
 
Reported: 2012-09-01 09:38 PDT by Dirk Schulze
Modified: 2012-09-15 20:39 PDT (History)
8 users (show)

See Also:


Attachments
Patch (125.04 KB, patch)
2012-09-01 22:29 PDT, Dirk Schulze
no flags Details | Formatted Diff | Diff
Patch (137.56 KB, patch)
2012-09-04 16:12 PDT, Dirk Schulze
dino: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Dirk Schulze 2012-09-01 09:38:28 PDT
Use -webkit-clip-path shapes to clip HTML elements.
Comment 1 Dirk Schulze 2012-09-01 22:29:51 PDT
Created attachment 161838 [details]
Patch
Comment 2 Simon Fraser (smfr) 2012-09-04 11:09:21 PDT
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?
Comment 3 Dirk Schulze 2012-09-04 11:39:03 PDT
(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
Comment 4 Dirk Schulze 2012-09-04 16:12:21 PDT
Created attachment 162118 [details]
Patch
Comment 5 Dirk Schulze 2012-09-04 20:55:09 PDT
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' :).
Comment 6 Dirk Schulze 2012-09-05 10:48:00 PDT
Committed r127608: <http://trac.webkit.org/changeset/127608>
Comment 7 Dirk Schulze 2012-09-15 20:24:28 PDT
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.
Comment 8 Dirk Schulze 2012-09-15 20:25:13 PDT
Marking as closed was somehow the default setting on this bug. Opening the bug again.
Comment 9 Dirk Schulze 2012-09-15 20:39:10 PDT
Wrong bug report :(