GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3163 from Polymer/allow-keyframe-style-transformation

Browse Source 
Non-destructive `@keyframes` rule transformation.
This commit is contained in:
Steve Orvell 2016-02-04 15:20:42 -08:00
commit 9968266e74
11 changed files with 747 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/css-parse.html
View File

@ -73,6 +73,8 @@ Polymer.CssParse = (function() {
node.type = this.types.MEDIA_RULE;
} else if (s.match(this._rx.keyframesRule)) {
node.type = this.types.KEYFRAMES_RULE;
node.keyframesName =
node.selector.split(this._rx.multipleSpaces).pop();
}
} else {
if (s.indexOf(this.VAR_START) === 0) {

2
src/lib/custom-style.html
View File

@ -139,7 +139,7 @@ Note, all features of `custom-style` are available when defining styles as part
e.textContent;
}
if (e.textContent) {
styleUtil.forEachStyleRule(styleUtil.rulesForStyle(e), function(rule) {
styleUtil.forEachRule(styleUtil.rulesForStyle(e), function(rule) {
styleTransformer.documentRule(rule);
});
// Allow all custom-styles defined in this turn to register

2
src/lib/style-extends.html
View File

@ -24,7 +24,7 @@ Polymer.StyleExtends = (function() {
transform: function(style) {
var rules = styleUtil.rulesForStyle(style);
var self = this;
styleUtil.forEachStyleRule(rules, function(rule) {
styleUtil.forEachRule(rules, function(rule) {
var map = self._mapRule(rule);
if (rule.parent) {
var m;

99
src/lib/style-properties.html
View File

@ -25,11 +25,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// decorates styles with rule info and returns an array of used style
// property names
decorateStyles: function(styles) {
var self = this, props = {};
var self = this, props = {}, keyframes = [];
styleUtil.forRulesInStyles(styles, function(rule) {
self.decorateRule(rule);
self.collectPropertiesInCssText(rule.propertyInfo.cssText, props);
}, function onKeyframesRule(rule) {
keyframes.push(rule);
});
// Cache all found keyframes rules for later reference:
styles._keyframes = keyframes;
// return this list of property names *consumes* in these styles.
var names = [];
for (var i in props) {
@ -87,7 +91,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var parts = cssText.split(';');
for (var i=0, p; i<parts.length; i++) {
p = parts[i];
if (p.match(this.rx.MIXIN_MATCH) || p.match(this.rx.VAR_MATCH)) {
if (p.match(this.rx.MIXIN_MATCH) ||
p.match(this.rx.VAR_MATCH) ||
this.rx.ANIMATION_MATCH.test(p) ||
styleUtil.isKeyframesSelector(rule)) {
customCssText += p + ';\n';
}
}
@ -181,6 +188,46 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
rule.cssText = output;
},
// Apply keyframe transformations to the cssText of a given rule. The
// keyframeTransforms object is a map of keyframe names to transformer
// functions which take in cssText and spit out transformed cssText.
applyKeyframeTransforms: function(rule, keyframeTransforms) {
var input = rule.cssText;
var output = rule.cssText;
if (rule.hasAnimations == null) {
// Cache whether or not the rule has any animations to begin with:
rule.hasAnimations = this.rx.ANIMATION_MATCH.test(input);
}
// If there are no animations referenced, we can skip transforms:
if (rule.hasAnimations) {
var transform;
// If we haven't transformed this rule before, we iterate over all
// transforms:
if (rule.keyframeNamesToTransform == null) {
rule.keyframeNamesToTransform = [];
for (var keyframe in keyframeTransforms) {
transform = keyframeTransforms[keyframe];
output = transform(input);
// If the transform actually changed the CSS text, we cache the
// transform name for future use:
if (input !== output) {
input = output;
rule.keyframeNamesToTransform.push(keyframe);
}
}
} else {
// If we already have a list of keyframe names that apply to this
// rule, we apply only those keyframe name transforms:
for (var i = 0; i < rule.keyframeNamesToTransform.length; ++i) {
transform = keyframeTransforms[rule.keyframeNamesToTransform[i]];
input = transform(input);
}
output = input;
}
}
rule.cssText = output;
},
// Test if the rules in these styles matches the given `element` and if so,
// collect any custom properties into `props`.
propertyDataFromStyles: function(styles, element) {
@ -256,15 +303,60 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
hostSelector;
var hostRx = new RegExp(this.rx.HOST_PREFIX + rxHostSelector +
this.rx.HOST_SUFFIX);
var keyframeTransforms =
this._elementKeyframeTransforms(element, scopeSelector);
return styleTransformer.elementStyles(element, function(rule) {
self.applyProperties(rule, properties);
if (rule.cssText && !nativeShadow) {
if (!nativeShadow &&
!Polymer.StyleUtil.isKeyframesSelector(rule) &&
rule.cssText) {
// NOTE: keyframe transforms only scope munge animation names, so it
// is not necessary to apply them in ShadowDOM.
self.applyKeyframeTransforms(rule, keyframeTransforms);
self._scopeSelector(rule, hostRx, hostSelector,
element._scopeCssViaAttr, scopeSelector);
}
});
},
_elementKeyframeTransforms: function(element, scopeSelector) {
var keyframesRules = element._styles._keyframes;
var keyframeTransforms = {};
if (!nativeShadow) {
// 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:
for (var i = 0, keyframesRule = keyframesRules[i];
i < keyframesRules.length;
keyframesRule = keyframesRules[++i]) {
this._scopeKeyframes(keyframesRule, scopeSelector);
keyframeTransforms[keyframesRule.keyframesName] =
this._keyframesRuleTransformer(keyframesRule);
}
}
return keyframeTransforms;
},
// Generate a factory for transforming a chunk of CSS text to handle a
// particular scoped keyframes rule.
_keyframesRuleTransformer: function(keyframesRule) {
return function(cssText) {
return cssText.replace(
keyframesRule.keyframesNameRx,
keyframesRule.transformedKeyframesName);
};
},
// Transforms `@keyframes` names to be unique for the current host.
// Example: @keyframes foo-anim -> @keyframes foo-anim-x-foo-0
_scopeKeyframes: function(rule, scopeId) {
rule.keyframesNameRx = new RegExp(rule.keyframesName, 'g');
rule.transformedKeyframesName = rule.keyframesName + '-' + scopeId;
rule.transformedSelector = rule.transformedSelector || rule.selector;
rule.selector = rule.transformedSelector.replace(
rule.keyframesName, rule.transformedKeyframesName);
},
// Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes):
// non-host selector: .a.x-foo -> .x-foo-42 .a.x-foo
// host selector: x-foo.wide -> x-foo.x-foo-42.wide
@ -359,6 +451,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// var(--a, fallback-literal(with-one-nested-parentheses))
VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gi,
VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gi,
ANIMATION_MATCH: /(animation\s*:)|(animation-name\s*:)/,
IS_VAR: /^--/,
BRACKETED: /\{[^}]*\}/g,
HOST_PREFIX: '(?:^|[^.#[:])',

4
src/lib/style-transformer.html
View File

@ -146,9 +146,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// transforms a css rule to a scoped rule.
_transformRule: function(rule, transformer, scope, hostScope) {
var p$ = rule.selector.split(COMPLEX_SELECTOR_SEP);
// we want to skip transformation of rules that appear in keyframes,
// because they are keyframe selectors, not element selectors.
if (!styleUtil.isKeyframesSelector(rule)) {
for (var i=0, l=p$.length, p; (i<l) && (p=p$[i]); i++) {
p$[i] = transformer.call(this, p, scope, hostScope);
}
}
// NOTE: save transformedSelector for subsequent matching of elements
// against selectors (e.g. when calculating style properties)
rule.selector = rule.transformedSelector =

29
src/lib/style-util.html
View File

@ -24,15 +24,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
rules = this.parser.parse(rules);
}
if (callback) {
this.forEachStyleRule(rules, callback);
this.forEachRule(rules, callback);
}
return this.parser.stringify(rules, preserveProperties);
},
forRulesInStyles: function(styles, callback) {
forRulesInStyles: function(styles, styleRuleCallback, keyframesRuleCallback) {
if (styles) {
for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
this.forEachStyleRule(this.rulesForStyle(s), callback);
this.forEachRule(
this.rulesForStyle(s),
styleRuleCallback,
keyframesRuleCallback);
}
}
},
@ -44,21 +47,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return style.__cssRules;
},
forEachStyleRule: function(node, callback) {
// Tests if a rule is a keyframes selector, which looks almost exactly
// like a normal selector but is not (it has nothing to do with scoping
// for example).
isKeyframesSelector: function(rule) {
return rule.parent &&
rule.parent.type === this.ruleTypes.KEYFRAMES_RULE;
},
forEachRule: function(node, styleRuleCallback, keyframesRuleCallback) {
if (!node) {
return;
}
var skipRules = false;
if (node.type === this.ruleTypes.STYLE_RULE) {
callback(node);
} else if (node.type === this.ruleTypes.KEYFRAMES_RULE ||
node.type === this.ruleTypes.MIXIN_RULE) {
styleRuleCallback(node);
} else if (keyframesRuleCallback &&
node.type === this.ruleTypes.KEYFRAMES_RULE) {
keyframesRuleCallback(node);
} else if (node.type === this.ruleTypes.MIXIN_RULE) {
skipRules = true;
}
var r$ = node.rules;
if (r$ && !skipRules) {
for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
this.forEachStyleRule(r, callback);
this.forEachRule(r, styleRuleCallback, keyframesRuleCallback);
}
}
},

60
test/smoke/keyframes.html Normal file
View File

@ -0,0 +1,60 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
<body>
<style is="custom-style">
:root {
--color: blue;
--anim-color: red;
}
.alternative {
--color: green;
--anim-color: blue;
}
</style>
<dom-module id="test-keyframes">
<template><style>
:host {
display: block;
color: var(--color);
animation: foo 3s;
height: 20px;
}
@keyframes foo {
0% {
background: var(--anim-color);
}
100% {
background: yellow;
}
}
</style><content></content></template>
<script>
Polymer({
is: 'test-keyframes'
});
</script>
</dom-module>
<p>Text should be the color blue. Background should animate from the color red to the color yellow, and then become transparent.</p>
<test-keyframes>red</test-keyframes>
<p>Text should be the color green. Background should animate from the color blue to the color yellow, and then become transparent.</p>
<test-keyframes class="alternative">blue</test-keyframes>
</body>

94
test/unit/styling-cross-scope-apply.html
View File

@ -95,6 +95,67 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</script>
</dom-module>
<dom-module id="x-keyframes">
<template>
<style>
:host {
display: block;
position: relative;
border: 10px solid blue;
left: 0px;
/* Prefix required by Safari <= 8 */
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
:host([animated]) {
/* Prefix required by Safari <= 8 */
-webkit-animation-name: x-keyframes-animation;
animation-name: x-keyframes-animation;
}
/* Prefix required by Safari <= 8 */
@-webkit-keyframes x-keyframes-animation {
0% {
left: var(--c1);
}
100% {
left: var(--c2);
@apply(--keyframe-finish);
}
}
@keyframes x-keyframes-animation {
0% {
left: var(--c1);
}
100% {
left: var(--c2);
@apply(--keyframe-finish);
}
}
</style>
x-keyframes
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-keyframes',
properties: {
animated: {
type: Boolean,
value: false,
reflectToAttribute: true
}
}
});
});
</script>
</dom-module>
<dom-module id="x-scope">
<style>
:host {
@ -165,6 +226,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
@apply(--mixin5);
}
#keyframes2 {
--keyframe-finish: {
left: 20px;
};
}
x-child-scope {
padding: 10px;
}
@ -189,6 +256,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div id="mixin4">mixin4</div>
<div id="mixin5">mixin5</div>
<hr>
<x-keyframes id="keyframes1"></x-keyframes>
<x-keyframes id="keyframes2"></x-keyframes>
<x-child-scope id="child"></x-child-scope>
<story-card id="card"></story-card>
<div id="override">override</div>
@ -267,6 +336,31 @@ suite('scoped-styling-apply', function() {
assertComputed(styled.$.child.$.mixin7, '17px');
});
test('mixins apply to @keyframe rules', function(done) {
var xKeyframes1 = styled.$.keyframes1;
var xKeyframes2 = styled.$.keyframes2;
var completed = 0;
[xKeyframes1, xKeyframes2].forEach(function(xKeyframes, index) {
var target = index === 0 ? '10px' : '20px';
var onAnimationEnd = function() {
assert.include(xKeyframes.getComputedStyleValue('left'), target);
xKeyframes.removeEventListener('animationend', onAnimationEnd);
xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = false;
if (++completed > 1) {
done();
}
};
xKeyframes.addEventListener('animationend', onAnimationEnd);
xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = true;
});
});
// TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
// test('mixin values can be overridden by subsequent concrete properties', function() {
// assertComputed(styled.$.override, '19px');

152
test/unit/styling-cross-scope-var.html
View File

@ -23,6 +23,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<x-scope></x-scope>
<dom-module id="x-grand-child-scope">
<template>
<style>
:host {
display: block;
@ -42,8 +43,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
</style>
<template>
<div id="me">x-grand-child-scope</div>
<div id="scope">From x-scope</div>
<div id="child">From x-child-scope</div>
@ -56,6 +55,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-host-property">
<template>
<style>
:host {
display: block;
@ -63,8 +63,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
border: var(--scope-var);
}
</style>
<template>
Host property
</template>
<script>
@ -75,6 +73,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-child-scope">
<template>
<style>
:host {
display: block;
@ -98,8 +97,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var(--gc4-scope);
}
</style>
<template>
<div id="me">x-child-scope</div>
<x-grand-child-scope id="gc1"></x-grand-child-scope>
<x-grand-child-scope id="gc2"></x-grand-child-scope>
@ -114,6 +111,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-overrides">
<template>
<style>
:host {
border: 1px dashed gray;
@ -123,8 +121,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--grand-child-scope-var: var(--rename);
}
</style>
<template>
overrides:
<x-grand-child-scope id="gc1"></x-grand-child-scope>
</template>
@ -136,6 +132,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-overrides2">
<template>
<style>
:host {
border: 1px dashed gray;
@ -148,8 +145,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--grand-child-scope-var: var(--rename);
}
</style>
<template>
overrides:
<x-grand-child-scope id="gc1"></x-grand-child-scope>
</template>
@ -161,14 +156,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-late">
<template>
<style>
:host {
border: var(--late);
display: block;
}
</style>
<template>
late
</template>
<script>
@ -179,6 +173,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-overrides3">
<template>
<style>
:host {
border: 1px dashed gray;
@ -191,8 +186,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--fillin: 16px;
}
</style>
<template>
overrides:
<x-late id="late"></x-late>
</template>
@ -204,6 +197,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-has-def">
<template>
<style>
:host {
border: var(--border, --defaultBorder);
@ -212,8 +206,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: block;
}
</style>
<template>
Element with default variable.
</template>
<script>
@ -224,13 +216,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-has-if">
<template>
<style>
.iffy {
border: var(--scope-var);
}
</style>
<template>
<template is="dom-if" if="{{gogo}}">
<div class="iffy">iffy</div>
</template>
@ -248,13 +239,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-button">
<template>
<style>
:host {
display: block;
border: var(--button-border);
}
</style>
<template>
Button!
</template>
<script>
@ -268,6 +259,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-dynamic">
<template>
<style>
:host {
display: block;
@ -275,7 +267,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
border: var(--dynamic);
}
</style>
<template>
Dynamic
</template>
<script>
@ -287,7 +278,67 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</script>
</dom-module>
<dom-module id="x-keyframes">
<template>
<style>
:host {
display: block;
position: relative;
border: 10px solid blue;
left: 0px;
/* Prefix required by Safari <= 8 */
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
:host([animated]) {
/* Prefix required by Safari <= 8 */
-webkit-animation-name: x-keyframes-animation;
animation-name: x-keyframes-animation;
}
/* Prefix required by Safari <= 8 */
@-webkit-keyframes x-keyframes-animation {
0% {
left: var(--a);
}
100% {
left: var(--b);
}
}
@keyframes x-keyframes-animation {
0% {
left: var(--a);
}
100% {
left: var(--b);
}
}
</style>
x-keyframes
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-keyframes',
properties: {
animated: {
type: Boolean,
value: false,
reflectToAttribute: true
}
}
});
});
</script>
</dom-module>
<dom-module id="x-scope">
<template>
<style>
:host {
x--invalid: 15px solid gray;
@ -389,11 +440,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
border: var(--ws-term)
}
x-keyframes:nth-of-type(2) {
--b: -5px;
}
#endTerm {border: var(--end-term)}
</style>
<template>
<div id="me">x-scope</div>
<x-keyframes id="keyframes"></x-keyframes>
<x-keyframes id="keyframes2"></x-keyframes>
<x-child-scope id="child"></x-child-scope>
<x-child-scope id="child2"></x-child-scope>
<x-overrides id="overrides1a"></x-overrides>
@ -429,6 +484,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<dom-module id="x-inside">
<template>
<style>
:host {
display: inline-block;
@ -438,8 +494,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
background-color: tomato;
}
</style>
<template>
</template>
<script>
HTMLImports.whenReady(function() {
@ -448,10 +502,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
</script>
</dom-module>
</dom-module>
<dom-module id="simple-element">
<dom-module id="simple-element">
<template>
<style>
:host {
display: block;
@ -462,7 +516,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--border: 10px;
}
</style>
<template>
<x-inside id="inner"></x-inside>
</template>
<script>
@ -472,7 +525,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
</script>
</dom-module>
</dom-module>
<style>
.variable-override {
@ -517,6 +571,46 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var styled = document.querySelector('x-scope');
test('variables in @keyframes', function(done) {
var xKeyframes = styled.$.keyframes;
var onAnimationEnd = function() {
assertStylePropertyValue(xKeyframes, 'left', '5px');
xKeyframes.removeEventListener('animationend', onAnimationEnd);
xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = false;
done();
};
assertStylePropertyValue(xKeyframes, '--a', '10px');
assertStylePropertyValue(xKeyframes, '--b', '5px');
xKeyframes.addEventListener('animationend', onAnimationEnd);
xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = true;
});
test('instances of scoped @keyframes', function(done) {
var xKeyframes = styled.$.keyframes2;
var onAnimationEnd = function() {
assertStylePropertyValue(xKeyframes, 'left', '5px');
xKeyframes.removeEventListener('animationend', onAnimationEnd);
xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = false;
done();
};
assertStylePropertyValue(xKeyframes, '--a', '10px');
assertStylePropertyValue(xKeyframes, '--b', '-5px');
xKeyframes.addEventListener('animationend', onAnimationEnd);
xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = true;
});
test('mutiple elements in document', function() {
var e$ = document.querySelectorAll('simple-element');
assertComputed(e$[0].$.inner, '10px');

63
test/unit/styling-scoped-elements.html
View File

@ -1,3 +1,59 @@
<dom-module id="x-keyframes">
<template>
<style>
:host {
display: block;
position: relative;
border: 10px solid blue;
left: 0px;
/* Prefix required by Safari <= 8 */
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
:host([animated]) {
/* Prefix required by Safari <= 8 */
-webkit-animation-name: x-keyframes-animation;
animation-name: x-keyframes-animation;
}
/* Prefix required by Safari <= 8 */
@-webkit-keyframes x-keyframes-animation {
0% {
left: var(--keyframes0, 0px);
}
100% {
left: var(--keyframes100, 10px);
}
}
@keyframes x-keyframes-animation {
0% {
left: var(--keyframes0, 0px);
}
100% {
left: var(--keyframes100, 10px);
}
}
</style>
x-keyframes
</template>
<script>
Polymer({
is: 'x-keyframes',
properties: {
animated: {
type: Boolean,
value: false,
reflectToAttribute: true
}
}
});
</script>
</dom-module>
<dom-module id="x-gchild">
<template>
<!-- styles can be in templates -->
@ -70,12 +126,17 @@
:host {
display: block;
border: 1px solid orange;
--keyframes100: 100px;
}
:host(.wide) {
border-width: 2px;
}
#keyframes2.special {
--keyframes100: 200px;
}
#simple {
border: 3px solid orange;
}
@ -169,6 +230,8 @@
<circle id="circle" cx="12" cy="12" r="10"></circle>
</svg>
<x-scope-class id="scopeClass"></x-scope-class>
<x-keyframes id="keyframes"></x-keyframes>
<x-keyframes id="keyframes2"></x-keyframes>
</template>
</dom-module>
<script>

41
test/unit/styling-scoped.html
View File

@ -164,6 +164,38 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assertComputed(d, '0px');
});
test('keyframes change scope', function(done) {
var xKeyframes = styled.$.keyframes;
var onAnimationEnd = function() {
xKeyframes.removeEventListener('animationend', onAnimationEnd);
xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
assertComputed(xKeyframes, '100px', 'left');
xKeyframes = styled.$.keyframes2;
onAnimationEnd = function() {
xKeyframes.removeEventListener('animationend', onAnimationEnd);
xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
assertComputed(xKeyframes, '200px', 'left');
done();
};
xKeyframes.addEventListener('animationend', onAnimationEnd);
xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
Polymer.dom(xKeyframes).classList.add('special');
xKeyframes.updateStyles();
xKeyframes.animated = true;
};
xKeyframes.addEventListener('animationend', onAnimationEnd);
xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
xKeyframes.animated = true;
assertComputed(xKeyframes, '0px', 'left');
});
test('elements with computed classes', function() {
assertComputed(styled.$.computed, '0px');
styled.aClass = 'computed';
@ -218,10 +250,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('styles shimmed in registration order', function() {
var s$ = document.head.querySelectorAll('style[scope]');
var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 'x-mixed-case',
'x-mixed-case-button', 'x-dynamic-scope', 'x-dynamic-template',
'x-dynamic-svg', 'x-specificity', 'x-overriding',
'x-overriding-0', 'x-specificity-parent-0', 'x-specificity-nested-0'];
var expected = ['x-keyframes', 'x-keyframes-1', 'x-keyframes-0', 'x-gchild', 'x-child2',
'x-styled', 'x-button', 'x-mixed-case', 'x-mixed-case-button',
'x-dynamic-scope', 'x-dynamic-template', 'x-dynamic-svg',
'x-specificity', 'x-overriding', 'x-overriding-0',
'x-specificity-parent-0', 'x-specificity-nested-0'];
var actual = [];
for (var i=0; i<s$.length; i++) {
actual.push(s$[i].getAttribute('scope'));