fix(animations): allow animations on elements in the shadow DOM

When determining whether to run an animation, the `TransitionAnimationPlayer`
checks to see if a DOM element is attached to the document. This is done by
checking to see if the element is "contained" by the document body node.

Previously, if the element was inside a shadow DOM, the engine would
determine that the element was not attached, even if the shadow DOM's
host was attached to the document. This commit updates the `containsElement()`
method on `AnimationDriver` implementations to also include shadow DOM
elements as being contained if their shadow host element is contained.

Further, when using CSS keyframes to trigger animations, the styling
was always added to the `head` element of the document, even for
animations on elements within a shadow DOM. This meant that those
elements never receive those styles and the animation would not run.
This commit updates the insertion of these styles so that they are added,
to the element's "root node", which is the nearest shadow DOM host, or the
`head` of the document if the element is not in a shadow DOM.

Closes angular#25672

goldens/size-tracking/aio-payloads.json

@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3033,
-        "main-es2015": 451600,
+        "main-es2015": 452289,
         "polyfills-es2015": 52215
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3153,
-        "main-es2015": 437306,
+        "main-es2015": 437924,
         "polyfills-es2015": 52493
       }
     }

packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts

@@ -20,7 +20,6 @@ const TAB_SPACE = ' ';
 
 export class CssKeyframesDriver implements AnimationDriver {
   private _count = 0;
-  private readonly _head: any = document.querySelector('head');
 
   validateStyleProperty(prop: string): boolean {
     return validateStyleProperty(prop);
@@ -107,7 +106,8 @@ export class CssKeyframesDriver implements AnimationDriver {
 
     const animationName = `${KEYFRAMES_NAME_PREFIX}${this._count++}`;
     const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
-    document.querySelector('head')!.appendChild(kfElm);
+    const nodeToAppendKfElm = findNodeToAppendKfElm(element);
+    nodeToAppendKfElm.appendChild(kfElm);
 
     const specialStyles = packageNonAnimatableStyles(element, keyframes);
     const player = new CssKeyframesPlayer(
@@ -118,6 +118,18 @@ export class CssKeyframesDriver implements AnimationDriver {
   }
 }
 
+// TODO: Once we drop IE 11 support, method can be simplified
+// to the native browser function `getRootNode`
+function findNodeToAppendKfElm(element: any): Node {
+  while (element && element !== document.documentElement) {
+    if (element.shadowRoot) {
+      return element.shadowRoot;
+    }
+    element = element.parentNode || element.host;
+  }
+  return document.querySelector('head')!;
+}
+
 function flattenKeyframesIntoStyles(keyframes: null|{[key: string]: any}|
                                     {[key: string]: any}[]): {[key: string]: any} {
   let flatKeyframes: {[key: string]: any} = {};

packages/animations/browser/src/render/shared.ts

@@ -161,9 +161,19 @@ let _query: (element: any, selector: string, multi: boolean) => any[] =
 const _isNode = isNode();
 if (_isNode || typeof Element !== 'undefined') {
   // this is well supported in all browsers
-  _contains = (elm1: any, elm2: any) => {
-    return elm1.contains(elm2) as boolean;
-  };
+  if (!isBrowser()) {
+    _contains = (elm1, elm2) => elm1.contains(elm2);
+  } else {
+    _contains = (elm1, elm2) => {
+      while (elm2 && elm2 !== document.documentElement) {
+        if (elm2 === elm1) {
+          return true;
+        }
+        elm2 = elm2.parentNode || elm2.host;  // consider host to support shadow DOM
+      }
+      return false;
+    };
+  }
 
   _matches = (() => {
     if (_isNode || Element.prototype.matches) {

packages/animations/browser/test/BUILD.bazel

@@ -24,6 +24,7 @@ ts_library(
         "//packages/animations/browser/testing",
         "//packages/core",
         "//packages/core/testing",
+        "//packages/platform-browser/testing",
     ],
 )
 

packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts

@@ -5,7 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {fakeAsync, flushMicrotasks} from '@angular/core/testing';
+
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
 import {CssKeyframesDriver} from '../../../src/render/css_keyframes/css_keyframes_driver';
 import {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
@@ -104,7 +106,7 @@ describe('CssKeyframesDriver tests', () => {
       expect(easing).toEqual('ease-out');
     });
 
-    it('should animate until the `animationend` method is emitted, but stil retain the <style> method and the element animation details',
+    it('should animate until the `animationend` method is emitted, but still retain the <style> method and the element animation details',
        fakeAsync(() => {
          // IE11 cannot create an instanceof AnimationEvent
          if (!supportsAnimationEventCreation()) return;
@@ -144,7 +146,7 @@ describe('CssKeyframesDriver tests', () => {
          assertElementExistsInDom(matchingStyleElm, true);
        }));
 
-    it('should animate until finish() is called, but stil retain the <style> method and the element animation details',
+    it('should animate until finish() is called, but still retain the <style> method and the element animation details',
        fakeAsync(() => {
          const elm = createElement();
          const animator = new CssKeyframesDriver();
@@ -295,7 +297,7 @@ describe('CssKeyframesDriver tests', () => {
        () => {
          // IE cannot modify the position of an animation...
          // note that this feature is only for testing purposes
-         if (isIE()) return;
+         if (browserDetection.isIE) return;
 
          const elm = createElement();
          elm.style.border = '1px solid black';
@@ -369,6 +371,32 @@ describe('CssKeyframesDriver tests', () => {
          expect(k2).toEqual({width: '400px', height: '400px', offset: 0.5});
          expect(k3).toEqual({width: '500px', height: '500px', offset: 1});
        });
+
+    if (browserDetection.supportsShadowDom) {
+      it('should append <style> in shadow DOM root element', fakeAsync(() => {
+           const hostElement = createElement();
+           const shadowRoot = hostElement.attachShadow({mode: 'open'});
+           const elementToAnimate = createElement();
+           shadowRoot.appendChild(elementToAnimate);
+           const animator = new CssKeyframesDriver();
+
+           assertExistingAnimationDuration(elementToAnimate, 0);
+           expect(shadowRoot.querySelector('style')).toBeFalsy();
+
+           const player = animator.animate(
+               elementToAnimate,
+               [
+                 {width: '0px', offset: 0},
+                 {width: '200px', offset: 1},
+               ],
+               1234, 0, 'ease-out');
+
+           player.play();
+
+           assertExistingAnimationDuration(elementToAnimate, 1234);
+           assertElementExistsInDom(shadowRoot.querySelector('style'), true);
+         }));
+    }
   });
 });
 
@@ -391,8 +419,3 @@ function parseElementAnimationStyle(element: any):
   const animationName = style.animationName;
   return {duration, delay, easing, animationName};
 }
-
-function isIE() {
-  // note that this only applies to older IEs (not edge)
-  return (window as any).document['documentMode'] ? true : false;
-}

packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts

@@ -5,8 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
+
 import {CssKeyframesPlayer} from '../../../src/render/css_keyframes/css_keyframes_player';
-import {DOMAnimation} from '../../../src/render/web_animations/dom_animation';
 import {WebAnimationsDriver} from '../../../src/render/web_animations/web_animations_driver';
 import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animations_player';
 
@@ -49,6 +50,21 @@ import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animat
         expect(player instanceof WebAnimationsPlayer).toBeTruthy();
       });
     });
+
+    if (browserDetection.supportsShadowDom) {
+      describe('when animation is inside a shadow DOM', () => {
+        it('should consider an element inside the shadow DOM to be contained by the document body',
+           (() => {
+             const hostElement = createElement();
+             const shadowRoot = hostElement.attachShadow({mode: 'open'});
+             const elementToAnimate = createElement();
+             shadowRoot.appendChild(elementToAnimate);
+             document.body.appendChild(hostElement);
+             const animator = new WebAnimationsDriver();
+             expect(animator.containsElement(document.body, elementToAnimate)).toBeTrue();
+           }));
+      });
+    }
   });
 }
 

packages/core/test/linker/projection_integration_spec.ts

@@ -10,6 +10,7 @@ import {CommonModule, ɵgetDOM as getDOM} from '@angular/common';
 import {Component, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Injector, Input, NgModule, NO_ERRORS_SCHEMA, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {modifiedInIvy} from '@angular/private/testing';
 
@@ -490,7 +491,7 @@ describe('projection', () => {
     expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
   });
 
-  if (supportsShadowDOM()) {
+  if (browserDetection.supportsShadowDom) {
     it('should support shadow dom content projection and isolate styles per component', () => {
       TestBed.configureTestingModule({declarations: [SimpleShadowDom1, SimpleShadowDom2]});
       TestBed.overrideComponent(MainComp, {
@@ -1042,7 +1043,3 @@ class CmpA1 {
 })
 class CmpA2 {
 }
-
-function supportsShadowDOM(): boolean {
-  return typeof (<any>document.body).attachShadow !== 'undefined';
-}