Check that document selectors are actually simple selectors

dfreedm · dfreedm · commit ad7805e5d12f · 2017-10-16T17:49:57.000-07:00
Checking for `/deep/` and `::shadow` is not enough Fixes #4885
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -311,7 +311,7 @@
       },
 
       _transformDocumentSelector: function(selector) {
-        return selector.match(SCOPE_JUMP) ?
+        return (selector.match(SCOPE_JUMP) || selector.match(SIMPLE_SELECTOR_SEP) )?
           this._transformComplexSelector(selector, SCOPE_DOC_SELECTOR) :
           this._transformSimpleSelector(selector.trim(), SCOPE_DOC_SELECTOR);
       },
diff --git a/test/runner.html b/test/runner.html
@@ -98,7 +98,11 @@
       'unit/dir.html',
       'unit/dir.html?dom=shadow',
       'unit/dir.html?lazyRegister=true&useNativeCSSProperties=true',
-      'unit/dir.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
+      'unit/dir.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow',
+      'unit/custom-style-transformed.html',
+      'unit/custom-style-transformed.html?dom=shadow',
+      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true',
+      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
     ];
 
     if (window.customElements || document.registerElement) {
diff --git a/test/unit/custom-style-transformed.html b/test/unit/custom-style-transformed.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+  <style is="custom-style">
+    html:not([foo]) * {
+      color: rgb(123, 123, 123);
+      border: 10px solid black;
+    }
+  </style>
+</body>
+<dom-module id="x-styled">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <div id="target"></div>
+  </template>
+</dom-module>
+
+<x-styled id="target"></x-styled>
+
+<script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'x-styled'});
+  });
+  suite('complicated custom style', function() {
+    test('complicated selector', function() {
+      var el = document.querySelector('x-styled#target');
+      var target = el.$.target;
+      assert.equal(getComputedStyle(el).getPropertyValue('border-top-width').trim(), '10px');
+      assert.equal(getComputedStyle(target).getPropertyValue('border-top-width').trim(), '0px');
+      assert.equal(getComputedStyle(target).getPropertyValue('color').trim(), 'rgb(123, 123, 123)');
+    })
+  })
+</script>
