Bug 206914 - CanvasRenderingContext2DBase::drawImage() should use the destRect values to draw the SVG image.
Summary: CanvasRenderingContext2DBase::drawImage() should use the destRect values to d...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-01-28 16:33 PST by zalan
Modified: 2020-04-01 15:24 PDT (History)
4 users (show)

See Also:

Attachments
test case (970 bytes, text/html)
2020-01-30 14:42 PST, Said Abou-Hallawa 		no flags Details
test case (961 bytes, text/html)
2020-01-30 14:44 PST, Said Abou-Hallawa 		no flags Details
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description zalan 2020-01-28 16:33:48 PST 
see fast/hidpi/image-srcset-relative-svg-canvas-2x.html and rdar://problem/58580461
Comment 1 Radar WebKit Bug Importer 2020-01-30 11:24:53 PST 
<rdar://problem/59035239>
Comment 2 Said Abou-Hallawa 2020-01-30 14:42:29 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.
Comment 3 Said Abou-Hallawa 2020-01-30 14:44:57 PST 
Created attachment 389292 [details]
test case
Comment 4 Said Abou-Hallawa 2020-04-01 15:24:30 PDT 
Related GitHub issue: https://github.com/w3c/svgwg/issues/784