addresses issue #262

Polymer · Aug 30, 2013 · cb5c1bd · cb5c1bd
1 parent c8d5aa7
commit cb5c1bd
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 4 deletions.
diff --git a/src/declaration/styles.js b/src/declaration/styles.js
@@ -26,6 +26,7 @@
      */
     installSheets: function() {
       this.cacheSheets();
+      this.cacheStyles();
       this.installLocalSheets();
       this.installGlobalStyles();
     },
@@ -40,6 +41,14 @@
         }
       });
     },
+    cacheStyles: function() {
+      this.styles = this.findNodes(STYLE_SELECTOR + '[' + SCOPE_ATTR + ']');
+      this.styles.forEach(function(s) {
+        if (s.parentNode) {
+          s.parentNode.removeChild(s);
+        }
+      });
+    },
     /**
      * Takes external stylesheets loaded in an <element> element and moves
      * their content into a <style> element inside the <element>'s template.
@@ -101,11 +110,9 @@
       sheets.forEach(function(sheet) {
         cssText += cssTextFromSheet(sheet) + '\n\n';
       });
-      // handle style elements
-      var styles = this.findNodes(STYLE_SELECTOR, matcher);
+      // handle cached style elements
+      var styles = this.styles.filter(matcher);
       styles.forEach(function(style) {
-        // in case we're in document, remove from element
-        style.parentNode.removeChild(style);
         cssText += style.textContent + '\n\n';
       });
       return cssText;

diff --git a/test/html/styling/sheet-scope.html b/test/html/styling/sheet-scope.html
@@ -0,0 +1,90 @@
+<!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>Sheet scope</title>
+  <script src="../../../polymer.js"></script>
+  <script src="../../../tools/test/htmltest.js"></script>
+  <script src="../../../node_modules/chai/chai.js"></script>
+  <style>
+  </style>
+</head>
+<body>
+  <x-stylish></x-stylish>
+  <div id="node1" class="global-stylish controller-stylish2">1</div>
+  <div id="node2" class="controller-stylish controller-stylish2">2</div>
+  <div id="node3" class="yellow12">3</div>
+  <div id="node4" class="red1">4</div>
+
+  <x-other></x-other>
+
+  <polymer-element name="x-stylish">
+    <template>
+      <link rel="stylesheet" href="sheet1.css" polymer-scope="global">
+      <link rel="stylesheet" href="sheet2.css" polymer-scope="controller">
+      <style polymer-scope="global">
+        .global-stylish {
+          background: red;
+        }
+      </style>
+      <style polymer-scope="controller">
+        .controller-stylish {
+          background: blue;
+        }
+      </style>
+      <style polymer-scope="controller">
+        .controller-stylish2 {
+          font-style: italic;
+        }
+      </style>
+      stylish
+    </template>
+    <script>
+      Polymer('x-stylish', {
+        created: function() {
+          this.installControllerStyles();
+        }
+      });
+    </script>
+  </polymer-element>
+
+  <polymer-element name="x-other" noscript>
+    <template>
+      <x-stylish></x-stylish>
+      <div id="inner1" class="controller-stylish controller-stylish2">stylish</div>
+      <div id="inner2" class="yellow12"></div>
+    </template>
+  </polymer-element>
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+
+      var xother = document.querySelector('x-other');
+
+      function test(node, propertyName, value) {
+        var computed = getComputedStyle(node)[propertyName];
+        chai.assert.equal(computed, value, 'computed ' + propertyName + 
+            ' matches expected.');
+      }
+      var node1 = document.querySelector('#node1');
+      var node2 = document.querySelector('#node2')
+      var node3 = document.querySelector('#node3')
+
+      test(node1, 'backgroundColor', 'rgb(255, 0, 0)');
+      test(node1, 'fontStyle', 'italic');
+      test(node2, 'backgroundColor', 'rgb(0, 0, 255)');
+      test(node2, 'fontStyle', 'italic');
+      test(node3, 'backgroundColor', 'rgb(255, 255, 0)');
+      test(node4, 'backgroundColor', 'rgb(255, 0, 0)');
+      test(xother.$.inner1, 'backgroundColor', 'rgb(0, 0, 255)');
+      test(xother.$.inner1, 'fontStyle', 'italic');
+      test(xother.$.inner2, 'backgroundColor', 'rgb(255, 255, 0)');
+      done();
+    });
+  </script>
+</body>
+</html>
diff --git a/test/js/styling.js b/test/js/styling.js
@@ -5,6 +5,7 @@
  */
 htmlSuite('styling', function() {
   htmlTest('html/styling/sheet-order.html');
+  htmlTest('html/styling/sheet-scope.html');
   htmlTest('html/styling/sheet-main-doc.html');
   htmlTest('html/styling/apply-reset-styles.html');
 });