fix: Some svg image sizes are drawn incorrectly

niklasvh · Oct 19, 2022 · e499811 · e499811
1 parent 6020386
commit e499811
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
@@ -276,17 +276,7 @@ export class CanvasRenderer extends Renderer {
             this.path(path);
             this.ctx.save();
             this.ctx.clip();
-            this.ctx.drawImage(
-                image,
-                0,
-                0,
-                container.intrinsicWidth,
-                container.intrinsicHeight,
-                box.left,
-                box.top,
-                box.width,
-                box.height
-            );
+            this.ctx.drawImage(image, box.left, box.top, box.width, box.height);
             this.ctx.restore();
         }
     }
@@ -568,8 +558,13 @@ export class CanvasRenderer extends Renderer {
         this.ctx.translate(-offsetX, -offsetY);
     }
 
-    resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement {
-        if (image.width === width && image.height === height) {
+    resizeImage(
+        container: ElementContainer,
+        image: HTMLImageElement,
+        width: number,
+        height: number
+    ): HTMLCanvasElement | HTMLImageElement {
+        if (container instanceof ImageElementContainer && image.width === width && image.height === height) {
             return image;
         }
 
@@ -578,7 +573,7 @@ export class CanvasRenderer extends Renderer {
         canvas.width = Math.max(1, width);
         canvas.height = Math.max(1, height);
         const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
+        ctx.drawImage(image, 0, 0, width, height);
         return canvas;
     }
 
@@ -601,7 +596,7 @@ export class CanvasRenderer extends Renderer {
                         image.width / image.height
                     ]);
                     const pattern = this.ctx.createPattern(
-                        this.resizeImage(image, width, height),
+                        this.resizeImage(container, image, width, height),
                         'repeat'
                     ) as CanvasPattern;
                     this.renderRepeat(path, pattern, x, y);

diff --git a/tests/reftests/images/svg/background.html b/tests/reftests/images/svg/background.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Base64 svg</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
+
+        #svg1:before {
+            content: '';
+            width: 125px;
+            height: 150px;
+            display: inline-block;
+            background-size: 125px 150px;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
+        }
+        #svg2:before {
+            content: '';
+            width: 64px;
+            height: 64px;
+            display: inline-block;
+            background-size: 64px 64px;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        Inline svg1 image(same size as fixed size): <br />
+        <div id="svg1"></div>
+
+        Inline svg2 image(custom size): <br />
+        <div id="svg2"></div>
+    </div>
+</body>
+
+</html>
diff --git a/tests/reftests/images/svg/base64.html b/tests/reftests/images/svg/base64.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Base64 svg</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -10,9 +11,15 @@
         }
     </style>
 </head>
+
 <body>
-<div>
-    Inline svg image: <br />
-    <img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
+    <div>
+        Inline svg image: <br />
+        <img width="200" height="200"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" />
+        <img width="200" height="200"
+            src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==" />
+    </div>
 </body>
-</html>
+
+</html>