Commit b9f2482

styleUtil.forEachRule(styleUtil.rulesForStyle(e), function(rule) {

styleUtil.forEachRule(rules, function(rule) {

source.selector = (source.selector && source.selector + ',\n') +

var self = this, props = {}, keyframes = [];

}, function onKeyframesRule(rule) {

keyframes.push(rule);

// Cache all found keyframes rules for later reference:

styles._keyframes = keyframes;

if (p.match(this.rx.MIXIN_MATCH) ||

p.match(this.rx.VAR_MATCH) ||

this.rx.ANIMATION_MATCH.test(p) ||

styleUtil.isKeyframesSelector(rule)) {

// 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;

},

var keyframeTransforms =

this._elementKeyframeTransforms(element, scopeSelector);

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);

_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);

},

ANIMATION_MATCH: /(animation\s*:)|(animation-name\s*:)/,

// 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);

}

this.forEachRule(rules, callback);

forRulesInStyles: function(styles, styleRuleCallback, keyframesRuleCallback) {

this.forEachRule(

this.rulesForStyle(s),

styleRuleCallback,

keyframesRuleCallback);

// 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) {

styleRuleCallback(node);

} else if (keyframesRuleCallback &&

node.type === this.ruleTypes.KEYFRAMES_RULE) {

keyframesRuleCallback(node);

} else if (node.type === this.ruleTypes.MIXIN_RULE) {

this.forEachRule(r, styleRuleCallback, keyframesRuleCallback);

<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../polymer.html">

<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>