| Summary: | CanvasRenderingContext2DBase::drawImage() should use the destRect values to draw the SVG image. | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | zalan <zalan> | ||||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | WebKit Nightly Build | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=207160 | ||||||||
| Attachments: |
|
||||||||
|
Description
zalan
2020-01-28 16:33:48 PST
Created attachment 389291 [details]
test case
Open the attached test case in Safari, in Chrome and in FireFox. The three browsers have different layout and rendering of the test case.
This test case has an SVG image embedded inside an <img> element. The SVG does not have intrinsic size. But the css size of the <img> element is (100x50). The <img> element is then drawn to the canvas to (200x100) rectangle. This is how the three browsers behave:
1. Safari: the <img> element intrinsic size (100x50) is used for doing the SVG layout when it's drawing as an embedded element inside the <img> element and when it is drawn to the canvas through the drawImage() API.
2. Chrome: the <img> element intrinsic size (100x50) is used for doing the SVG layout when drawing it in as an embedded element inside the <img> element. But the destRect (200x100) of the canvas drawImage() API is used to do the SVG layout when it is drawn to the canvas through the drawImage() API.
3. FireFox: I am not sure how the intrinsic size of the SVG is set to (200x100). And it seems FireFox does not support drawing an SVG image to canvas.
I looked for a specification on how this should work but I could not find anything.
Created attachment 389292 [details]
test case
Related GitHub issue: https://github.com/w3c/svgwg/issues/784 |