Correctly handle decimal display size (#4009)

Fix the `readUsedSize` regular expression to correctly parse (truncate) pixel decimal values.

diff --git a/src/platforms/platform.dom.js b/src/platforms/platform.dom.js
index 761337b061c0d8e2eda28ddd6b9d160a541336b2..317d4bfed73ad8432b285ab5e704ec9243454e4a 100644 (file)
--- a/src/platforms/platform.dom.js
+++ b/src/platforms/platform.dom.js
@@ -33,7 +33,7 @@ module.exports = function(Chart) {
         */
        function readUsedSize(element, property) {
                var value = helpers.getStyle(element, property);
-               var matches = value && value.match(/(\d+)px/);
+               var matches = value && value.match(/^(\d+)(\.\d+)?px$/);
                return matches? Number(matches[1]) : undefined;
        }
 

diff --git a/test/specs/platform.dom.tests.js b/test/specs/platform.dom.tests.js
index 06562c9191f590af0ecce8dca92894553dd424c5..898de9c4842373486ab840bc6c472f9fb3bbaf1b 100644 (file)
--- a/test/specs/platform.dom.tests.js
+++ b/test/specs/platform.dom.tests.js
@@ -226,6 +226,24 @@ describe('Platform.dom', function() {
                                rw: 165, rh: 85,
                        });
                });
+
+               // https://github.com/chartjs/Chart.js/issues/3860
+               it('should support decimal display width and/or height', function() {
+                       var chart = acquireChart({
+                               options: {
+                                       responsive: false
+                               }
+                       }, {
+                               canvas: {
+                                       style: 'width: 345.42px; height: 125.42px;'
+                               }
+                       });
+
+                       expect(chart).toBeChartOfSize({
+                               dw: 345, dh: 125,
+                               rw: 345, rh: 125,
+                       });
+               });
        });
 
        describe('config.options.responsive: true (maintainAspectRatio: true)', function() {