From 2bff4c1640125f17f7eab7f4a851aa2e8bb257d4 Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sat, 13 Mar 2021 22:11:20 +0200
Subject: [PATCH] Resize: width > 0, height = 0. Use aspectRatio 2 (#8632)

---
 src/helpers/helpers.dom.js          | 11 +++++++++--
 test/specs/core.controller.tests.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index 05e1aa6a499..db0fe3fc805 100644
--- a/src/helpers/helpers.dom.js
+++ b/src/helpers/helpers.dom.js
@@ -137,9 +137,16 @@ export function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
   }
   width = Math.max(0, width - margins.width);
   height = Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height - margins.height);
+  width = round1(Math.min(width, maxWidth, containerSize.maxWidth));
+  height = round1(Math.min(height, maxHeight, containerSize.maxHeight));
+  if (width && !height) {
+    // https://github.com/chartjs/Chart.js/issues/4659
+    // If the canvas has width, but no height, default to aspectRatio of 2 (canvas default)
+    height = round1(width / 2);
+  }
   return {
-    width: round1(Math.min(width, maxWidth, containerSize.maxWidth)),
-    height: round1(Math.min(height, maxHeight, containerSize.maxHeight))
+    width,
+    height
   };
 }
 
diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 8d95f90ac2b..9be597bf3ca 100644
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -771,6 +771,34 @@ describe('Chart', function() {
       wrapper.style.display = 'block';
     });
 
+    it('should resize the canvas when the wrapper has display style changes from "none" to "block"', function(done) {
+      // https://github.com/chartjs/Chart.js/issues/4659
+      var chart = acquireChart({
+        options: {
+          responsive: true,
+          maintainAspectRatio: false
+        }
+      }, {
+        canvas: {
+          style: ''
+        },
+        wrapper: {
+          style: 'display: none; max-width: 600px; max-height: 400px;'
+        }
+      });
+
+      var wrapper = chart.canvas.parentNode;
+      waitForResize(chart, function() {
+        expect(chart).toBeChartOfSize({
+          dw: 600, dh: 300,
+          rw: 600, rh: 300,
+        });
+
+        done();
+      });
+      wrapper.style.display = 'block';
+    });
+
     // https://github.com/chartjs/Chart.js/issues/5485
     it('should resize the canvas when the devicePixelRatio changes', function(done) {
       var chart = acquireChart({