Fixes https://github.com/Polymer/platform/issues/71

googlearchive · Jul 22, 2014 · a81d5ee · a81d5ee
1 parent 35728d3
commit a81d5ee
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -545,13 +545,13 @@ var selectorRe = /([^{]*)({[\s\S]*?})/gim,
     cssCommentRe = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
     // TODO(sorvell): remove either content or comment
     cssCommentNextSelectorRe = /\/\*\s*@polyfill ([^*]*\*+([^/*][^*]*\*+)*\/)([^{]*?){/gim,
-    cssContentNextSelectorRe = /polyfill-next-selector[^}]*content\:[\s]*['|"]([^'"]*)['|"][^}]*}([^{]*?){/gim,
+    cssContentNextSelectorRe = /polyfill-next-selector[^}]*content\:[\s]*['"](.*?)['"];[^}]*}([^{]*?){/gim,  
     // TODO(sorvell): remove either content or comment
     cssCommentRuleRe = /\/\*\s@polyfill-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,
-    cssContentRuleRe = /(polyfill-rule)[^}]*(content\:[\s]*['|"]([^'"]*)['|"][^;]*;)[^}]*}/gim,
+    cssContentRuleRe = /(polyfill-rule)[^}]*(content\:[\s]*['"](.*?)['"];)[^}]*}/gim,
     // TODO(sorvell): remove either content or comment
     cssCommentUnscopedRuleRe = /\/\*\s@polyfill-unscoped-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,
-    cssContentUnscopedRuleRe = /(polyfill-unscoped-rule)[^}]*(content\:[\s]*['|"]([^'"]*)['|"][^;]*;)[^}]*}/gim,
+    cssContentUnscopedRuleRe = /(polyfill-unscoped-rule)[^}]*(content\:[\s]*['"](.*?)['"];)[^}]*}/gim,
     cssPseudoRe = /::(x-[^\s{,(]*)/gim,
     cssPartRe = /::part\(([^)]*)\)/gim,
     // note: :host pre-processed to -shadowcsshost.

diff --git a/test/html/styling/polyfill-directive.html b/test/html/styling/polyfill-directive.html
@@ -16,14 +16,14 @@
   <script src="../../../../tools/test/chai/chai.js"></script>
 </head>
 <body>
-  <x-foo>
+  <x-foo foo>
     <div>Green?</div>
-    <section>Orange?</section>
+    <section orange="true">Orange?</section>
   </x-foo>
 
-  <x-bar>
+  <x-bar foo>
     <div>Green?</div>
-    <section>Orange?</section>
+    <section orange="true">Orange?</section>
   </x-bar>
 
   <x-auto>
@@ -38,16 +38,28 @@
         border: 1px solid black;
       }
 
+      polyfill-next-selector {
+        content: ':host([foo=""])';
+      }
+      :host([foo=""]) {
+        padding: 10px;
+      }
+
       polyfill-next-selector { content: ':host > div'; }
       ::content > div {
         background: green;
       }
 
-      polyfill-next-selector { content: "section"; }
+      polyfill-next-selector { content: "section[orange='true']"; }
       ::content > section {
         background: orange;
       }
 
+      polyfill-next-selector { content: 'section[orange="true"]'; }
+      ::content > section {
+        padding: 10px;
+      }
+
       /*@polyfill :host > * */
       ::content > * {
         color: red;
@@ -86,6 +98,8 @@
       setTimeout(function() {
         // x-foo
         var n = document.querySelector('x-foo');
+        var fooStyle = getComputedStyle(n);
+        chai.assert.equal(fooStyle.paddingTop, '10px', 'host attribute style correct');
         var divStyle = getComputedStyle(n.firstElementChild);
         chai.assert.equal(divStyle.backgroundColor, 
           'rgb(0, 128, 0)', 'single quote polyfill-next-selector');
@@ -94,6 +108,8 @@
         var sectionStyle = getComputedStyle(n.lastElementChild);
         chai.assert.equal(sectionStyle.backgroundColor, 
           'rgb(255, 165, 0)', 'double quote polyfill-next-selector');
+        chai.assert.equal(sectionStyle.paddingTop, 
+          '10px', 'double quote polyfill-next-selector');
         chai.assert.equal(sectionStyle.color, 
           'rgb(255, 0, 0)', '@polyfill');
         //

diff --git a/test/html/styling/polyfill-rule.html b/test/html/styling/polyfill-rule.html
@@ -58,14 +58,14 @@
       var zonkStyle = getComputedStyle(foo.querySelector('.zonk'));
       chai.assert.equal(zonkStyle.backgroundColor, 
         'rgb(255, 0, 0)', 'polyfill-rule, single quote');
-      chai.assert.equal(zonkStyle.padding, 
+      chai.assert.equal(zonkStyle.paddingTop, 
         '10px', 'polyfill-rule, double quote');
       chai.assert.equal(zonkStyle.color, 
         'rgb(0, 0, 255)', '@polyfill-rule');
       var unscopedStyle = getComputedStyle(document.querySelector('.unscoped'));
       chai.assert.equal(unscopedStyle.backgroundColor, 
         'rgb(0, 0, 0)', 'polyfill-unscoped-rule single quote');
-      chai.assert.equal(unscopedStyle.padding, 
+      chai.assert.equal(unscopedStyle.paddingTop, 
         '20px', 'polyfill-unscoped-rule double quote');
       done();
     });