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);
};
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);
};
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');