From bb9237155cf0ec090432ee6c5d9c555eb6ffa81f Mon Sep 17 00:00:00 2001
From: Chang Wang <cheapsteak@gmail.com>
Date: Sun, 4 Jul 2021 01:40:25 -0400
Subject: [PATCH] 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 |   4 ++--
 tests/assets/bg-sliver.png           | Bin 0 -> 190 bytes
 tests/reftests/background/size.html  |   7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 tests/assets/bg-sliver.png

diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index ae72b45..05408e0 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/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;
diff --git a/tests/assets/bg-sliver.png b/tests/assets/bg-sliver.png
new file mode 100644
index 0000000000000000000000000000000000000000..06ed91f36ceea9f94fdb4665c4974fea65a6b5e6
GIT binary patch
literal 190
zcmeAS@N?(olHy`uVBq!ia0y~yU=;zf89CU1<ocsZ=|HO0)5S3)!u{=pjl2gGcvy0^
z$`bysozcRi<i6>PQis{uiy!Lt^VrEJ>+GJhbzkn+vbkU1owvLne(1W-s~4-U{qby{
zUbpsYRQ7h$7mf@}0u2l-3PAH6keCm`nf8_!muoNG^S{G->#u6HS7(;@MQ=TKQuTY!
hFLl|tb9)-A7|h!}-uIm{hygl?!PC{xWt~$(69BPTNlO3#

literal 0
HcmV?d00001

diff --git a/tests/reftests/background/size.html b/tests/reftests/background/size.html
index 6cdf0fc..d551136 100644
--- a/tests/reftests/background/size.html
+++ b/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>