From 063b7dc075e87eeec6334808bcc90af165f7421e Mon Sep 17 00:00:00 2001
From: Alessandro Menezes <alessandroasm@gmail.com>
Date: Fri, 9 Oct 2020 10:45:13 -0400
Subject: [PATCH] [2.9] FitBoxes recursion when dimensions are NaN (#7853)

* 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 | 40 ++++++++++++++++++++++++++++++++
 2 files changed, 42 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..c191f203341 100644
--- a/test/specs/core.layouts.tests.js
+++ b/test/specs/core.layouts.tests.js
@@ -653,5 +653,45 @@ 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();
+
+		});
 	});
 });