Skip to content

Commit

Permalink
Merge pull request #63 from PolymerLabs/fix-css-safari
Browse files Browse the repository at this point in the history
Styling fixes
  • Loading branch information
Steve Orvell committed Aug 17, 2016
2 parents f60c957 + c88973e commit b98d174
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 36 deletions.
7 changes: 3 additions & 4 deletions polymer-core.html
Original file line number Diff line number Diff line change
@@ -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">
8 changes: 4 additions & 4 deletions src/elements/compat-element.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -60,7 +60,7 @@

disconnectedCallback() {
super.disconnectedCallback();
this.detached();
this.detached();
}

attributeChangedCallback(name, old, value) {
Expand All @@ -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);
}

Expand Down
19 changes: 12 additions & 7 deletions src/elements/element.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -64,6 +65,9 @@
this._observedAttributes = this.addPropertiesToAttributes(
this._flattenedProperties, []);
}
if (!Polymer.StyleLib.nativeShadow) {
this.__placeholder = Polymer.StyleLib.applyStylePlaceHolder(this.is);
}
return this._observedAttributes;
}

Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}

Expand Down Expand Up @@ -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);
}
}
Expand Down
17 changes: 9 additions & 8 deletions src/styling/style-lib.html
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down
14 changes: 7 additions & 7 deletions src/styling/style-properties.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand All @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions src/styling/style-transformer.html
Original file line number Diff line number Diff line change
Expand Up @@ -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$) {
Expand Down Expand Up @@ -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();
},

Expand Down
2 changes: 1 addition & 1 deletion test/unit/shady-v1-dynamic.html
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions test/unit/styling-cross-scope-apply.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});

Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion test/unit/styling-cross-scope-var.html
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit b98d174

Please sign in to comment.