From fb0bd2e3bc1cf36ce23dbfe046582f18000c1879 Mon Sep 17 00:00:00 2001
From: Martin Staffa <mjstaffa@googlemail.com>
Date: Mon, 23 Nov 2015 17:41:11 +0100
Subject: [PATCH] fix($animateCss): consider options.delay value for closing
 timeout

Previously, options.delay was only considered when a class added an
extra transition style (which leads to style recalculation).

Fixes #13355
Closes #13363
---
 src/ngAnimate/animateCss.js      |  7 +++-
 test/ngAnimate/animateCssSpec.js | 68 ++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
index 3b61bec69c2e..55e7151fece6 100644
--- a/src/ngAnimate/animateCss.js
+++ b/src/ngAnimate/animateCss.js
@@ -622,7 +622,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       }
 
       if (options.delay != null) {
-        var delayStyle = parseFloat(options.delay);
+        var delayStyle;
+        if (typeof options.delay !== "boolean") {
+          delayStyle = parseFloat(options.delay);
+          // number in options.delay means we have to recalculate the delay for the closing timeout
+          maxDelay = Math.max(delayStyle, 0);
+        }
 
         if (flags.applyTransitionDelay) {
           temporaryStyles.push(getCssDelayStyle(delayStyle));
diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
index a708d0f6e888..3e03dcfeef89 100644
--- a/test/ngAnimate/animateCssSpec.js
+++ b/test/ngAnimate/animateCssSpec.js
@@ -1234,6 +1234,74 @@ describe("ngAnimate $animateCss", function() {
             $timeout.flush();
           }).not.toThrow();
         }));
+
+        it("should consider a positive options.delay value for the closing timeout",
+          inject(function($animateCss, $rootElement, $timeout, $document) {
+
+          var element = jqLite('<div></div>');
+          $rootElement.append(element);
+          jqLite($document[0].body).append($rootElement);
+
+          var options = {
+            delay: 3,
+            duration: 3,
+            to: {
+              height: '100px'
+            }
+          };
+
+          var animator = $animateCss(element, options);
+
+          animator.start();
+          triggerAnimationStartFrame();
+
+          // At this point, the animation should still be running (closing timeout is 7500ms ... duration * 1.5 + delay => 7.5)
+          $timeout.flush(7000);
+
+          expect(element.css(prefix + 'transition-delay')).toBe('3s');
+          expect(element.css(prefix + 'transition-duration')).toBe('3s');
+
+          // Let's flush the remaining amout of time for the timeout timer to kick in
+          $timeout.flush(500);
+
+          dump(element.attr('style'));
+          expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
+          expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
+        }));
+
+        it("should ignore a boolean options.delay value for the closing timeout",
+          inject(function($animateCss, $rootElement, $timeout, $document) {
+
+          var element = jqLite('<div></div>');
+          $rootElement.append(element);
+          jqLite($document[0].body).append($rootElement);
+
+          var options = {
+            delay: true,
+            duration: 3,
+            to: {
+              height: '100px'
+            }
+          };
+
+          var animator = $animateCss(element, options);
+
+          animator.start();
+          triggerAnimationStartFrame();
+
+          // At this point, the animation should still be running (closing timeout is 4500ms ... duration * 1.5 => 4.5)
+          $timeout.flush(4000);
+
+          expect(element.css(prefix + 'transition-delay')).toBeOneOf('initial', '0s');
+          expect(element.css(prefix + 'transition-duration')).toBe('3s');
+
+          // Let's flush the remaining amout of time for the timeout timer to kick in
+          $timeout.flush(500);
+
+          expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
+          expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
+        }));
+
       });
 
       describe("getComputedStyle", function() {