From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sat, 2 Apr 2016 03:11:01 +0000 (-0400)
Subject: Add initial implementation of constraint percentage width / height support. Added... 
X-Git-Tag: v2.0.0~2^2~5
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=b6d7ceba1c457a99b0cd09c00a53c8249a0d0a29;p=thirdparty%2FChart.js.git

Add initial implementation of constraint percentage width / height support. Added tests for dom sizing methods.
---

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 79d9dd100..d9dfb7c1c 100644
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -718,6 +718,24 @@ module.exports = function(Chart) {
 			helpers.removeEvent(chartInstance.chart.canvas, eventName, handler);
 		});
 	};
+
+	// Private helper function to convert max-width/max-height values that may be percentages into a number
+	function parseMaxStyle(styleValue, node, horizontal) {
+		var valueInPixels;
+		if (typeof(styleValue) === 'string') {
+			valueInPixels = parseInt(styleValue, 10);
+
+			if (styleValue.indexOf('%') != -1) {
+				// percentage * size in dimension
+				valueInPixels = valueInPixels / 100 * (horizontal ? node.parentNode.clientWidth : node.parentNode.clientHeight);
+			}
+		} else {
+			valueInPixels = styleValue;
+		}
+
+		return valueInPixels;
+	}
+
 	helpers.getConstraintWidth = function(domNode) { // returns Number or undefined if no constraint
 		var constrainedWidth;
 		var constrainedWNode = document.defaultView.getComputedStyle(domNode)['max-width'];
@@ -726,7 +744,7 @@ module.exports = function(Chart) {
 		var hasCWContainer = constrainedWContainer !== null && constrainedWContainer !== "none";
 
 		if (hasCWNode || hasCWContainer) {
-			constrainedWidth = Math.min((hasCWNode ? parseInt(constrainedWNode, 10) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseInt(constrainedWContainer, 10) : Number.POSITIVE_INFINITY));
+			constrainedWidth = Math.min((hasCWNode ? parseMaxStyle(constrainedWNode, domNode, true) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseMaxStyle(constrainedWContainer, domNode.parentNode, true) : Number.POSITIVE_INFINITY));
 		}
 		return constrainedWidth;
 	};
@@ -738,8 +756,8 @@ module.exports = function(Chart) {
 		var hasCHNode = constrainedHNode !== null && constrainedHNode !== "none";
 		var hasCHContainer = constrainedHContainer !== null && constrainedHContainer !== "none";
 
-		if (constrainedHNode || constrainedHContainer) {
-			constrainedHeight = Math.min((hasCHNode ? parseInt(constrainedHNode, 10) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseInt(constrainedHContainer, 10) : Number.POSITIVE_INFINITY));
+		if (hasCHNode || hasCHContainer) {
+			constrainedHeight = Math.min((hasCHNode ? parseMaxStyle(constrainedHNode, domNode) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseMaxStyle(constrainedHContainer, domNode.parentNode) : Number.POSITIVE_INFINITY));
 		}
 		return constrainedHeight;
 	};
diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js
index f89a7a90e..cb4e03d9a 100644
--- a/test/core.helpers.tests.js
+++ b/test/core.helpers.tests.js
@@ -484,4 +484,184 @@ describe('Core helper tests', function() {
 			args: []
 		}])
 	});
+
+	it ('should get the maximum width and height for a node', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(200);
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(300);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "50%";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "50%";
+		div.appendChild(parentDiv);
+
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
 });