From 36ce0afff6839815e728c91c9d09d9ceab50e64d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Wed, 15 Mar 2017 09:24:09 -0700
Subject: [PATCH] fix(animations): support multiple state names per state()
 call (#15147)

Closes #14732
Closes #15147
---
 packages/animations/browser/src/dsl/animation_trigger.ts | 3 ++-
 .../browser/test/dsl/animation_trigger_spec.ts           | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/animations/browser/src/dsl/animation_trigger.ts b/packages/animations/browser/src/dsl/animation_trigger.ts
index 397b779c16..dcf012cde5 100644
--- a/packages/animations/browser/src/dsl/animation_trigger.ts
+++ b/packages/animations/browser/src/dsl/animation_trigger.ts
@@ -86,7 +86,8 @@ class AnimationTriggerVisitor implements AnimationDslVisitor {
   }
 
   visitState(ast: AnimationStateMetadata, context: any): any {
-    context.states[ast.name] = normalizeStyles(ast.styles.styles);
+    const styles = normalizeStyles(ast.styles.styles);
+    ast.name.split(/\s*,\s*/).forEach(name => { context.states[name] = styles; });
   }
 
   visitTransition(ast: AnimationTransitionMetadata, context: any): any {
diff --git a/packages/animations/browser/test/dsl/animation_trigger_spec.ts b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
index 0c316dc85a..b0a67762b8 100644
--- a/packages/animations/browser/test/dsl/animation_trigger_spec.ts
+++ b/packages/animations/browser/test/dsl/animation_trigger_spec.ts
@@ -51,6 +51,15 @@ export function main() {
         expect(result.transitionFactories.length).toEqual(2);
       });
 
+      it('should allow multiple state values to use the same styles', () => {
+        const result = makeTrigger('name', [
+          state('on, off', style({width: 50})), transition('on => off', animate(1000)),
+          transition('off => on', animate(1000))
+        ]);
+
+        expect(result.states).toEqual({'on': {width: 50}, 'off': {width: 50}});
+      });
+
       it('should find the first transition that matches', () => {
         const result = makeTrigger(
             'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);