Bug 227704

Summary: [LegacySVG] clip-path inset is incorrectly applied to the svg element.
Product: WebKit Reporter: justas543
Component: SVGAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, rbuis, sabouhallawa, simon.fraser, webkit-bug-importer, zalan, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/47754
Attachments:
Description Flags
safari incorrect clipping none

justas543
Reported 2021-07-06 07:20:11 PDT
Created attachment 432924 [details] safari incorrect clipping clip-path inset is incorrectly applied to the svg element. Go to https://jsfiddle.net/byo2kenj/5/ Observe that when clip-path is applied to div it is working correctly. Observe that when the same clip-path is applied to exact same size svg it is clipping it incorrectly. Both Firefox and Chrome are working as intended only Safari is breaking.
Attachments
safari incorrect clipping (921 bytes, image/png)
2021-07-06 07:20 PDT, justas543 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-07-13 07:21:17 PDT
<rdar://problem/80516912>
Ahmad Saleem
Comment 2 2023-11-29 18:15:51 PST
It is fixed in Layer based SVG Engine (LBSE).
Simon Fraser (smfr)
Comment 3 2024-08-04 12:03:24 PDT
This is causing a number of WPT tests to fail: imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-reference-box-004.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-borderBox-1c.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-contentBox-1c.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-fillBox-1a.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-paddingBox-1c.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-strokeBox-1a.html [ ImageOnlyFailure ] imported/w3c/web-platform-tests/css/css-masking/clip-path/clip-path-viewBox-1c.html [ ImageOnlyFailure ] The issue is that we get the wrong referenceBox in SVGRenderSupport::clipContextToCSSClippingArea; we get the size of the SVG before scaling, not the size of the renderer.
Simon Fraser (smfr)
Comment 4 2024-08-04 12:27:53 PDT
Actually when CSS applies clip-path on the SVG root element, RenderLayer::setupClipPath() does need to apply the clip-path, because it needs to clip CSS borders etc. So the early return in RenderLayer::setupClipPath() is wrong (and we'll need to avoid clipping twice).
Simon Fraser (smfr)
Comment 5 2024-08-05 10:38:01 PDT
Pull request: https://github.com/WebKit/WebKit/pull/31726
EWS
Comment 6 2024-08-06 09:04:15 PDT
Committed 281893@main (891e5f194137): <https://commits.webkit.org/281893@main> Reviewed commits have been landed. Closing PR #31726 and removing active labels.
Simon Fraser (smfr)
Comment 7 2024-08-22 16:29:59 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/47754
Note You need to log in before you can comment on or make changes to this bug.