diff --git a/src/helpers/helpers.dom.ts b/src/helpers/helpers.dom.ts index ce1d1a0459d..ebd8d978d91 100644 --- a/src/helpers/helpers.dom.ts +++ b/src/helpers/helpers.dom.ts @@ -188,7 +188,7 @@ export function getMaximumSize( height -= paddings.height + borders.height; } width = Math.max(0, width - margins.width); - height = Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height - margins.height); + height = Math.max(0, aspectRatio ? width / aspectRatio : height - margins.height); width = round1(Math.min(width, maxWidth, containerSize.maxWidth)); height = round1(Math.min(height, maxHeight, containerSize.maxHeight)); if (width && !height) { @@ -222,8 +222,8 @@ export function retinaScale( const deviceHeight = Math.floor(chart.height * pixelRatio); const deviceWidth = Math.floor(chart.width * pixelRatio); - chart.height = deviceHeight / pixelRatio; - chart.width = deviceWidth / pixelRatio; + chart.height = Math.floor(chart.height); + chart.width = Math.floor(chart.width); const canvas = chart.canvas; diff --git a/test/specs/helpers.dom.tests.js b/test/specs/helpers.dom.tests.js index 545e153db33..4bf05da7568 100644 --- a/test/specs/helpers.dom.tests.js +++ b/test/specs/helpers.dom.tests.js @@ -254,6 +254,30 @@ describe('DOM helpers tests', function() { expect(canvas.style.width).toBe('400px'); }); + it ('should handle devicePixelRatio correctly', function() { + const chartWidth = 800; + const chartHeight = 400; + let devicePixelRatio = 0.8999999761581421; // 1.7999999523162842; + var chart = window.acquireChart({}, { + canvas: { + width: chartWidth, + height: chartHeight, + } + }); + + helpers.retinaScale(chart, devicePixelRatio, true); + + var canvas = chart.canvas; + expect(canvas.width).toBe(Math.floor(chartWidth * devicePixelRatio)); + expect(canvas.height).toBe(Math.floor(chartHeight * devicePixelRatio)); + + expect(chart.width).toBe(chartWidth); + expect(chart.height).toBe(chartHeight); + + expect(canvas.style.width).toBe(`${chartWidth}px`); + expect(canvas.style.height).toBe(`${chartHeight}px`); + }); + describe('getRelativePosition', function() { it('should use offsetX/Y when available', function() { const event = {offsetX: 50, offsetY: 100}; @@ -504,4 +528,21 @@ describe('DOM helpers tests', function() { document.body.removeChild(container); }); + + it('should round non-integer container dimensions', () => { + const container = document.createElement('div'); + container.style.width = '799.999px'; + container.style.height = '299.999px'; + + document.body.appendChild(container); + + const target = document.createElement('div'); + target.style.width = '200px'; + target.style.height = '100px'; + container.appendChild(target); + + expect(helpers.getMaximumSize(target, undefined, undefined, 2)).toEqual(jasmine.objectContaining({width: 800, height: 400})); + + document.body.removeChild(container); + }); });