Add support for Shadow DOM (#5585)

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 64e4180df4e20e0f42d03d855effd7db9cc290b0..844fa1fd51d3d9711d11da584008737cc61f91ee 100644 (file)
--- 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 3c471b505100049d6746c5205d31b5b042747e95..30baaf5acc1af53330af24dbaa74b01a02cd2b08 100644 (file)
--- 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');