[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

diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
index c91bf6e701ca98a02a0cde2eac64ed8b56410f23..96737e4ff174d4397aa1c64f49e720d9b2f527bb 100644 (file)
--- 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 21a31c8975cbfd8e62276aad00c11d5e9f32c7e3..c191f2033414d5305858aa6a7c81ee6846a7319a 100644 (file)
--- 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();
+
+               });
        });
 });