diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 64e4180df4e..844fa1fd51d 100644 --- 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 index 3c471b50510..30baaf5acc1 100644 --- 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');