Add initial implementation of constraint percentage width / height support. Added...

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 79d9dd10059921a9fb1795629a30599d21013fa4..d9dfb7c1cd5b11ddc5a85cef2e762d68ce35399e 100644 (file)
--- 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 f89a7a90e9e29deeb391dc24f2a67eca64bddb86..cb4e03d9a6bc2678fd0ceb4eea32299f7cee91e1 100644 (file)
--- 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);
+       });
+
 });