Add support for Shadow DOM (chartjs#5585)

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host
exwm · Jul 7, 2018 · 1616076 · 1616076
1 parent dd1e15a
commit 1616076
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
@@ -450,7 +450,7 @@ module.exports = function() {
 	// @see http://www.nathanaeljones.com/blog/2013/reading-max-width-cross-browser
 	function getConstraintDimension(domNode, maxStyle, percentageProperty) {
 		var view = document.defaultView;
-		var parentNode = domNode.parentNode;
+		var parentNode = helpers._getParentNode(domNode);
 		var constrainedNode = view.getComputedStyle(domNode)[maxStyle];
 		var constrainedContainer = view.getComputedStyle(parentNode)[maxStyle];
 		var hasCNode = isConstrainedValue(constrainedNode);
@@ -481,8 +481,18 @@ module.exports = function() {
 
 		return padding.indexOf('%') > -1 ? parentDimension / parseInt(padding, 10) : parseInt(padding, 10);
 	};
+	/**
+	 * @private
+	 */
+	helpers._getParentNode = function(domNode) {
+		var parent = domNode.parentNode;
+		if (parent && parent.host) {
+			parent = parent.host;
+		}
+		return parent;
+	};
 	helpers.getMaximumWidth = function(domNode) {
-		var container = domNode.parentNode;
+		var container = helpers._getParentNode(domNode);
 		if (!container) {
 			return domNode.clientWidth;
 		}
@@ -496,7 +506,7 @@ module.exports = function() {
 		return isNaN(cw) ? w : Math.min(w, cw);
 	};
 	helpers.getMaximumHeight = function(domNode) {
-		var container = domNode.parentNode;
+		var container = helpers._getParentNode(domNode);
 		if (!container) {
 			return domNode.clientHeight;
 		}

diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js
@@ -568,6 +568,31 @@ describe('Core helper tests', function() {
 		document.body.removeChild(div);
 	});
 
+	it ('should get the maximum width and height for a node in a ShadowRoot', 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);
+
+		if (!div.attachShadow) {
+			// Shadow DOM is not natively supported
+			return;
+		}
+
+		var shadow = div.attachShadow({mode: 'closed'});
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		shadow.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');