fix(animations): fix incorrect handling of camel-case css properties (#48436)

dario-piotrowicz · thePunderWoman · commit 6c1064c72f7d · 2022-12-12T15:17:45.000-08:00
fix the issue of camel-case properties not being handled correctly in state transition causing them not to be applied to the element resolves #48246 PR Close #48436
diff --git a/packages/animations/browser/src/dsl/animation_transition_factory.ts b/packages/animations/browser/src/dsl/animation_transition_factory.ts
@@ -191,7 +191,7 @@ export class AnimationStateStyles {
           }
           const normalizedProp = this.normalizer.normalizePropertyName(prop, errors);
           val = this.normalizer.normalizeStyleValue(prop, normalizedProp, val, errors);
-          finalStyles.set(normalizedProp, val);
+          finalStyles.set(prop, val);
         });
       }
     });
diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -567,6 +567,74 @@ describe('animation integration tests using web animations', function() {
     expect(elm.style.getPropertyValue('width')).toEqual('300px');
     expect(elm.style.getPropertyValue('font-size')).toEqual('14px');
   });
+
+  it('should apply correct state transitions for both CamelCase and kebab-case CSS properties',
+     () => {
+       @Component({
+         selector: 'ani-cmp',
+         template: `
+          <div id="camelCaseDiv" [@camelCaseTrigger]="status"></div>
+          <div id="kebab-case-div" [@kebab-case-trigger]="status"></div>
+        `,
+         animations: [
+           trigger(
+               'camelCaseTrigger',
+               [
+                 state('active', style({
+                         'backgroundColor': 'green',
+                       })),
+                 transition(
+                     'inactive => active',
+                     [
+                       style({
+                         'backgroundColor': 'red',
+                       }),
+                       animate(500),
+                     ]),
+               ]),
+           trigger(
+               'kebab-case-trigger',
+               [
+                 state('active', style({
+                         'background-color': 'green',
+                       })),
+                 transition(
+                     'inactive => active',
+                     [
+                       style({
+                         'background-color': 'red',
+                       }),
+                       animate(500),
+                     ]),
+               ]),
+         ]
+       })
+       class Cmp {
+         public status: 'active'|'inactive' = 'inactive';
+       }
+
+       TestBed.configureTestingModule({declarations: [Cmp]});
+
+       const engine = TestBed.inject(ɵAnimationEngine);
+       const fixture = TestBed.createComponent(Cmp);
+       const cmp = fixture.componentInstance;
+       fixture.detectChanges();
+
+       cmp.status = 'active';
+       fixture.detectChanges();
+       engine.flush();
+
+       expect(engine.players.length).toEqual(2);
+       const [camelCaseWebPlayer, kebabCaseWebPlayer] = engine.players.map(
+           player => (player as TransitionAnimationPlayer).getRealPlayer() as ɵWebAnimationsPlayer);
+
+       [camelCaseWebPlayer, kebabCaseWebPlayer].forEach(webPlayer => {
+         expect(webPlayer.keyframes).toEqual([
+           new Map<string, string|number>([['backgroundColor', 'red'], ['offset', 0]]),
+           new Map<string, string|number>([['backgroundColor', 'green'], ['offset', 1]])
+         ]);
+       });
+     });
 });
 })();
 

Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,7 @@ export class AnimationStateStyles {`
`191`	`191`	`}`
`192`	`192`	`const normalizedProp = this.normalizer.normalizePropertyName(prop, errors);`
`193`	`193`	`val = this.normalizer.normalizeStyleValue(prop, normalizedProp, val, errors);`
`194`		`- finalStyles.set(normalizedProp, val);`
	`194`	`+ finalStyles.set(prop, val);`
`195`	`195`	`});`
`196`	`196`	`}`
`197`	`197`	`});`