Update polyfill to latest spec: ::shadow, /deep/, :host-context.

Fixes Polymer/polymer#458
Fixes https://github.com/Polymer/platform/issues/57

src/ShadowCSS.js

@@ -19,7 +19,7 @@
 
   Shimmed features:
 
-  * :host, :ancestor: ShadowDOM allows styling of the shadowRoot's host
+  * :host, :host-context: ShadowDOM allows styling of the shadowRoot's host
   element using the :host rule. To shim this feature, the :host styles are 
   reformatted and prefixed with a given scope name and promoted to a 
   document level stylesheet.
@@ -193,7 +193,7 @@ var ShadowCSS = {
     def.rootStyles = styles;
     def.scopeStyles = def.rootStyles;
     var extendee = this.registry[def.extendsName];
-    if (extendee && (!root || root.querySelector('shadow'))) {
+    if (extendee) {
       def.scopeStyles = extendee.scopeStyles.concat(def.scopeStyles);
     }
     return def;
@@ -288,7 +288,7 @@ var ShadowCSS = {
     var unscoped = this.extractUnscopedRulesFromCssText(cssText);
     cssText = this.insertPolyfillHostInCssText(cssText);
     cssText = this.convertColonHost(cssText);
-    cssText = this.convertColonAncestor(cssText);
+    cssText = this.convertColonHostContext(cssText);
     cssText = this.convertCombinators(cssText);
     if (scopeSelector) {
       var self = this, cssText;
@@ -337,23 +337,23 @@ var ShadowCSS = {
         this.colonHostPartReplacer);
   },
   /*
-   * convert a rule like :ancestor(.foo) > .bar { }
+   * convert a rule like :host-context(.foo) > .bar { }
    *
    * to
    *
    * scopeName.foo > .bar, .foo scopeName > .bar { }
    * 
    * and
    *
-   * :ancestor(.foo:host) .bar { ... }
+   * :host-context(.foo:host) .bar { ... }
    * 
    * to
    * 
    * scopeName.foo .bar { ... }
   */
-  convertColonAncestor: function(cssText) {
-    return this.convertColonRule(cssText, cssColonAncestorRe,
-        this.colonAncestorPartReplacer);
+  convertColonHostContext: function(cssText) {
+    return this.convertColonRule(cssText, cssColonHostContextRe,
+        this.colonHostContextPartReplacer);
   },
   convertColonRule: function(cssText, regExp, partReplacer) {
     // p1 = :host, p2 = contents of (), p3 rest of rule
@@ -371,7 +371,7 @@ var ShadowCSS = {
       }
     });
   },
-  colonAncestorPartReplacer: function(host, part, suffix) {
+  colonHostContextPartReplacer: function(host, part, suffix) {
     if (part.match(polyfillHost)) {
       return this.colonHostPartReplacer(host, part, suffix);
     } else {
@@ -461,17 +461,29 @@ var ShadowCSS = {
     return scoped;
   },
   insertPolyfillHostInCssText: function(selector) {
-    return selector.replace(hostRe, polyfillHost).replace(colonHostRe,
-        polyfillHost).replace(colonAncestorRe, polyfillAncestor);
+    return selector.replace(colonHostContextRe, polyfillHostContext).replace(
+        colonHostRe, polyfillHost);
   },
   propertiesFromRule: function(rule) {
+    var cssText = rule.style.cssText;
     // TODO(sorvell): Safari cssom incorrectly removes quotes from the content
     // property. (https://bugs.webkit.org/show_bug.cgi?id=118045)
-    if (rule.style.content && !rule.style.content.match(/['"]+/)) {
-      return rule.style.cssText.replace(/content:[^;]*;/g, 'content: \'' + 
+    // don't replace attr rules
+    if (rule.style.content && !rule.style.content.match(/['"]+|attr/)) {
+      cssText = cssText.replace(/content:[^;]*;/g, 'content: \'' + 
           rule.style.content + '\';');
     }
-    return rule.style.cssText;
+    // TODO(sorvell): we can workaround this issue here, but we need a list
+    // of troublesome properties to fix https://github.com/Polymer/platform/issues/53
+    //
+    // inherit rules can be omitted from cssText
+    if (rule.style.background == 'initial') {
+      cssText += 'background: initial; ';
+    }
+    if (rule.style.border == 'initial') {
+      cssText += 'border: initial; ';
+    }
+    return cssText;
   },
   replaceTextInStyles: function(styles, action) {
     if (styles && action) {
@@ -507,26 +519,27 @@ var selectorRe = /([^{]*)({[\s\S]*?})/gim,
     cssPartRe = /::part\(([^)]*)\)/gim,
     // note: :host pre-processed to -shadowcsshost.
     polyfillHost = '-shadowcsshost',
-    // note: :ancestor pre-processed to -shadowcssancestor.
-    polyfillAncestor = '-shadowcssancestor',
+    // note: :host-context pre-processed to -shadowcsshostcontext.
+    polyfillHostContext = '-shadowcsscontext',
     parenSuffix = ')(?:\\((' +
         '(?:\\([^)(]*\\)|[^)(]*)+?' +
         ')\\))?([^,{]*)';
     cssColonHostRe = new RegExp('(' + polyfillHost + parenSuffix, 'gim'),
-    cssColonAncestorRe = new RegExp('(' + polyfillAncestor + parenSuffix, 'gim'),
+    cssColonHostContextRe = new RegExp('(' + polyfillHostContext + parenSuffix, 'gim'),
     selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
-    hostRe = /@host/gim,
     colonHostRe = /\:host/gim,
-    colonAncestorRe = /\:ancestor/gim,
+    colonHostContextRe = /\:host-context/gim,
     /* host name without combinator */
     polyfillHostNoCombinator = polyfillHost + '-no-combinator',
     polyfillHostRe = new RegExp(polyfillHost, 'gim'),
-    polyfillAncestorRe = new RegExp(polyfillAncestor, 'gim'),
+    polyfillHostContextRe = new RegExp(polyfillHostContext, 'gim'),
     combinatorsRe = [
       /\^\^/g,
       /\^/g,
       /\/shadow\//g,
-      /\/shadow-deep\//g
+      /\/shadow-deep\//g,
+      /::shadow/g,
+      /\/deep\//g
     ];
 
 function stylesToCssText(styles, preserveComments) {

test/html/styling/before-content.html

@@ -34,26 +34,31 @@
       #four::before {
         content: "hi there";
       }
+      #five::before {
+        content: attr(test);
+      }
     </style>
     <div id="one">1</div>
     <div id="two">2</div>
     <div id="three">3</div>
     <div id="four">4</div>
+    <div id="five" test="7"></div>
   </template>
   <script>
     register('x-test', '', HTMLElement.prototype);
 
     document.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {
         var root = document.querySelector('x-test').shadowRoot;
-        function testContent(node, content) {
-          chai.assert(getComputedStyle(node, ':before').content, content, 'content ' +
+        function testContent(node, contentRe) {
+          chai.assert.match(getComputedStyle(node, ':before').content, contentRe, 'content ' +
               'property set correctly.');
         }
-        testContent(root.querySelector('#one'), 'hithere');
-        testContent(root.querySelector('#two'), 'hithere ');
-        testContent(root.querySelector('#three'), ' hithere');
-        testContent(root.querySelector('#four'), 'hi there');
+        testContent(root.querySelector('#one'), new RegExp('hithere'));
+        testContent(root.querySelector('#two'), new RegExp('hithere '));
+        testContent(root.querySelector('#three'), new RegExp(' hithere'));
+        testContent(root.querySelector('#four'), new RegExp('hi there'));
+        testContent(root.querySelector('#five'), new RegExp('7|attr\\(test\\)'));
         done();
       });
     });

test/html/styling/colon-host.html

@@ -26,7 +26,7 @@
         color: white;
       }
 
-      :ancestor(.opened:not(.animating)) div {
+      :host-context(.opened:not(.animating)) div {
         background: blue;
       }
     </style>
@@ -77,7 +77,7 @@
 
   <template id="x-anchor">
     <style>
-      :host:link {
+      :host(:link) {
         font-style: italic;
       }
     </style>
@@ -101,7 +101,7 @@
         padding: 20px;
       }
 
-      :host(.foo), :ancestor(.bar) {
+      :host(.foo), :host-context(.bar) {
         background: green;
         display: block;
       }
@@ -232,10 +232,10 @@ <h4>Expected: blue background</h4>
 
       var zim2 = document.querySelector('x-zim2');
       var zimStyle2 = getComputedStyle(zim2);
-      chai.assert.equal(zimStyle2.borderTopColor, 'rgb(0, 0, 0)', 
-        ':host styles are not combined without <shadow> (borderTopColor)');
-      chai.assert.equal(zimStyle2.borderBottomColor, 'rgb(0, 0, 0)', 
-        ':host styles are not combined without <shadow> (borderBottomColor)');
+      chai.assert.equal(zimStyle2.borderTopColor, 'rgb(255, 165, 0)', 
+        ':host styles are combined without <shadow> (borderTopColor)');
+      chai.assert.equal(zimStyle2.borderBottomColor, 'rgb(255, 165, 0)', 
+        ':host styles are combined without <shadow> (borderBottomColor)');
       chai.assert.equal(zimStyle2.paddingTop, '20px',
         ':host styles are loaded via external sheet in import (paddingTop)');
       chai.assert.equal(zimStyle2.paddingLeft, '20px',

test/html/styling/combinators-shadow-import.css

@@ -1,3 +1,3 @@
-x-foo /shadow/ .foo2 {
+x-foo::shadow .foo2 {
   background: green;
 }

test/html/styling/combinators-shadow.css

@@ -1,3 +1,3 @@
-body /shadow-deep/ x-zot /shadow/ .zot-inner {
+body /deep/ x-zot::shadow .zot-inner {
   background: blue;
 }

test/html/styling/combinators-shadow.html

@@ -13,7 +13,7 @@
   <script src="../../../../tools/test/htmltest.js"></script>
   <script src="../../../../tools/test/chai/chai.js"></script>
   <style shim-shadowdom>
-    x-foo /shadow/ .foo {
+    x-foo::shadow .foo {
       background: orange;
     }
   </style>
@@ -24,15 +24,15 @@
 
   <template id="x-foo">
     <style>
-      x-bar /shadow/ .bar {
+      x-bar::shadow .bar {
         background: red;
       }
 
-      x-bar /shadow/ .noogy {
+      x-bar::shadow .noogy {
         background: blue;
       }
 
-      x-bar /shadow-deep/ .zot {
+      x-bar /deep/ .zot {
         color: white;
       }
     </style>
@@ -42,7 +42,7 @@
   </template>
   <template id="x-bar">
     <style>
-      x-zot /shadow/ .zot {
+      x-zot::shadow .zot {
         background: green;
       }
     </style>