206914 2020-01-28 16:33:48 -0800 CanvasRenderingContext2DBase::drawImage() should use the destRect values to draw the SVG image. 2020-04-01 15:24:30 -0700 1 1 1 Unclassified WebKit SVG WebKit Nightly Build Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=207160 InRadar P2 Normal --- 1 zalan webkit-unassigned sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1612251 0 zalan 2020-01-28 16:33:48 -0800 see fast/hidpi/image-srcset-relative-svg-canvas-2x.html and rdar://problem/58580461 1613053 1 webkit-bug-importer 2020-01-30 11:24:53 -0800 <rdar://problem/59035239> 1613153 2 389291 sabouhallawa 2020-01-30 14:42:29 -0800 Created attachment 389291 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. 1613155 3 389292 sabouhallawa 2020-01-30 14:44:57 -0800 Created attachment 389292 test case 1636681 4 sabouhallawa 2020-04-01 15:24:30 -0700 Related GitHub issue: https://github.com/w3c/svgwg/issues/784 389291 2020-01-30 14:42:29 -0800 2020-01-30 14:44:57 -0800 test case canvas-drawImage-svg-intrinsic-size.html text/html 970 sabouhallawa PHN0eWxlPgogICAgaW1nIHsKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgICAg ICB3aWR0aDogMTAwcHg7CiAgICAgICAgaGVpZ2h0OiA1MHB4OwogICAgfQogICAgY2FudmFzIHsK ICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgICAgICB3aWR0aDogMjAwcHg7CiAg ICAgICAgaGVpZ2h0OiAxMDBweDsKICAgIH0KPC9zdHlsZT4KPGJvZHk+CiAgICA8aW1nIHNyYz0i ZGF0YTppbWFnZS9zdmcreG1sLAogICAgICAgIDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3Jn LzIwMDAvc3ZnJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz4KICAgICAgICAgICAgPHJlY3Qg ZmlsbD0ncGluaycgd2lkdGg9JzUwJScgaGVpZ2h0PScxMDAlJy8+CiAgICAgICAgICAgIDxjaXJj bGUgZmlsbD0ncHVycGxlJyBjeD0nNTAnIGN5PScyNScgcj0nMTUnLz4KICAgICAgICA8L3N2Zz4i CiAgICA+CiAgICA8YnI+CiAgICA8Y2FudmFzPjwvY2FudmFzPgo8IS0tICAgICA8c2NyaXB0Pgog ICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgZnVuY3Rpb24oKXsKICAgICAg ICAgICAgZG9jdW1lbnQuYm9keS5vZmZzZXRIZWlnaHQ7CiAgICAgICAgICAgIHZhciBpbWFnZSA9 IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImltZyIpOwogICAgICAgICAgICB2YXIgY2FudmFzID0g ZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiY2FudmFzIik7CiAgICAgICAgICAgIGNhbnZhcy53aWR0 aCA9IGNhbnZhcy5vZmZzZXRXaWR0aDsKICAgICAgICAgICAgY2FudmFzLmhlaWdodCA9IGNhbnZh cy5vZmZzZXRIZWlnaHQ7CiAgICAgICAgICAgIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0 KCcyZCcpOwogICAgICAgICAgICBjdHguZHJhd0ltYWdlKGltYWdlLCAwLCAwLCBjYW52YXMud2lk dGgsIGNhbnZhcy5oZWlnaHQpOwogICAgICAgIH0pOwogICAgPC9zY3JpcHQ+CiAtLT48L2JvZHk+ Cg== 389292 2020-01-30 14:44:57 -0800 2020-01-30 14:44:57 -0800 test case canvas-drawImage-svg-intrinsic-size.html text/html 961 sabouhallawa PHN0eWxlPgogICAgaW1nIHsKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgICAg ICB3aWR0aDogMTAwcHg7CiAgICAgICAgaGVpZ2h0OiA1MHB4OwogICAgfQogICAgY2FudmFzIHsK ICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgICAgICB3aWR0aDogMjAwcHg7CiAg ICAgICAgaGVpZ2h0OiAxMDBweDsKICAgIH0KPC9zdHlsZT4KPGJvZHk+CiAgICA8aW1nIHNyYz0i ZGF0YTppbWFnZS9zdmcreG1sLAogICAgICAgIDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3Jn LzIwMDAvc3ZnJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz4KICAgICAgICAgICAgPHJlY3Qg ZmlsbD0ncGluaycgd2lkdGg9JzUwJScgaGVpZ2h0PScxMDAlJy8+CiAgICAgICAgICAgIDxjaXJj bGUgZmlsbD0ncHVycGxlJyBjeD0nNTAnIGN5PScyNScgcj0nMTUnLz4KICAgICAgICA8L3N2Zz4i CiAgICA+CiAgICA8YnI+CiAgICA8Y2FudmFzPjwvY2FudmFzPgogICAgPHNjcmlwdD4KICAgICAg ICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignbG9hZCcsIGZ1bmN0aW9uKCl7CiAgICAgICAgICAg IGRvY3VtZW50LmJvZHkub2Zmc2V0SGVpZ2h0OwogICAgICAgICAgICB2YXIgaW1hZ2UgPSBkb2N1 bWVudC5xdWVyeVNlbGVjdG9yKCJpbWciKTsKICAgICAgICAgICAgdmFyIGNhbnZhcyA9IGRvY3Vt ZW50LnF1ZXJ5U2VsZWN0b3IoImNhbnZhcyIpOwogICAgICAgICAgICBjYW52YXMud2lkdGggPSBj YW52YXMub2Zmc2V0V2lkdGg7CiAgICAgICAgICAgIGNhbnZhcy5oZWlnaHQgPSBjYW52YXMub2Zm c2V0SGVpZ2h0OwogICAgICAgICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQn KTsKICAgICAgICAgICAgY3R4LmRyYXdJbWFnZShpbWFnZSwgMCwgMCwgY2FudmFzLndpZHRoLCBj YW52YXMuaGVpZ2h0KTsKICAgICAgICB9KTsKICAgIDwvc2NyaXB0Pgo8L2JvZHk+Cg==