Summary: | Drawing an <img> with an SVG source into a <canvas> has incorrect rendering if the SVG viewBox does not match the <img> metrics | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Antoine Quint <graouts> | ||||||
Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||
Status: | NEW --- | ||||||||
Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, sabouhallawa, webkit-bug-importer, zimmermann | ||||||
Priority: | P2 | Keywords: | InRadar | ||||||
Version: | WebKit Nightly Build | ||||||||
Hardware: | All | ||||||||
OS: | All | ||||||||
Attachments: |
|
Description
Antoine Quint
2016-07-01 02:47:44 PDT
Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=625096. Interestingly, this always works with WK1. The size of the container for the SVGImage is coming from this line in CanvasRenderingContext2D::drawImage(HTMLImageElement&, const FloatRect&, const FloatRect&, const CompositeOperator&, const BlendMode&, ExceptionCode&): FloatRect imageRect = FloatRect(FloatPoint(), size(imageElement, ImageSizeBeforeDevicePixelRatio)); In the WK1 case, when SVGImageCache::imageSizeForRenderer() is eventually called, it finds an `image` which has clearly already been laid out and has a 100x100 size, which is used to size the container. In the WK2 case, SVGImageCache::imageSizeForRenderer() does not find an image and returns the intrinsic size instead, which is 200x200. If the <img> element is not added to the DOM, the failure also occurs on WK1. The Chromium bug is a WONTFIX as the behaviour is as spec'd, see discussion in https://bugs.chromium.org/p/chromium/issues/detail?id=625096. It looks like on WK2 we're doing the right thing, while on WK1 we're not, and not the other way around as previously thought. Basically, when drawing an <img> which points to an SVG image in a <canvas>, the size of the <img> is irrelevant. If the <svg> element specifies width/height attributes, then those should be used as the source image size, otherwise the size should be computed based on the SVG image's aspect ratio based on the viewBox attribute and the size of the <canvas> image. I'll do a pass through our tests to check that we're correctly implementing this. Created attachment 283040 [details]
Testcase with setTimeout
The rendering can be different in WK2 when calling drawImage() from setTimeout().
All three browsers differ in the "test case" and "test case with setTimeout": ** Safari Technology Preview 154 *** In second 200 * 200, it shows "full green" circle. Same for other test in both squares / boxes. *** Chrome Canary 108 *** In second 200 * 200, it shows "1/4 green" circle (kind of arc). Same for other test in both squares / boxes. *** Firefox Nightly 107 *** In second 200 * 200, it shows "complete black" with no green circle. Same for other test in both squares / boxes. ______ Just wanted to share updated testing results. Thanks! |