add @polyfill-rule polyfill styles; helps address issue #36

googlearchive · Aug 30, 2013 · 8ce81d0 · 8ce81d0
1 parent 03ee74a
commit 8ce81d0
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -154,6 +154,7 @@ var ShadowCSS = {
       }
       this.shimPolyfillDirectives(def.rootStyles, name);
       this.applyShimming(def.scopeStyles, name);
+      this.applyPolyfillRules(def.rootStyles, name);
     }
   },
   // Shim styles to be placed inside a shadowRoot.
@@ -162,6 +163,7 @@ var ShadowCSS = {
   shimShadowDOMStyling: function(styles, name) {
     this.shimPolyfillDirectives(styles, name);
     this.applyShimming(styles, name);
+    this.applyPolyfillRules(styles, name);
   },
   registerDefinition: function(root, name, extendsName) {
     var def = this.registry[name] = {
@@ -383,6 +385,23 @@ var ShadowCSS = {
         rule.style.cssText.replace(/content:[^;]*;/g, '');
     }
     return properties;
+  },
+  applyPolyfillRules: function(styles, name) {
+    if (styles) {
+      var cssText = '';
+      Array.prototype.forEach.call(styles, function(s) {
+        cssText += this.extractPolyfillRules(s.textContent, name) + '\n\n';
+      }, this);
+    }
+    addCssToDocument(cssText);
+  },
+  extractPolyfillRules: function(cssText, name) {
+    var r = '', l = 0, matches, selector;
+    while (matches = cssPolyfillRuleCommentRe.exec(cssText)) {
+      rule = matches[1].slice(0, -1).replace(hostRe, name);
+      r += rule + '\n\n';
+    }
+    return r;
   }
 };
 
@@ -392,6 +411,7 @@ var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
     hostFixableRe = /^[.\[:]/,
     cssCommentRe = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
     cssPolyfillCommentRe = /\/\*\s*@polyfill ([^*]*\*+([^/*][^*]*\*+)*\/)([^{]*?){/gim,
+    cssPolyfillRuleCommentRe = /\/\*\s@polyfill-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,
     cssPseudoRe = /::(x-[^\s{,(]*)/gim,
     selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
     hostRe = /@host/gim;

diff --git a/test/html/styling/polyfill-rule.html b/test/html/styling/polyfill-rule.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>Psuedo scoped styling</title>
+  <script src="../../../platform.js" shadow></script>
+  <script src="register.js"></script>
+  <script src="../../../tools/test/htmltest.js"></script>
+  <script src="../../../node_modules/chai/chai.js"></script>
+</head>
+<body>
+  <x-foo>
+    <div class="zonk">red?</div>
+  </x-foo>
+
+  <template id="x-foo"">
+    <style>
+      /* @polyfill-rule .zonk {
+        background: red;
+      } */
+
+    </style>
+    <content></content>
+  </template>
+
+  <script>
+    XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
+
+    document.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        var foo = document.querySelector('x-foo');
+        fooDiv = foo.firstElementChild;
+        chai.assert.equal(getComputedStyle(fooDiv).backgroundColor, 
+          'rgb(255, 0, 0)', '@polyfill styles are applied');
+        done();
+      });
+    });
+  </script>
+
+
+</body>
+</html>
diff --git a/test/js/tests.js b/test/js/tests.js
@@ -29,6 +29,7 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/pseudos.html');
   htmlTest('html/styling/pseudos.html?shadow');
   htmlTest('html/styling/polyfill-directive.html');
+  htmlTest('html/styling/polyfill-rule.html');
 });
 
 htmlSuite('Library Cooperation', function() {