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

…48436)

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

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

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]])
+         ]);
+       });
+     });
 });
 })();