WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
41428
clip-path does not work inside mask element
https://bugs.webkit.org/show_bug.cgi?id=41428
Summary
clip-path does not work inside mask element
rspierer
Reported
2010-06-30 14:06:12 PDT
Created
attachment 60148
[details]
test case The figure is gray circle instead of black astroid.
Attachments
test case
(635 bytes, image/svg+xml)
2010-06-30 14:06 PDT
,
rspierer
no flags
Details
Patch
(1.02 MB, patch)
2010-08-22 03:10 PDT
,
Nikolas Zimmermann
no flags
Details
Formatted Diff
Diff
Patch v2
(1.03 MB, patch)
2010-08-22 03:38 PDT
,
Nikolas Zimmermann
no flags
Details
Formatted Diff
Diff
Patch v3
(1.07 MB, patch)
2010-08-24 01:11 PDT
,
Nikolas Zimmermann
krit
: review+
Details
Formatted Diff
Diff
Show Obsolete
(3)
View All
Add attachment
proposed patch, testcase, etc.
Dirk Schulze
Comment 1
2010-07-01 05:18:28 PDT
Looks like a bug in clipPath. The example works as expected, if clipPath just has one circle. We create a ImageMask if clipPath has more than one shape for clipping. This masking operation seems to be the problem. I could just test it on Chromium/Linux. Did you test it on Safari?
rspierer
Comment 2
2010-07-01 09:26:55 PDT
I tested it on: Safari 5.0 (7533.16) on WinXP - gray filled circle Opera 10.54 (3423) on WinXP - no problems Google Chrome 5.0.375.86 on WinXP - no problems Firefox 3.6.6 on Win2003 - no problems Opera chokes on the following modified test case: <svg xmlns="
http://www.w3.org/2000/svg
" xmlns:xlink="
http://www.w3.org/1999/xlink
"> <clipPath id="clip" clipPathUnits="objectBoundingBox"> <circle cx="0" cy="0" r="0.5" /> <circle cx="0" cy="1" r="0.5" /> <circle cx="1" cy="0" r="0.5" /> <circle cx="1" cy="1" r="0.5" /> </clipPath> <defs> <linearGradient id="grad"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </linearGradient> <mask id="gmask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" fill="url(#grad)" /> </mask> <mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" fill="white" /> <rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" /> </mask> </defs> <g mask="url(#gmask)"> <circle cx="50%" cy="50%" r="50" fill="black" mask="url(#mask)" /> </g> </svg>
Dirk Schulze
Comment 3
2010-07-02 01:50:59 PDT
I checked the wokring path of svg mask and clippath. It turns out, that both, clipPath as well as Mask don't have mistakes. It works correctly. The real problem is the following: We create intermediate ImageBuffers for the mask, as well as clipPath. The size of this buffers depend on the userSpace of the references object. If the object is very small (like for objects with relative params), the ImageBuffer is very small too. The result gets scaled at the end. This can cause strange behavior like on the example of above. We have to make sure, that the used ImageBuffer are as big as the end result in device pixels.
Nikolas Zimmermann
Comment 4
2010-08-22 03:10:05 PDT
Created
attachment 65053
[details]
Patch Integrated the testcase within the patch + 7 more complex tests.
Nikolas Zimmermann
Comment 5
2010-08-22 03:38:56 PDT
Created
attachment 65056
[details]
Patch v2 Fixed Dirks comments from IRC.
Nikolas Zimmermann
Comment 6
2010-08-22 03:41:48 PDT
(In reply to
comment #2
)
> I tested it on: > Safari 5.0 (7533.16) on WinXP - gray filled circle > Opera 10.54 (3423) on WinXP - no problems > Google Chrome 5.0.375.86 on WinXP - no problems > Firefox 3.6.6 on Win2003 - no problems > > Opera chokes on the following modified test case:
> > <g mask="url(#gmask)"> > <circle cx="50%" cy="50%" r="50" fill="black" mask="url(#mask)" /> > </g> > </svg>
I noticed the same, Opera has problems when using <g mask="..> <rect mask="...
Nikolas Zimmermann
Comment 7
2010-08-22 04:26:17 PDT
Comment on
attachment 65056
[details]
Patch v2 Clearing review flag, the tests have issues when panning. The clamping of the absolute target rects interfere with the "currentContentTransformation"... need to think about this a little more, and create additional tests covering panning&zooming on deep nested masks/clippers.
Nikolas Zimmermann
Comment 8
2010-08-24 01:11:20 PDT
Created
attachment 65227
[details]
Patch v3 Resolved all issues with zoom & pan. No regressions, but beautiful progressions :-)
Dirk Schulze
Comment 9
2010-08-24 01:39:46 PDT
Comment on
attachment 65227
[details]
Patch v3 WebCore/ChangeLog:24 + (WebCore::RenderSVGResourceClipper::applyClippingToContext): Moved some code from createClipData, to avoid having to pass 5 arguments to createClipDAta. createClipData Great patch. r=me.
Nikolas Zimmermann
Comment 10
2010-08-24 04:22:12 PDT
Landed in
r65880
.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug