honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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 #25672

PR Close #40134
This commit is contained in:
jeripeierSBB 2020-12-15 17:40:47 +01:00 committed by Andrew Kushnir
parent 6bceb709df
commit a99aa29040
7 changed files with 77 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
goldens/size-tracking/aio-payloads.json
View File

@ -12,7 +12,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 3033,
"main-es2015": 452892,
"main-es2015": 453111,
"polyfills-es2015": 55230
}
}
@ -21,7 +21,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 3153,
"main-es2015": 438598,
"main-es2015": 438824,
"polyfills-es2015": 55230
}
}

12
packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts
View File

@ -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 = findNodeToAppendKeyframeElement(element);
nodeToAppendKfElm.appendChild(kfElm);
const specialStyles = packageNonAnimatableStyles(element, keyframes);
const player = new CssKeyframesPlayer(
@ -118,6 +118,14 @@ export class CssKeyframesDriver implements AnimationDriver {
}
}
function findNodeToAppendKeyframeElement(element: any): Node {
const rootNode = element.getRootNode?.();
if (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot) {
return rootNode;
}
return document.head;
}
function flattenKeyframesIntoStyles(keyframes: null|{[key: string]: any}|
{[key: string]: any}[]): {[key: string]: any} {
let flatKeyframes: {[key: string]: any} = {};

17
packages/animations/browser/src/render/shared.ts
View File

@ -160,10 +160,19 @@ let _query: (element: any, selector: string, multi: boolean) => any[] =
// and utility methods exist.
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) {

1
packages/animations/browser/test/BUILD.bazel
View File

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

41
packages/animations/browser/test/render/css_keyframes/css_keyframes_driver_spec.ts
View File

@ -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;
}

18
packages/animations/browser/test/render/web_animations/web_animations_driver_spec.ts
View File

@ -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();
}));
});
}
});
}

7
packages/core/test/linker/projection_integration_spec.ts
View File

@ -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';
}