fix(ngAnimate): ensure anchoring uses body as a container when needed

matsko · matsko · commit 240d5896ecdf · 2015-09-22T12:49:28.000-07:00
Prior to this fix anchoring would allow for a container to be a document node or something higher beyond the body tag. This patch makes it fall back to body incase the rootElement node exists as a parent ancestor. Closes angular#12872
diff --git a/src/ngAnimate/animateCssDriver.js b/src/ngAnimate/animateCssDriver.js
@@ -9,6 +9,10 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
   var NG_OUT_ANCHOR_CLASS_NAME = 'ng-anchor-out';
   var NG_IN_ANCHOR_CLASS_NAME = 'ng-anchor-in';
 
+  function isDocumentFragment(node) {
+    return node.parentNode && node.parentNode.nodeType === 11;
+  }
+
   this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$sniffer', '$$jqLite', '$document',
        function($animateCss,   $rootScope,   $$AnimateRunner,   $rootElement,   $sniffer,   $$jqLite,   $document) {
 
@@ -18,7 +22,12 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
     var bodyNode = $document[0].body;
     var rootNode = getDomNode($rootElement);
 
-    var rootBodyElement = jqLite(bodyNode.parentNode === rootNode ? bodyNode : rootNode);
+    var rootBodyElement = jqLite(
+      // this is to avoid using something that exists outside of the body
+      // we also special case the doc fragement case because our unit test code
+      // appends the $rootElement to the body after the app has been bootstrapped
+      isDocumentFragment(rootNode) || bodyNode.contains(rootNode) ? rootNode : bodyNode
+    );
 
     var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
 
diff --git a/test/ngAnimate/animateCssDriverSpec.js b/test/ngAnimate/animateCssDriverSpec.js
@@ -129,8 +129,14 @@ describe("ngAnimate $$animateCssDriver", function() {
           $rootElement.append(from);
           $rootElement.append(to);
 
-          // we need to do this so that style detection works
-          jqLite($document[0].body).append($rootElement);
+          var doc = $document[0];
+
+          // there is one test in here that expects the rootElement
+          // to superceed the body node
+          if (!$rootElement[0].contains(doc.body)) {
+            // we need to do this so that style detection works
+            jqLite(doc.body).append($rootElement);
+          }
         };
       }));
 
@@ -975,6 +981,39 @@ describe("ngAnimate $$animateCssDriver", function() {
 
         expect(completed).toBe(true);
       }));
+
+      it("should use <body> as the element container if the rootElement exists outside of the <body> tag", function() {
+        module(function($provide) {
+          $provide.factory('$rootElement', function($document) {
+            return jqLite($document[0].querySelector('html'));
+          });
+        });
+        inject(function($rootElement, $rootScope, $animate, $document) {
+          ss.addRule('.ending-element', 'width:9999px; height:6666px; display:inline-block;');
+
+          var fromAnchor = jqLite('<div></div>');
+          from.append(fromAnchor);
+
+          var toAnchor = jqLite('<div></div>');
+          to.append(toAnchor);
+
+          $rootElement.append(fromAnchor);
+          $rootElement.append(toAnchor);
+
+          var completed = false;
+          driver({
+            from: fromAnimation,
+            to: toAnimation,
+            anchors: [{
+              'out': fromAnchor,
+              'in': toAnchor
+            }]
+          }).start();
+
+          var clone = captureLog[2].element[0];
+          expect(clone.parentNode).toBe($document[0].body);
+        });
+      });
     });
   });
 });
