From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sat, 13 Mar 2021 20:11:20 +0000 (+0200)
Subject: Resize: width > 0, height = 0. Use aspectRatio 2 (#8632)
X-Git-Tag: v3.0.0-beta.14~17
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2bff4c1640125f17f7eab7f4a851aa2e8bb257d4;p=thirdparty%2FChart.js.git

Resize: width > 0, height = 0. Use aspectRatio 2 (#8632)
---

diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index 05e1aa6a4..db0fe3fc8 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 8d95f90ac..9be597bf3 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({