Fixes #3555. Ensure selectors including ::content without a prefix … (

#3721) * Fixes #3555. Ensure selectors including `::content` without a prefix inside a complex selector are shimmed correctly and do not leak styling to the global scope. * remove whitespace fixup since it's unncessesary.
Polymer · Jun 20, 2016 · 1058896 · 1058896
1 parent a54c1f2
commit 1058896
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -175,6 +175,7 @@
         var stop = false;
         var hostContext = false;
         var self = this;
+        selector = selector.trim();
         selector = selector.replace(CONTENT_START, HOST + ' $1');
         selector = selector.replace(SIMPLE_SELECTOR_SEP, function(m, c, s) {
           if (!stop) {

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -440,8 +440,7 @@
 <dom-module id="x-specificity-parent">
   <template>
     <style>
-      /* TODO remove `:host` when https://github.com/Polymer/polymer/pull/2419 merged */
-      :host ::content > :not(template) {
+      ::content > :not(template) {
         @apply(--x-specificity-parent);
       }
     </style>
@@ -577,4 +576,26 @@
   <script>
     Polymer({is: 'x-shared2'});
   </script>
+</dom-module>
+
+<dom-module id="x-content">
+  <template>
+    <style>
+      ::content > .auto-content {
+        border: 2px solid orange;
+      }
+
+      .bar, ::content .complex-descendant {
+        border: 4px solid red;
+      }
+
+      .bar, ::content > .complex-child {
+        border: 6px solid navy;
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-content'});
+  </script>
 </dom-module>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -113,6 +113,49 @@
     assertComputed(content2, '14px');
   });
 
+  test('auto ::content selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('auto-content');
+    d1.textContent = 'auto-content';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '2px');
+  });
+
+  test('::content + descendant in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '4px');
+  });
+
+  test('::content + descendant in complex selector does not leak', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    document.body.appendChild(d1);
+    assertComputed(d1, '0px');
+  });
+
+  test('::content + child in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-child');
+    d1.textContent = 'complex-child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '6px');
+  });
+
   test('::shadow selectors', function() {
     assertComputed(styled.$.child.$.shadow, '7px');
   });