From dce2063c97647ef3404c74eb17f2b62695f2eb1b Mon Sep 17 00:00:00 2001
From: Alessandro Menezes <alessandroasm@gmail.com>
Date: Tue, 6 Oct 2020 09:42:35 -0400
Subject: [PATCH] Infinite recursion when dimensions are NaN

Adding a verification on updateDims that handles a case when dimensions are both
NaN. This caused an infinite recursion on fitBoxes when calculating the layout
for a chart that is mounted on an element that is not yet in DOM.

Fixes #7761
---
 src/core/core.layouts.js         |  3 ++-
 test/specs/core.layouts.tests.js | 42 ++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index c91bf6e701c..96737e4ff17 100644
--- a/src/core/core.layouts.js
+++ b/src/core/core.layouts.js
@@ -99,7 +99,8 @@ function updateDims(chartArea, params, layout) {
 		chartArea.h = newHeight;
 
 		// return true if chart area changed in layout's direction
-		return layout.horizontal ? newWidth !== chartArea.w : newHeight !== chartArea.h;
+		var sizes = layout.horizontal ? [newWidth, chartArea.w] : [newHeight, chartArea.h];
+		return sizes[0] !== sizes[1] && (!isNaN(sizes[0]) || !isNaN(sizes[1]));
 	}
 }
 
diff --git a/test/specs/core.layouts.tests.js b/test/specs/core.layouts.tests.js
index 21a31c8975c..1f4ac15ae68 100644
--- a/test/specs/core.layouts.tests.js
+++ b/test/specs/core.layouts.tests.js
@@ -653,5 +653,47 @@ describe('Chart.layouts', function() {
 			expect(yAxis.width).toBeCloseToPixel(33);
 			expect(yAxis.ticks).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5', '0']);
 		});
+
+		it('should correctly handle NaN dimensions', function() {
+
+			// issue #7761: Maximum call stack size exceeded
+			var chartContainer = document.createElement('div');
+			chartContainer.style.width = '600px';
+			chartContainer.style.height = '400px';
+
+			var chartCanvas = document.createElement('canvas');
+			chartContainer.appendChild(chartCanvas);
+
+			var chart = new Chart(chartCanvas, {
+				type: 'line',
+				responsive: true,
+				data: {
+					labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+					datasets: [{
+						label: '# of Votes',
+						data: [12, 19, 3, 5, 2, 3]
+					}]
+				},
+				options: {
+					scales: {
+					yAxes: [{
+						type: 'linear',
+						label: 'first axis',
+						position: 'right'
+					}, {
+						type: 'linear',
+						label: 'second axis',
+						position: 'right'
+					}]
+				  }
+				}
+			});
+
+			expect(chart.width).toBeNaN();
+			expect(chart.height).toBeNaN();
+
+		});
 	});
+
+	
 });