Fixes #2078: when computing custom style properties, make sure the st…

…yling scope is valid when the element is attached to a shadowRoot whose host is not a Polymer element.
Polymer · Jul 13, 2015 · fab2ed7 · fab2ed7
1 parent c46ec11
commit fab2ed7
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 4 deletions.
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -29,8 +29,10 @@
       },
 
       forRulesInStyles: function(styles, callback) {
-        for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
-          this.forEachStyleRule(this.rulesForStyle(s), callback);
+        if (styles) {
+          for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
+            this.forEachStyleRule(this.rulesForStyle(s), callback);
+          }
         }
       },
 

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
@@ -52,8 +52,19 @@
         }
       },
 
+      _findStyleHost: function() {
+        var e = this, root;
+        while (root = Polymer.dom(e).getOwnerRoot()) {
+          if (root.host && root.host._computeStyleProperties) {
+            return root.host;
+          }
+          e = root.host;
+        }
+        return styleDefaults;
+      },
+
       _updateStyleProperties: function() {
-        var info, scope = this.domHost || styleDefaults;
+        var info, scope = this._findStyleHost();
         // install cache in host if it doesn't exist.
         if (!scope._styleCache) {
           scope._styleCache = new Polymer.StyleCache();
@@ -110,7 +121,7 @@
 
       _computeStyleProperties: function(scopeProps) {
         // get scope and make sure it has properties
-        var scope = this.domHost || styleDefaults;
+        var scope = this._findStyleHost();
         // force scope to compute properties if they don't exist or if forcing
         // and it doesn't need properties
         if (!scope._styleProperties) {

diff --git a/test/runner.html b/test/runner.html
@@ -46,6 +46,7 @@
       'unit/styling-cross-scope-apply.html',
       'unit/styling-cross-scope-var.html?dom=shadow',
       'unit/styling-cross-scope-apply.html?dom=shadow',
+      'unit/styling-cross-scope-unknown-host.html',
       'unit/custom-style.html',
       'unit/dynamic-import.html',
       'unit/dom-repeat.html',

diff --git a/test/unit/styling-cross-scope-unknown-host.html b/test/unit/styling-cross-scope-unknown-host.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <script>
+    Polymer = {dom: 'shadow'};
+  </script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+  <style is="custom-style">
+    unknown-host {
+      display: block;
+    }
+
+    :root {
+      --border: 2px solid steelblue;
+    }
+  </style>
+
+  <script>
+    HTMLImports.whenReady(function() {
+      // define unknown-host
+      var proto = Object.create(HTMLElement.prototype);
+      proto.createdCallback = function() {
+        this.root = this.createShadowRoot();
+      }
+      document.registerElement('unknown-host', {prototype: proto});
+    });
+  </script>
+
+  <dom-module id="x-foo">
+    <style>
+      :host {
+        border: var(--border);
+        display: block;
+      }
+    </style>
+    <template>
+      x-foo
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-foo'
+      });
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-nest">
+    <style>
+      :host {
+        --border: 4px solid tomato;
+      }
+    </style>
+    <template>
+      <unknown-host id="unknown"></unknown-host>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-nest',
+
+        attached: function() {
+          this.$.unknown.root.appendChild(document.createElement('x-foo'));
+        }
+      });
+    });
+    </script>
+  </dom-module>
+
+  <script>
+  suite('scoped-styling-unknown-host', function() {
+
+    function assertComputed(element, value, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+    }
+
+    function assertStylePropertyValue(properties, name, includeValue) {
+      assert.property(properties, name);
+      assert.include(properties[name], includeValue);
+    }
+
+    test('element in top level unknown host styled via property defaults', function() {
+      var host = document.createElement('unknown-host');
+      var foo = document.createElement('x-foo');
+      host.root.appendChild(foo);
+      document.body.appendChild(host);
+      CustomElements.takeRecords();
+      assertComputed(foo, '2px');
+    });
+
+    test('element in unknown host styled via containing polymer element', function() {
+      var n = document.createElement('x-nest');
+      document.body.appendChild(n);
+      CustomElements.takeRecords();
+      var foo = Polymer.dom(n.$.unknown.root).querySelector('x-foo');
+      assertComputed(foo, '4px');
+    });
+
+  });
+
+
+  </script>
+
+
+</body>
+