From 1058896b0d0a79ac5ceeb782c40bc41d55fe833d Mon Sep 17 00:00:00 2001
From: Steve Orvell <sorvell@google.com>
Date: Mon, 20 Jun 2016 16:42:14 -0700
Subject: [PATCH] =?UTF-8?q?Fixes=20#3555.=20Ensure=20selectors=20including?=
 =?UTF-8?q?=20`::content`=20without=20a=20prefix=20=E2=80=A6=20(#3721)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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.
---
 src/lib/style-transformer.html         |  1 +
 test/unit/styling-scoped-elements.html | 25 +++++++++++++--
 test/unit/styling-scoped.html          | 43 ++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
index 605cabb5d0..74adf086f4 100644
--- 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
index 14eca30b81..0b291139a2 100644
--- 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>
\ No newline at end of file
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 727ff61242..298aba5a95 100644
--- 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');
   });