Fix responsive in IE11 with padding as percentage (#4620)

When the chart is responsive to the parent container, the calculations for padding assumes that the figure is in pixels so that 20% is taken to be 20 (pixels), which results in the chart exceeding the parent container. This appears to be an IE11 only issue.

src/core/core.helpers.js

@@ -473,15 +473,25 @@ module.exports = function() {
 	helpers.getConstraintHeight = function(domNode) {
 		return getConstraintDimension(domNode, 'max-height', 'clientHeight');
 	};
+	/**
+	 * @private
+ 	 */
+	helpers._calculatePadding = function(container, padding, parentDimension) {
+		padding = helpers.getStyle(container, padding);
+
+		return padding.indexOf('%') > -1 ? parentDimension / parseInt(padding, 10) : parseInt(padding, 10);
+	};
 	helpers.getMaximumWidth = function(domNode) {
 		var container = domNode.parentNode;
 		if (!container) {
 			return domNode.clientWidth;
 		}
 
-		var paddingLeft = parseInt(helpers.getStyle(container, 'padding-left'), 10);
-		var paddingRight = parseInt(helpers.getStyle(container, 'padding-right'), 10);
-		var w = container.clientWidth - paddingLeft - paddingRight;
+		var clientWidth = container.clientWidth;
+		var paddingLeft = helpers._calculatePadding(container, 'padding-left', clientWidth);
+		var paddingRight = helpers._calculatePadding(container, 'padding-right', clientWidth);
+
+		var w = clientWidth - paddingLeft - paddingRight;
 		var cw = helpers.getConstraintWidth(domNode);
 		return isNaN(cw) ? w : Math.min(w, cw);
 	};
@@ -491,9 +501,11 @@ module.exports = function() {
 			return domNode.clientHeight;
 		}
 
-		var paddingTop = parseInt(helpers.getStyle(container, 'padding-top'), 10);
-		var paddingBottom = parseInt(helpers.getStyle(container, 'padding-bottom'), 10);
-		var h = container.clientHeight - paddingTop - paddingBottom;
+		var clientHeight = container.clientHeight;
+		var paddingTop = helpers._calculatePadding(container, 'padding-top', clientHeight);
+		var paddingBottom = helpers._calculatePadding(container, 'padding-bottom', clientHeight);
+
+		var h = clientHeight - paddingTop - paddingBottom;
 		var ch = helpers.getConstraintHeight(domNode);
 		return isNaN(ch) ? h : Math.min(h, ch);
 	};

test/specs/core.helpers.tests.js

@@ -746,6 +746,36 @@ describe('Core helper tests', function() {
 		expect(canvas.style.width).toBe('400px');
 	});
 
+	it ('Should get padding of parent as number (pixels) when defined as percent (returns incorrectly in IE11)', function() {
+
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = '300px';
+		div.style.height = '300px';
+		document.body.appendChild(div);
+
+		// Inner DIV to have 10% padding of parent
+		var innerDiv = document.createElement('div');
+
+		div.appendChild(innerDiv);
+
+		var canvas = document.createElement('canvas');
+		innerDiv.appendChild(canvas);
+
+		// No padding
+		expect(helpers.getMaximumWidth(canvas)).toBe(300);
+
+		// test with percentage
+		innerDiv.style.padding = '10%';
+		expect(helpers.getMaximumWidth(canvas)).toBe(240);
+
+		// test with pixels
+		innerDiv.style.padding = '10px';
+		expect(helpers.getMaximumWidth(canvas)).toBe(280);
+
+		document.body.removeChild(div);
+	});
+
 	describe('Color helper', function() {
 		function isColorInstance(obj) {
 			return typeof obj === 'object' && obj.hasOwnProperty('values') && obj.values.hasOwnProperty('rgb');