Add support for one-of attribute selector while not breaking support …

…for general sibling combinator. Fixes #3023. Fix taken from #3067.

src/lib/style-transformer.html

@@ -253,7 +253,7 @@
     var SCOPE_DOC_SELECTOR = ':not([' + SCOPE_NAME + '])' +
       ':not(.' + SCOPE_NAME + ')';
     var COMPLEX_SELECTOR_SEP = ',';
-    var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)([^\s>+~]+)/g;
+    var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=\[])+)/g;
     var HOST = ':host';
     var ROOT = ':root';
     // NOTE: this supports 1 nested () pair for things like

test/unit/styling-scoped-elements.html

@@ -505,3 +505,31 @@
     is: 'x-overriding'
   });
 </script>
+
+<dom-module id="x-attr-selector">
+  <template>
+    <style>
+      #foo1 ~ #bar1 {
+        border: 2px solid red;
+      }
+
+      #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2]  {
+        border: 4px solid red;
+      }
+
+      #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] ~ #foo3[attr~=foo3][a~=a] ~ #bar3[attr~=bar3][a~=a] {
+        border: 6px solid red;
+      }
+    </style>
+    <div id="foo1"></div>
+    <div id="bar1">bar1</div>
+    <div id="foo2" attr="foo2"></div>
+    <div id="bar2" attr="bar2">bar2</div>
+    <div id="foo3" attr="foo3" a="a"></div>
+    <div id="bar3" attr="bar3" a="a">bar3</div>
+
+  </template>
+  <script>
+    Polymer({is: 'x-attr-selector'});
+  </script>
+</dom-module>

test/unit/styling-scoped.html

@@ -236,6 +236,14 @@
     document.body.removeChild(el);
   });
 
+  test('attribute inclusive selector and general sibling selectors', function() {
+    var e = document.createElement('x-attr-selector');
+    document.body.appendChild(e);
+    assertComputed(e.$.bar1, '2px');
+    assertComputed(e.$.bar2, '4px');
+    assertComputed(e.$.bar3, '6px');
+  });
+
     suite('scoped-styling-shady-only', function() {
 
       suiteSetup(function() {
@@ -333,6 +341,7 @@
       computed = getComputedStyle(circle);
       assert.equal(computed['fill-opacity'], '0.5');
     });
+
 });
 
 </script>