From 86ffacf7ce4ed669aaeb6593c9b3a2aac17825a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Mon, 18 Sep 2017 14:47:43 -0700
Subject: [PATCH] feat(animations): support negative query option values

closes #19259
---
 .../src/dsl/animation_timeline_builder.ts     |  3 +-
 .../animation_query_integration_spec.ts       | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/animations/browser/src/dsl/animation_timeline_builder.ts b/packages/animations/browser/src/dsl/animation_timeline_builder.ts
index f0332c9e5b..51cd604c22 100644
--- a/packages/animations/browser/src/dsl/animation_timeline_builder.ts
+++ b/packages/animations/browser/src/dsl/animation_timeline_builder.ts
@@ -558,7 +558,8 @@ export class AnimationTimelineContext {
       const multi = limit != 1;
       let elements = this._driver.query(this.element, selector, multi);
       if (limit !== 0) {
-        elements = elements.slice(0, limit);
+        elements = limit < 0 ? elements.slice(elements.length + limit, elements.length) :
+                               elements.slice(0, limit);
       }
       results.push(...elements);
     }
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
index a0ebbc9a80..a414458014 100644
--- a/packages/core/test/animation/animation_query_integration_spec.ts
+++ b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -1762,6 +1762,56 @@ export function main() {
           expect(players[0].element.innerText.trim()).toEqual('a');
           expect(players[1].element.innerText.trim()).toEqual('b');
         });
+
+        it('should support negative limit values by pulling in elements from the end of the query',
+           () => {
+             @Component({
+               selector: 'cmp',
+               template: `
+             <div [@myAnimation]="exp">
+              <div *ngFor="let item of items" class="item">
+                {{ item }}
+              </div>
+             </div>
+          `,
+               animations: [
+                 trigger(
+                     'myAnimation',
+                     [
+                       transition(
+                           '* => go',
+                           [
+                             query(
+                                 '.item',
+                                 [
+                                   style({opacity: 0}),
+                                   animate('1s', style({opacity: 1})),
+                                 ],
+                                 {limit: -3}),
+                           ]),
+                     ]),
+               ]
+             })
+             class Cmp {
+               public exp: any;
+               public items: any[] = [];
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.items = ['a', 'b', 'c', 'd', 'e'];
+             fixture.detectChanges();
+
+             cmp.exp = 'go';
+             fixture.detectChanges();
+
+             const players = getLog() as any[];
+             expect(players.length).toEqual(3);
+             expect(players[0].element.innerText.trim()).toEqual('c');
+             expect(players[1].element.innerText.trim()).toEqual('d');
+             expect(players[2].element.innerText.trim()).toEqual('e');
+           });
       });
     });