Apply polyfill styling even when there's element dom, fixes Polymer/p…

…olymer#314. Update tests.
googlearchive · Oct 11, 2013 · ca89c64 · ca89c64
1 parent 8ae7e17
commit ca89c64
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 52 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -144,41 +144,42 @@ var ShadowCSS = {
   // 3. shim polyfill directives /* @polyfill */
   // 4. shim @host and scoping
   shimStyling: function(root, name, extendsName) {
+    // use caching to make working with styles nodes easier and to facilitate
+    // lookup of extendee
+    var def = this.registerDefinition(root, name, extendsName);
+    // find styles and apply shimming...
+    if (this.strictStyling) {
+      this.applyScopeToContent(root, name);
+    }
+    this.shimPolyfillDirectives(def.rootStyles, name);
+    var cssText = this.stylesToShimmedCssText(def.scopeStyles, name);
+    // note: it's critical that polyfill-rules are not shimmed.
+    cssText += '\n\n' + this.extractPolyfillRules(def.scopeStyles, name);
+    // provide shimmedStyle for user extensibility
+    def.shimmedStyle = cssTextToStyle(cssText);
     if (root) {
-      // use caching to make working with styles nodes easier and to facilitate
-      // lookup of extendee
-      var def = this.registerDefinition(root, name, extendsName);
-      // find styles and apply shimming...
-      if (this.strictStyling) {
-        this.applyScopeToContent(root, name);
-      }
-      this.shimPolyfillDirectives(def.rootStyles, name);
-      var cssText = this.stylesToShimmedCssText(def.scopeStyles, name);
-      // note: it's critical that polyfill-rules are not shimmed.
-      cssText += '\n\n' + this.extractPolyfillRules(def.scopeStyles, name);
-      // provide shimmedStyle for user extensibility
-      root.shimmedStyle = def.shimmedStyle = cssTextToStyle(cssText);
-      // remove existing style elements
-      for (var i=0, l=def.rootStyles.length, s; (i<l) && (s=def.rootStyles[i]); 
-          i++) {
-        s.parentNode.removeChild(s);
-      }
-      // add style to document
-      addCssToDocument(cssText);
+      root.shimmedStyle = def.shimmedStyle;
+    }
+    // remove existing style elements
+    for (var i=0, l=def.rootStyles.length, s; (i<l) && (s=def.rootStyles[i]); 
+        i++) {
+      s.parentNode.removeChild(s);
     }
+    // add style to document
+    addCssToDocument(cssText);
   },
   registerDefinition: function(root, name, extendsName) {
     var def = this.registry[name] = {
       root: root,
       name: name,
       extendsName: extendsName
     }
-    var styles = root.querySelectorAll('style');
+    var styles = root ? root.querySelectorAll('style') : [];
     styles = styles ? Array.prototype.slice.call(styles, 0) : [];
     def.rootStyles = styles;
     def.scopeStyles = def.rootStyles;
     var extendee = this.registry[def.extendsName];
-    if (extendee && root.querySelector('shadow')) {
+    if (extendee && (!root || root.querySelector('shadow'))) {
       def.scopeStyles = extendee.scopeStyles.concat(def.scopeStyles);
     }
     return def;

diff --git a/test/html/styling/host.html b/test/html/styling/host.html
@@ -36,7 +36,7 @@
   <template id="x-bar">
     <style>
       @host {
-        x-bar {
+        * {
           color: white;
         }
       }
@@ -110,11 +110,12 @@
   <script>
     XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
     XBar = register('x-bar', 'x-foo', XFoo.prototype, ['x-foo', 'x-bar']);
+    XBar2 = register('x-bar2', 'x-foo', XFoo.prototype, ['x-foo']);
     XZot = register('x-zot', 'x-bar', XBar.prototype, ['x-foo', 'x-bar', 'x-zot']);
     XZim = register('x-zim', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim']);
     XZim2 = register('x-zim2', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim2']);
     register('x-scope', '', HTMLElement.prototype, ['x-scope']);
-    register('x-button', '', HTMLButtonElement.prototype, ['x-button']);
+    register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
   </script>
 
   <h4>Expected: red background</h4>
@@ -134,6 +135,9 @@ <h4>Expected: black background</h4>
 
   <h4>Expected: red background with white text</h4>
   <x-bar></x-bar>
+
+  <h4>Expected: red background with white text</h4>
+  <x-bar2></x-bar2>
 
   <h4>Expected: red background with black text and orange border</h4>
   <x-zot></x-zot>
@@ -153,7 +157,7 @@ <h4>Expected: 20px padding</h4>
       var foo2 = document.querySelector('x-foo.foo');
       chai.assert.equal(getComputedStyle(foo2).backgroundColor, 'rgb(0, 0, 0)',
         '@host styles matching * are conditionally applied (backgroundColor)');  
-        
+
       var scope = document.querySelector('x-scope');
       chai.assert.equal(getComputedStyle(scope).backgroundColor, 'rgb(255, 0, 0)',
         '@host styles matching :scope  are applied (backgroundColor)');
@@ -168,14 +172,19 @@ <h4>Expected: 20px padding</h4>
         '@host styles are inherited (backgroundColor)');
       chai.assert.equal(barStyle.color, 'rgb(255, 255, 255)',
         '@host styles are combined with inherited @host styles (color)');
-
+
+      var bar2 = document.querySelector('x-bar2');
+      var bar2Style = getComputedStyle(bar2);
+      chai.assert.equal(bar2Style.backgroundColor, 'rgb(255, 0, 0)', 
+        '@host styles are inherited (backgroundColor)');
+
       var zot = document.querySelector('x-zot');
       var zotStyle = getComputedStyle(zot);
       chai.assert.equal(zotStyle.backgroundColor, 'rgb(255, 0, 0)', 
         '@host styles are inherited (backgroundColor)');
       chai.assert.equal(zotStyle.borderTopColor, 'rgb(255, 165, 0)', 
         '@host styles are combined with inherited @host styles (borderTopColor)');
-      chai.assert.equal(zotStyle.color, 'rgb(0, 0, 0)',
+      chai.assert.equal(zotStyle.color, 'rgb(255, 255, 255)',
         '@host styles are applied to given selector (color)');
 
       var zim = document.querySelector('x-zim');
@@ -187,7 +196,7 @@ <h4>Expected: 20px padding</h4>
         '@host styles are combined with inherited @host styles (borderTopColor)');
       chai.assert.equal(zimStyle.borderBottomColor, 'rgb(255, 165, 0)', 
         '@host styles are combined with inherited @host styles (borderBottomColor)');
-      chai.assert.equal(zimStyle.color, 'rgb(0, 0, 0)',
+      chai.assert.equal(zimStyle.color, 'rgb(255, 255, 255)',
         '@host styles are applied to given selector (color)');
       chai.assert.equal(zimStyle.paddingTop, '20px',
         '@host styles are loaded via external sheet in import (paddingTop)');

diff --git a/test/html/styling/polyfill-directive.html b/test/html/styling/polyfill-directive.html
@@ -41,7 +41,7 @@
   </template>
 
   <script>
-    XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
+    XFoo = register('x-foo', '', HTMLElement.prototype);
 
     document.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {

diff --git a/test/html/styling/polyfill-rule.html b/test/html/styling/polyfill-rule.html
@@ -28,7 +28,7 @@
   </template>
 
   <script>
-    XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
+    XFoo = register('x-foo', '', HTMLElement.prototype);
 
     document.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {

diff --git a/test/html/styling/pseudo-scoping.html b/test/html/styling/pseudo-scoping.html
@@ -54,8 +54,8 @@
     <x-inner></x-inner>
   </template>
   <script>
-    register('x-inner', '', HTMLElement.prototype, ['x-inner']);
-    register('x-foo', '', HTMLElement.prototype, ['x-foo']);
+    register('x-inner', '', HTMLElement.prototype);
+    register('x-foo', '', HTMLElement.prototype);
 
     document.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {

diff --git a/test/html/styling/pseudos.html b/test/html/styling/pseudos.html
@@ -34,8 +34,8 @@
   </template>
 
   <script>
-    register('x-inner', '', HTMLElement.prototype, ['x-inner']);
-    register('x-test', '', HTMLElement.prototype, ['x-test']);
+    register('x-inner', '', HTMLElement.prototype);
+    register('x-test', '', HTMLElement.prototype);
 
     document.addEventListener('WebComponentsReady', function() {
       var test = document.querySelector('x-test');

diff --git a/test/html/styling/register.js b/test/html/styling/register.js
@@ -1,36 +1,53 @@
 (function(scope) {
 
+  var extendsRegistry = {};
+
   function register(name, extnds, proto, templates) {
+    extendsRegistry[name] = extnds;
+    var names = calcExtendsNames(name);
     if (window.ShadowDOMPolyfill) {
-      shim(templates, name, extnds);
+      shim(templates, names);
     }
-    var ctor = document.register(name, {
+
+    var config = {
       prototype: Object.create(proto, {
         createdCallback: {
           value: function() {
-            if (templates) {
-              templates.forEach(function(t) {
-                var template = document.querySelector('#' + t);
-                if (template) {
-                  this.createShadowRoot().appendChild(template.createInstance());
-                }
-              }, this);
+            for (var i=0, n; i < names.length; i++) {
+              n = names[i];
+              var template = templateForName(n);
+              if (template) {
+                this.createShadowRoot().appendChild(template.createInstance());
+              }
             }
           }
         }
       })
-    });
+    };
+    if (extnds && extnds.indexOf('-') < 0) {
+      config.extends = extnds;
+    }
+    var ctor = document.register(name, config);
     return ctor;
   }
-
-  function shim(templates, name, extnds) {
-    if (templates) {
-      var id = templates[templates.length - 1];
-      var template = document.querySelector('#' + id);
-      if (template) {
-          Platform.ShadowCSS.shimStyling(template.content, name, extnds);
-        }
+
+  function calcExtendsNames(name) {
+    var names = [], n = name;
+    while (n) {
+      names.push(n);
+      n = extendsRegistry[n];
     }
+    return names.reverse();
+  }
+
+  function templateForName(name) {
+    return document.querySelector('#' + name);
+  }
+
+  function shim(templates, names) {
+    var n = names[names.length-1];
+    var template = templateForName(n);
+    Platform.ShadowCSS.shimStyling(template ? template.content : null, n, extendsRegistry[n]);
   }
 
   scope.register = register;