From: Yiwen Wang <vicey@live.com>
Date: Mon, 25 May 2020 20:54:55 +0000 (+0800)
Subject: Fix chart resizing issue (#7297) (#7298)
X-Git-Tag: v3.0.0-beta.2~129
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=94763bff351236ff5936280737b594701f0528b8;p=thirdparty%2FChart.js.git

Fix chart resizing issue (#7297) (#7298)

Fix chart resizing issue
---

diff --git a/src/platform/platform.dom.js b/src/platform/platform.dom.js
index de0935a4d..e994e6d6d 100644
--- a/src/platform/platform.dom.js
+++ b/src/platform/platform.dom.js
@@ -236,7 +236,15 @@ function createResizeObserver(chart, type, listener) {
 	// @ts-ignore until https://github.com/microsoft/TypeScript/issues/37861 implemented
 	const observer = new ResizeObserver(entries => {
 		const entry = entries[0];
-		resize(entry.contentRect.width, entry.contentRect.height);
+		const width = entry.contentRect.width;
+		const height = entry.contentRect.height;
+		// When its container's display is set to 'none' the callback will be called with a
+		// size of (0, 0), which will cause the chart to lost its original height, so skip
+		// resizing in such case.
+		if (width === 0 && height === 0) {
+			return;
+		}
+		resize(width, height);
 	});
 	observer.observe(container);
 	return observer;
diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 2af65e540..3251be75d 100644
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -365,6 +365,59 @@ describe('Chart', function() {
 			wrapper.style.width = '455px';
 		});
 
+		it('should restore the original size when parent became invisible', function(done) {
+			var chart = acquireChart({
+				options: {
+					responsive: true,
+					maintainAspectRatio: false
+				}
+			}, {
+				canvas: {
+					style: ''
+				},
+				wrapper: {
+					style: 'width: 300px; height: 350px; position: relative'
+				}
+			});
+
+			waitForResize(chart, function() {
+				expect(chart).toBeChartOfSize({
+					dw: 300, dh: 350,
+					rw: 300, rh: 350,
+				});
+
+				var original = chart.resize;
+				chart.resize = function() {
+					fail('resize should not have been called');
+				};
+
+				var wrapper = chart.canvas.parentNode;
+				wrapper.style.display = 'none';
+
+				setTimeout(function() {
+					expect(wrapper.clientWidth).toEqual(0);
+					expect(wrapper.clientHeight).toEqual(0);
+
+					expect(chart).toBeChartOfSize({
+						dw: 300, dh: 350,
+						rw: 300, rh: 350,
+					});
+
+					chart.resize = original;
+
+					waitForResize(chart, function() {
+						expect(chart).toBeChartOfSize({
+							dw: 300, dh: 350,
+							rw: 300, rh: 350,
+						});
+
+						done();
+					});
+					wrapper.style.display = 'block';
+				}, 200);
+			});
+		});
+
 		it('should resize the canvas when parent is RTL and width changes', function(done) {
 			var chart = acquireChart({
 				options: {