fix: Ensure resizeImage's canvas has at least 1px of width and height (…

…#2409)

* ensure resizeImage canvas has > 0 width, height

* add tests for sliver background images

src/render/canvas/canvas-renderer.ts

@@ -541,8 +541,8 @@ export class CanvasRenderer {
         }
 
         const canvas = (this.canvas.ownerDocument as Document).createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
+        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);
         return canvas;

tests/reftests/background/size.html

@@ -9,6 +9,10 @@
             display: block;
             background:url("../../assets/image.jpg") center center;
         }
+        .sliver div {
+            background:url("../../assets/bg-sliver.png") center center;
+            background-size: 650px auto;
+        }
 
         .vertical {
             float: right;
@@ -57,5 +61,8 @@
     <div style='background-size: auto;'></div>
 </div>
 <div class="container" style="padding: 10px; background-size: contain; background-origin: content-box; background-clip: content-box"></div>
+<div class="sliver">
+    <div></div>
+</div>
 </body>
 </html>