Merge pull request #63 from PolymerLabs/fix-css-safari

Styling fixes

Author: Steve Orvell

polymer-core.html

@@ -1,11 +1,10 @@
+<!-- BREAKME(kschaaf): Remove and make opt-in, eventually -->
+<link rel="import" href="src/shady/shady.html">
+
 <!-- BREAKME(kschaaf): Remove and make opt-in, eventually? -->
 <link rel="import" href="src/compat/polymer-fn.html">
 <link rel="import" href="src/compat/class.html">
 
 <link rel="import" href="src/elements/element.html">
 
-<!-- BREAKME(kschaaf): Remove and make opt-in, eventually -->
-<link rel="import" href="src/shady/shady.html">
-<link rel="import" href="src/styling/style-lib.html">
-
 <link rel="import" href="src/compat/dom-module.html">

src/elements/compat-element.html

@@ -22,7 +22,7 @@
   function nyi() {
     var stack = new Error().stack.split('\n');
     var fn = stack.reduce(function(prev, val) {
-      return prev == true ? val : (prev ? prev : 
+      return prev == true ? val : (prev ? prev :
         val.indexOf('compat-element.html') > 0);
     }, false);
     console.warn('Not yet implemented:', fn);
@@ -60,7 +60,7 @@
 
       disconnectedCallback() {
         super.disconnectedCallback();
-        this.detached();  
+        this.detached();
       }
 
       attributeChangedCallback(name, old, value) {
@@ -85,13 +85,13 @@
       }
 
       reflectPropertyToAttribute(property, attribute, value) {
-        this.constructor.attributes.propertyToAttribute(this, property, 
+        this.constructor.attributes.propertyToAttribute(this, property,
           attribute, value);
       }
 
       serializeValueToAttribute(value, attribute, node) {
         node = node || this;
-        this.constructor.attributes.valueToAttribute(node, value, 
+        this.constructor.attributes.valueToAttribute(node, value,
           attribute, value);
       }
 

src/elements/element.html

@@ -17,6 +17,7 @@
 <link rel="import" href="../template/template-stamp.html">
 <link rel="import" href="../attributes/attribute-to-from-property.html">
 <link rel="import" href="../properties/meta-effects.html">
+<link rel="import" href="../styling/style-lib.html">
 
 <script>
 (function() {
@@ -64,6 +65,9 @@
         this._observedAttributes = this.addPropertiesToAttributes(
           this._flattenedProperties, []);
         }
+        if (!Polymer.StyleLib.nativeShadow) {
+          this.__placeholder = Polymer.StyleLib.applyStylePlaceHolder(this.is);
+        }
         return this._observedAttributes;
       }
 
@@ -112,7 +116,7 @@
           this.createMethodObservers(config.observers);
           if (this.template) {
             var template = this.prepareTemplate(this.template);
-            // TODO(dfreedm): remove when style stuff is refactored 
+            // TODO(dfreedm): remove when style stuff is refactored
             // away from using element as input.
             proto.__notStyleScopeCacheable = template.__notStyleScopeCacheable;
             this.data.clearPropagateEffects(proto);
@@ -125,12 +129,12 @@
       static get template() {
         if (!this.hasOwnProperty('_template')) {
           // TODO(sorvell): `__importDoc` may not be set if super class
-          // has not run defined... falling back to document here is 
+          // has not run defined... falling back to document here is
           // incorrect. This gambit cannot work as is since if the superclass
           // document cannot be discovered via the subclass.
           // TODO(sorvell): support more ways to acquire template.
           // this requires `is` on constructor...
-          this._template = Polymer.DomModule.import(this.is, 
+          this._template = Polymer.DomModule.import(this.is,
           'template', this.__importDoc || document);
         }
         return this._template;
@@ -141,13 +145,14 @@
         Polymer.CompatStyleUtil.normalizeForBC(template.content);
         // TODO(sorvell): cannot use `this` here, refactor this to only do
         // template preparation and take a name.
-        // TODO(dfreedm): factor so that we do not need an object/element 
+        // TODO(dfreedm): factor so that we do not need an object/element
         // argument
         var info = {
           localName: this.is,
           is: this.is,
           extends: this.extends,
-          __cssBuild: this.__cssBuild
+          __cssBuild: this.__cssBuild,
+          __placeholder: this.__placeholder,
         }
         Polymer.StyleLib.prepareTemplate(info, template);
         template.__notStyleScopeCacheable = info.__notStyleScopeCacheable;
@@ -168,7 +173,7 @@
         // add self to host's pending client list
         hostStack.registerHost(this);
         // apply defaults first.
-        this.constructor.data.setPropertyDefaults(this, 
+        this.constructor.data.setPropertyDefaults(this,
           this.constructor._flattenedProperties);
       }
 
@@ -216,7 +221,7 @@
         var property = caseMap.dashToCamelCase(name);
         var type = this.constructor._flattenedProperties[property].type;
         if (!this.constructor.data.hasReadOnlyEffect(this, property)) {
-          this.constructor.attributes.attributeToProperty(this, 
+          this.constructor.attributes.attributeToProperty(this,
             name, value, type);
         }
       }

src/styling/style-lib.html

@@ -30,16 +30,17 @@
       var id = this.scopeCounter[name] = (this.scopeCounter[name] || 0) + 1;
       return name + '-' + id;
     },
+    applyStylePlaceHolder(name) {
+      return Polymer.StyleUtil.applyStylePlaceHolder(name);
+    },
     prepareTemplate(host, template) {
       if (template._prepared) {
         return;
       }
       template._prepared = true;
       var cssText = Polymer.StyleGather.cssFromElement(template);
       if (!this.nativeShadow) {
-        template._placeholder = Polymer.StyleUtil.applyStylePlaceHolder(
-          host.localName);
-        Polymer.StyleTransformer.dom(template.content, host.localName);
+        Polymer.StyleTransformer.dom(template.content, host.is);
       }
       var ast = Polymer.CssParse.parse(cssText);
       if (this.nativeCss && !this.nativeCssApply) {
@@ -52,10 +53,10 @@
         ownPropertyNames = Polymer.StyleProperties.decorateStyles(template._styleAst, host);
       }
       if (!ownPropertyNames.length || this.nativeCss) {
-        var cssText = Polymer.StyleTransformer.elementStyles(host, template._styleAst);
+        cssText = Polymer.StyleTransformer.elementStyles(host, template._styleAst);
         if (cssText.length) {
           var target = this.nativeShadow ? template.content : null;
-          Polymer.StyleUtil.applyCss(cssText, host.localName, target, template._placeholder)
+          Polymer.StyleUtil.applyCss(cssText, host.is, target, host.__placeholder);
         }
       }
       template._ownPropertyNames = ownPropertyNames;
@@ -64,8 +65,8 @@
     prepareHost(host, template) {
       if (template) {
         host.__styleRules = template._styleAst;
-        host.__placeholder = template._placeholder;
       }
+      host.__placeholder = host.constructor.__placeholder;
       host.__overrideStyleProperties = {};
       if (!this.nativeCss) {
         host.__styleProperties = null;
@@ -142,7 +143,7 @@
       var root = Polymer.Utils.ownerRootForNode(node);
       var host = root.host;
       if (host) {
-        if (Polymer.isInstance(host)) {
+        if (host instanceof Polymer.Element) {
           return host;
         } else {
           return this._styleOwnerForNode(host);
@@ -155,7 +156,7 @@
     },
     _applyStyleProperties(host) {
       var oldScopeSelector = host.__scopeSelector;
-      host.__scopeSelector = this._generateScopeSelector(host.localName);
+      host.__scopeSelector = this._generateScopeSelector(host.is);
       var style = Polymer.StyleProperties.applyElementStyle(host, host.__styleProperties, host.__scopeSelector, null);
       if (!this.nativeShadow) {
         Polymer.StyleProperties.applyElementScopeSelector(host, host.__scopeSelector, oldScopeSelector);

src/styling/style-properties.html

@@ -32,7 +32,7 @@
       // property names
       decorateStyles: function(rules, scope) {
         var self = this, props = {}, keyframes = [], ruleIndex = 0;
-        var scopeSelector = styleTransformer._calcHostScope(scope.localName, scope.extends);
+        var scopeSelector = styleTransformer._calcHostScope(scope.is, scope.extends);
         var cssBuild = rules.__cssBuild;
         styleUtil.forEachRule(rules, function(rule) {
           self.decorateRule(rule);
@@ -296,12 +296,12 @@
         if (!rule.propertyInfo.properties) {
           return;
         }
-        var hostScope = scope.localName ?
-        styleTransformer._calcHostScope(scope.localName, scope.extends) :
+        var hostScope = scope.is ?
+        styleTransformer._calcHostScope(scope.is, scope.extends) :
         'html';
         var parsedSelector = rule.parsedSelector;
-        var isRoot = parsedSelector === ':root';
-        var isHost = parsedSelector.indexOf(':host') === 0;
+        var isRoot = (parsedSelector === ':host > *' || parsedSelector === 'html');
+        var isHost = parsedSelector.indexOf(':host') === 0 && !isRoot;
         // build info is either in scope (when scope is an element) or in the style
         // when scope is the default scope; note: this allows default scope to have
         // mixed mode built and unbuilt styles.
@@ -363,7 +363,7 @@
       transformStyles: function(element, properties, scopeSelector) {
         var self = this;
         var hostSelector = styleTransformer
-          ._calcHostScope(element.localName);
+          ._calcHostScope(element.is, element.extends);
         var rxHostSelector = element.extends ?
           '\\' + hostSelector.slice(0, -1) + '\\]' :
           hostSelector;
@@ -388,7 +388,7 @@
       _elementKeyframeTransforms: function(element, rules, scopeSelector) {
         var keyframesRules = rules._keyframes;
         var keyframeTransforms = {};
-        if (nativeShadow && keyframesRules) {
+        if (!nativeShadow && keyframesRules) {
           // For non-ShadowDOM, we transform all known keyframes rules in
           // advance for the current scope. This allows us to catch keyframes
           // rules that appear anywhere in the stylesheet:

src/styling/style-transformer.html

@@ -55,7 +55,7 @@
         if (node.classList) {
           this.element(node, selector, shouldRemoveScope);
         }
-        var c$ = (node.localName === 'template') ? 
+        var c$ = (node.localName === 'template') ?
           (node.content || node._content).childNodes :
           node.children;
         if (c$) {
@@ -104,7 +104,7 @@
         // static shimming work when a proper build exists.
         var cssText = (nativeShadow || cssBuildType === 'shady') ?
         styleUtil.toCssText(styleRules, callback) :
-        this.css(styleRules, element.localName, null, callback) + '\n\n';
+        this.css(styleRules, element.is, element.extends, callback) + '\n\n';
         return cssText.trim();
       },
 

test/unit/shady-v1-dynamic.html

@@ -1376,7 +1376,7 @@
     re.appendChild(child);
     ShadyDom.flush();
     child.addEventListener('child-event', function(e){
-      var path = e.path;
+      var path = e.composedPath();
       assert.isTrue(path.indexOf(p) !== -1, 'path contains p');
       assert.isTrue(path.indexOf(re) !== -1, 'path contains re');
       done();

test/unit/styling-cross-scope-apply.html

@@ -513,7 +513,7 @@
         propName = propName + Polymer.ApplyShim._separator + 'background';
       }
       assert.include(e.__styleProperties[propName], url);
-      assert.include(e._customStyle.textContent, url);
+      assert.include(e.__customStyle.textContent, url);
     }
   });
 
@@ -557,7 +557,7 @@
     [xKeyframes1, xKeyframes2].forEach(function(xKeyframes, index) {
       var target = index === 0 ? '10px' : '20px';
       var onAnimationEnd = function() {
-        assert.include(xKeyframes.getComputedStyleValue('left'), target);
+        assert.include(xKeyframes.getComputedStyleValue('left'), target, xKeyframes.id);
 
         xKeyframes.removeEventListener('animationend', onAnimationEnd);
         xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);

test/unit/styling-cross-scope-var.html

@@ -1100,7 +1100,7 @@
     var d = document.createElement('x-var-produce-via-consume');
     document.body.appendChild(d);
     CustomElements.takeRecords();
-    var styleRoot = d.shadowRoot ? d.shadowRoot : document.head;
+    var styleRoot = Polymer.StyleLib.nativeShadow ? d.shadowRoot : document.head;
     var staticStyle = styleRoot.querySelector('style[scope=x-var-produce-via-consume]');
     assert.ok(staticStyle);
     assert.match(staticStyle.textContent, /display/, 'static style does not contain style content');