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 1/2] 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();
+
+		});
 	});
+
+	
 });

From ef43b7f871474b466f70bbca0d21b9e78f6fc54d Mon Sep 17 00:00:00 2001
From: Alessandro Menezes <alessandroasm@gmail.com>
Date: Tue, 6 Oct 2020 10:23:24 -0400
Subject: [PATCH 2/2] Fixing lint errors

---
 test/specs/core.layouts.tests.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/test/specs/core.layouts.tests.js b/test/specs/core.layouts.tests.js
index 1f4ac15ae68..c191f203341 100644
--- a/test/specs/core.layouts.tests.js
+++ b/test/specs/core.layouts.tests.js
@@ -668,7 +668,7 @@ describe('Chart.layouts', function() {
 				type: 'line',
 				responsive: true,
 				data: {
-					labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+					labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
 					datasets: [{
 						label: '# of Votes',
 						data: [12, 19, 3, 5, 2, 3]
@@ -676,16 +676,16 @@ describe('Chart.layouts', function() {
 				},
 				options: {
 					scales: {
-					yAxes: [{
-						type: 'linear',
-						label: 'first axis',
-						position: 'right'
-					}, {
-						type: 'linear',
-						label: 'second axis',
-						position: 'right'
-					}]
-				  }
+						yAxes: [{
+							type: 'linear',
+							label: 'first axis',
+							position: 'right'
+						}, {
+							type: 'linear',
+							label: 'second axis',
+							position: 'right'
+						}]
+					}
 				}
 			});
 
@@ -694,6 +694,4 @@ describe('Chart.layouts', function() {
 
 		});
 	});
-
-	
 });