From 1329e0f1ae4f3c4753cee218598aa8adf0d06650 Mon Sep 17 00:00:00 2001
From: Martin Staffa <mjstaffa@googlemail.com>
Date: Wed, 2 Dec 2015 16:39:14 +0100
Subject: [PATCH] fix($animate): allow animations when pinned element is parent
 element

Previously, the animate queue would only detect pinned elements when
they were the same element as the to-be-animated element.

Related #12617
Closes #13466
---
 src/ngAnimate/animateQueue.js |  1 +
 test/ngAnimate/animateSpec.js | 50 ++++++++++++++++++++++++-----------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
index 0fdadd508609..e024c831cf3c 100644
--- a/src/ngAnimate/animateQueue.js
+++ b/src/ngAnimate/animateQueue.js
@@ -586,6 +586,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
             parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
             if (parentHost) {
               parentElement = parentHost;
+              rootElementDetected = true;
             }
           }
         }
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 713170820d2c..dc665ead5398 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -1448,28 +1448,46 @@ describe("animations", function() {
     }));
 
 
-    it('should allow an element to be pinned elsewhere and still be available in animations',
-      inject(function($animate, $compile, $document, $rootElement, $rootScope) {
+    they('should animate an element inside a pinned element that is the $prop element',
+      ['same', 'parent', 'grandparent'],
+      function(elementRelation) {
+        inject(function($animate, $compile, $document, $rootElement, $rootScope) {
 
-      var innerParent = jqLite('<div></div>');
-      jqLite($document[0].body).append(innerParent);
-      innerParent.append($rootElement);
+        var pinElement, animateElement;
 
-      var element = jqLite('<div></div>');
-      jqLite($document[0].body).append(element);
+        var innerParent = jqLite('<div></div>');
+        jqLite($document[0].body).append(innerParent);
+        innerParent.append($rootElement);
 
-      $animate.addClass(element, 'red');
-      $rootScope.$digest();
-      expect(capturedAnimation).toBeFalsy();
+        switch (elementRelation) {
+          case 'same':
+            pinElement = jqLite('<div id="animate"></div>');
+            break;
+          case 'parent':
+            pinElement = jqLite('<div><div id="animate"></div></div>');
+            break;
+          case 'grandparent':
+            pinElement = jqLite('<div><div><div id="animate"></div></div></div>');
+            break;
+        }
 
-      $animate.pin(element, $rootElement);
+        jqLite($document[0].body).append(pinElement);
+        animateElement = jqLite($document[0].getElementById('animate'));
 
-      $animate.addClass(element, 'blue');
-      $rootScope.$digest();
-      expect(capturedAnimation).toBeTruthy();
+        $animate.addClass(animateElement, 'red');
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
 
-      dealoc(element);
-    }));
+        // Pin the element to the app root to enable animations
+        $animate.pin(pinElement, $rootElement);
+
+        $animate.addClass(animateElement, 'blue');
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeTruthy();
+
+        dealoc(pinElement);
+      });
+    });
 
     it('should adhere to the disabled state of the hosted parent when an element is pinned',
       inject(function($animate, $compile, $document, $rootElement, $rootScope) {