test(aio): disable DocViewer animations during e2e tests

aio/e2e/app.po.ts

@@ -29,7 +29,10 @@ export class SitePage {
   locationPath() { return browser.executeScript('return document.location.pathname') as promise.Promise<string>; }
 
   navigateTo(pageUrl) {
-    return browser.get('/' + pageUrl).then(() => browser.waitForAngular());
+    // Navigate to the page, disable animations, and wait for Angular.
+    return browser.get('/' + pageUrl)
+        .then(() => browser.executeScript('document.body.classList.add(\'no-animations\')'))
+        .then(() => browser.waitForAngular());
   }
 
   getDocViewerText() {

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -176,6 +176,14 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
       return () => cancelAnimationFrame(rafId);
     });
 
+    // Get the actual transition duration (taking global styles into account).
+    // According to the [CSSOM spec](https://drafts.csswg.org/cssom/#serializing-css-values),
+    // `time` values should be returned in seconds.
+    const getActualDuration = (elem: HTMLElement) => {
+      const cssValue = getComputedStyle(elem).transitionDuration;
+      const seconds = Number(cssValue.replace(/s$/, ''));
+      return 1000 * seconds;
+    };
     const animateProp =
         (elem: HTMLElement, prop: string, from: string, to: string, duration = 333) => {
           elem.style.transition = '';
@@ -189,7 +197,7 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
                     .switchMap(() => raf$).do(() => elem.style[prop] = from)
                     .switchMap(() => raf$).do(() => elem.style.transition = `all ${duration}ms ease-in-out`)
                     .switchMap(() => raf$).do(() => elem.style[prop] = to)
-                    .switchMap(() => timer(duration)).switchMap(() => this.void$);
+                    .switchMap(() => timer(getActualDuration(elem))).switchMap(() => this.void$);
         };
 
     const animateLeave = (elem: HTMLElement) => animateProp(elem, 'opacity', '1', '0.25');

aio/src/styles/1-layouts/_doc-viewer.scss

@@ -0,0 +1,4 @@
+.no-animations aio-doc-viewer > * {
+  // Disable view transition animations.
+  transition: none !important;
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -4,6 +4,7 @@
 
 @import 'api-page';
 @import 'content-layout';
+@import 'doc-viewer';
 @import 'footer';
 @import 'layout-global';
 @import 'marketing-layout';