fix(animations): make sure falsy values are added to _globalTimelineS…

…tyles (#46863)

style values get added to the `_globalTimelineStyles` map in order to keep
them so that they can be used across different timelines

`_globalTimelineStyles` was previously a plain object but has been
refactored to a map in #44482, as part of the update a check has been
changed from a ternary operation to an or (||), causing falsy values (as 0)
not to be added to the map anymore, apply the nullish coalescing operator (??)
instead to make sure only `undefined` and `null` are filtered out

also since this aspect was clearly not covered by tests, add a new test
to ensure that such regression doesn't happen in the future

resolves #46833

PR Close #46863

packages/animations/browser/src/dsl/animation_timeline_builder.ts

@@ -730,7 +730,7 @@ export class TimelineBuilder {
       const val = interpolateParams(value, params, errors);
       this._pendingStyles.set(prop, val);
       if (!this._localTimelineStyles.has(prop)) {
-        this._backFill.set(prop, this._globalTimelineStyles.get(prop) || AUTO_STYLE);
+        this._backFill.set(prop, this._globalTimelineStyles.get(prop) ?? AUTO_STYLE);
       }
       this._updateStyle(prop, val);
     }

packages/core/test/animation/animation_integration_spec.ts

@@ -3981,6 +3981,45 @@ describe('animation tests', function() {
     expect(pcp.duration).toEqual(7333);  // 2s + 3s + 2000 + 111 + 222
   });
 
+  it('should keep (transition from/to) styles defined in different timelines', () => {
+    @Component({
+      selector: 'cmp',
+      template: '<div @animation *ngIf="exp"></div>',
+      animations: [trigger(
+          'animation',
+          [transition(':enter', [group([
+                        style({opacity: 0, color: 'red'}),
+                        // Note: the objective of this test is to make sure the animation
+                        // transitions from opacity 0 and color red to opacity 1 and color blue,
+                        // even though the two styles are defined in different timelines
+                        animate(500, style({opacity: 1, color: 'blue'})),
+                      ])])])]
+    })
+    class Cmp {
+      exp: boolean = false;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+
+    const engine = TestBed.inject(ɵAnimationEngine);
+    const fixture = TestBed.createComponent(Cmp);
+    const cmp = fixture.componentInstance;
+    cmp.exp = true;
+
+    fixture.detectChanges();
+    engine.flush();
+
+    const players = getLog();
+    expect(players.length).toEqual(1);
+
+    const [player] = players;
+
+    expect(player.keyframes).toEqual([
+      new Map<string, string|number>([['opacity', '0'], ['color', 'red'], ['offset', 0]]),
+      new Map<string, string|number>([['opacity', '1'], ['color', 'blue'], ['offset', 1]]),
+    ]);
+  });
+
   describe('errors for not using the animation module', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({