From 8ebac32e4d413ee37374e12945bb92fbe486d57e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 11:44:45 -0700
Subject: [PATCH 01/16] remove neon-animation dependency

---
 README.md              |  42 +++++--
 bower.json             |   4 -
 demo/index.html        |  35 +++++-
 paper-dialog.d.ts      |  61 ++++++++--
 paper-dialog.html      | 221 +++++++++++++++++++++++++++-------
 test/paper-dialog.html | 263 +++++++++++++++++++++++++++--------------
 6 files changed, 465 insertions(+), 161 deletions(-)

diff --git a/README.md b/README.md
index d1e6b2b..ef92f06 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ buttons. Focus will be given to the `dialog-confirm` button when the dialog is o
 ### Changes in 2.0
 - `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
 (compound selector will select only top level nodes)
-- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see Animations section](#Animations))
+- `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
 
 ### Styling
 
@@ -40,17 +40,40 @@ this element.
 ### Animations
 
 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
-is opened or closed. See the documentation in
-[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
 
-For example:
+These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
 
 ```html
-<link rel="import" href="../neon-animation/web-animations.html">
-<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
-<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
-
-<paper-dialog entry-animation="scale-up-animation"
+<style>
+  @keyframes appear-from-top {
+    0% {
+      transform: translateY(-2000px);
+      opacity: 0;
+    }
+    10% {
+      opacity: 0.2;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .appear-from-top {
+    animation-name: appear-from-top;
+    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+    animation-duration: 800ms;
+  }
+</style>
+
+<paper-dialog entry-animation="appear-from-top"
               exit-animation="fade-out-animation">
   <h2>Header</h2>
   <div>Dialog body</div>
@@ -62,4 +85,3 @@ For example:
 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
 element.
 
-
diff --git a/bower.json b/bower.json
index 3f8c02f..f4a5f81 100644
--- a/bower.json
+++ b/bower.json
@@ -19,7 +19,6 @@
   "homepage": "https://github.com/PolymerElements/paper-dialog",
   "ignore": [],
   "dependencies": {
-    "neon-animation": "PolymerElements/neon-animation#1 - 2",
     "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#1 - 2",
     "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#1 - 2",
     "polymer": "Polymer/polymer#1.9 - 2"
@@ -33,14 +32,12 @@
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#1 - 2",
     "paper-item": "PolymerElements/paper-item#1 - 2",
     "paper-listbox": "PolymerElements/paper-listbox#1 - 2",
-    "web-animations-js": "web-animations/web-animations-js#^2.2.0",
     "web-component-tester": "^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
   "variants": {
     "1.x": {
       "dependencies": {
-        "neon-animation": "PolymerElements/neon-animation#^1.0.0",
         "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
         "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^1.7.0",
         "polymer": "Polymer/polymer#^1.9"
@@ -54,7 +51,6 @@
         "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
         "paper-item": "PolymerElements/paper-item#^1.0.0",
         "paper-listbox": "PolymerElements/paper-listbox#^1.0.0",
-        "web-animations-js": "web-animations/web-animations-js#^2.2.0",
         "web-component-tester": "^4.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
       },
diff --git a/demo/index.html b/demo/index.html
index d332d91..8e8ab91 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,8 +23,6 @@
   <link rel="import" href="../paper-dialog.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../../paper-dialog-scrollable/paper-dialog-scrollable.html">
-  <link rel="import" href="../../neon-animation/web-animations.html">
-  <link rel="import" href="../../neon-animation/neon-animations.html">
   <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu-light.html">
   <link rel="import" href="../../paper-listbox/paper-listbox.html">
   <link rel="import" href="../../paper-item/paper-item.html">
@@ -213,7 +211,7 @@ <h2>Aligned dialog</h2>
     </template>
   </demo-snippet>
 
-  <h3>Transitions with neon-animation</h3>
+  <h3>Transitions with CSS animation keyframes</h3>
   <demo-snippet>
     <template>
       <paper-button raised onclick="animated.open()">open</paper-button>
@@ -222,6 +220,37 @@ <h2>Dialog Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
           irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </paper-dialog>
+
+      <style>
+        @keyframes appear-from-top-animation {
+          0% {
+            transform: translateY(-50vh);
+            opacity: 0;
+          }
+          10% {
+            opacity: 0.2;
+          }
+        }
+
+        .appear-from-top-animation,
+        .exit-from-top-animation {
+          animation-name: appear-from-top-animation;
+          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+          animation-duration: 800ms;
+        }
+
+        .exit-from-top-animation {
+          animation-direction: reverse;
+        }
+      </style>
+      <paper-button raised onclick="customAnimated.open()">open (custom animation)</paper-button>
+      <paper-dialog id="customAnimated" entry-animation="appear-from-top-animation" exit-animation="exit-from-top-animation">
+        <h2>Dialog Title</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </paper-dialog>
     </template>
   </demo-snippet>
 
diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 5421c8e..1514226 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -9,7 +9,8 @@
  */
 
 /// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../neon-animation/neon-animation-runner-behavior.d.ts" />
+/// <reference path="../paper-dialog-behavior/paper-dialog-behavior.d.ts" />
+/// <reference path="../paper-dialog-behavior/paper-dialog-shared-styles.d.ts" />
 
 /**
  * Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
@@ -34,6 +35,11 @@
  *       </div>
  *     </paper-dialog>
  *
+ * ### Changes in 2.0
+ * - `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
+ * (compound selector will select only top level nodes)
+ * - `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
+ *
  * ### Styling
  *
  * See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
@@ -42,15 +48,39 @@
  * ### Animations
  *
  * Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
- * is opened or closed. See the documentation in
- * [PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+ * is opened or closed. Included in the component are:
+ * - fade-in-animation
+ * - fade-out-animation
+ * - scale-up-animation
+ * - scale-down-animation
+ *
+ * These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+ * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+ * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
  *
- * For example:
+ *     <style>
+ *       @keyframes appear-from-top {
+ *         0% {
+ *           transform: translateY(-2000px);
+ *           opacity: 0;
+ *         }
+ *         10% {
+ *           opacity: 0.2;
+ *         }
+ *         100% {
+ *           transform: translateY(0);
+ *           opacity: 1;
+ *         }
+ *       }
  *
- *     <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
- *     <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
+ *       .appear-from-top {
+ *         animation-name: appear-from-top;
+ *         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+ *         animation-duration: 500ms;
+ *       }
+ *     </style>
  *
- *     <paper-dialog entry-animation="scale-up-animation"
+ *     <paper-dialog entry-animation="appear-from-top"
  *                   exit-animation="fade-out-animation">
  *       <h2>Header</h2>
  *       <div>Dialog body</div>
@@ -61,10 +91,19 @@
  * See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
  * element.
  */
-interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavior, Polymer.NeonAnimationRunnerBehavior {
-  _renderOpened(): void;
-  _renderClosed(): void;
-  _onNeonAnimationFinish(): void;
+interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavior {
+
+  /**
+   * Set Entry Animation
+   */
+  entryAnimation: string|null|undefined;
+
+  /**
+   * Set Exit Animation
+   */
+  exitAnimation: string|null|undefined;
+  cancelAnimation(): void;
+  playAnimation(): void;
 }
 
 interface HTMLElementTagNameMap {
diff --git a/paper-dialog.html b/paper-dialog.html
index 8287467..07f65ef 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -9,7 +9,6 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
 <!--
@@ -35,6 +34,11 @@ <h2>Header</h2>
       </div>
     </paper-dialog>
 
+### Changes in 2.0
+- `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
+(compound selector will select only top level nodes)
+- `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
+
 ### Styling
 
 See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
@@ -43,15 +47,39 @@ <h2>Header</h2>
 ### Animations
 
 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
-is opened or closed. See the documentation in
-[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
-
-For example:
-
-    <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
-    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
-
-    <paper-dialog entry-animation="scale-up-animation"
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
+
+These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
+
+    <style>
+      @keyframes appear-from-top {
+        0% {
+          transform: translateY(-2000px);
+          opacity: 0;
+        }
+        10% {
+          opacity: 0.2;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      .appear-from-top {
+        animation-name: appear-from-top;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-duration: 500ms;
+      }
+    </style>
+
+    <paper-dialog entry-animation="appear-from-top"
                   exit-animation="fade-out-animation">
       <h2>Header</h2>
       <div>Dialog body</div>
@@ -70,40 +98,151 @@ <h2>Header</h2>
 
 <dom-module id="paper-dialog">
   <template>
-    <style include="paper-dialog-shared-styles"></style>
+    <style include="paper-dialog-shared-styles">
+      :host {
+        animation-duration: 500ms;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      :host(.fade-in-animation) {
+        animation-name: fade-in-animation;
+      }
+
+      @keyframes fade-in-animation {
+        from {
+          opacity: 0;
+        }
+      }
+
+      :host(.fade-out-animation) {
+        animation-name: fade-out-animation;
+      }
+
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0;
+        }
+      }
+
+      :host(.scale-up-animation) {
+        animation-name: scale-up-animation;
+      }
+
+      @keyframes scale-up-animation {
+        from {
+          transform: scale(0.0);
+        }
+      }
+
+      :host(.scale-down-animation) {
+        animation-name: scale-down-animation;
+      }
+
+      @keyframes scale-down-animation {
+        to {
+          transform: scale(0.0);
+        }
+      }
+    </style>
     <slot></slot>
   </template>
 </dom-module>
 
 <script>
-Polymer({
-  is: 'paper-dialog',
-
-  behaviors: [
-    Polymer.PaperDialogBehavior,
-    Polymer.NeonAnimationRunnerBehavior
-  ],
-
-  listeners: {
-    'neon-animation-finish': '_onNeonAnimationFinish'
-  },
-
-  _renderOpened: function() {
-    this.cancelAnimation();
-    this.playAnimation('entry');
-  },
-
-  _renderClosed: function() {
-    this.cancelAnimation();
-    this.playAnimation('exit');
-  },
-
-  _onNeonAnimationFinish: function() {
-    if (this.opened) {
-      this._finishRenderOpened();
-    } else {
-      this._finishRenderClosed();
+  Polymer({
+    is: 'paper-dialog',
+
+    behaviors: [
+      Polymer.PaperDialogBehavior
+    ],
+
+    listeners: {
+      'animationend': '_onAnimationEnd',
+    },
+
+    properties: {
+      /**
+       * Set Entry Animation
+       */
+      entryAnimation: {
+        type: String
+      },
+      /**
+       * Set Exit Animation
+       */
+      exitAnimation: {
+        type: String
+      }
+    },
+
+    /**
+     * @private
+     */
+    _renderOpened: function() {
+      this.cancelAnimation();
+      this.playAnimation();
+    },
+
+    /**
+     * @private
+     */
+    _renderClosed: function() {
+      this.cancelAnimation();
+      this.playAnimation();
+    },
+
+    cancelAnimation: function() {
+      // Short-cut and cancel all animations and hide
+      this.classList.remove(this.entryAnimation);
+      this.classList.remove(this.exitAnimation);
+    },
+
+    playAnimation: function() {
+      const animation = this.opened ? this.entryAnimation : this.exitAnimation;
+      if (animation) {
+        this.classList.add(animation);
+        if (this._willAnimate() === false) {
+          console.info(animation + ' animation was not played');
+          this.classList.remove(animation);
+          this._finishRender();
+        }
+      } else {
+        this._finishRender();
+      }
+    },
+
+    /**
+     * @param {!Event} event
+     * @private
+     */
+    _onAnimationEnd: function(event) {
+      if (event.target !== this) {
+        return;
+      }
+      this.classList.remove(event.animationName);
+      this._finishRender();
+    },
+
+    /**
+     * @private
+     */
+    _finishRender: function() {
+      if (this.opened) {
+        this._finishRenderOpened();
+      } else {
+        this._finishRenderClosed();
+      }
+    },
+
+    /**
+     * @private
+     */
+     _willAnimate: function() {
+      // If CSS Class does not have animation-name considered not be an animation
+      var style = window.getComputedStyle(this);
+      return (style.getPropertyValue('animation-name') !== 'none' &&
+        style.getPropertyValue('animation-duration') !== '0ms');
     }
-  }
-});
-</script>
+
+  });
+</script>
\ No newline at end of file
diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index 02ed509..864cec4 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -1,92 +1,171 @@
-<!doctype html>
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-
-<head>
-
-  <title>paper-dialog tests</title>
-
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../paper-dialog.html">
-</head>
-
-<body>
-
-  <test-fixture id="basic">
-    <template>
-      <paper-dialog>
-        <p>Dialog</p>
-      </paper-dialog>
-    </template>
-  </test-fixture>
-
-  <test-fixture id="modal">
-    <template>
-      <paper-dialog modal>
-        <p>Dialog</p>
-      </paper-dialog>
-    </template>
-  </test-fixture>
-
-  <test-fixture id="opened-modals">
-    <template>
-      <paper-dialog modal opened>
-        <p>Dialog 1</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-      </paper-dialog>
-      <paper-dialog modal opened>
-        <p>Dialog 2</p>
-      </paper-dialog>
-    </template>
-  </test-fixture>
-
-  <script>
-    suite('modal', function() {
-
-      test('backdrop element remains opened when closing top modal, closes when all modals are closed', function(done) {
-        var modals = fixture('opened-modals');
-        modals[1].addEventListener('iron-overlay-opened', function() {
-          assert.isTrue(modals[1].backdropElement.opened, 'backdrop is open');
-          modals[1].close();
-        });
-        modals[1].addEventListener('iron-overlay-closed', function() {
-          assert.isTrue(modals[1].backdropElement.opened, 'backdrop is still open');
-          modals[0].close();
-        });
-        modals[0].addEventListener('iron-overlay-closed', function() {
-          assert.isFalse(modals[0].backdropElement.opened, 'backdrop is closed');
-          done();
-        });
-      });
-
-    });
-
-    suite('a11y', function() {
-      a11ySuite('basic', []);
-
-      a11ySuite('modal', []);
-
-      test('dialog has role="dialog"', function() {
-        var dialog = fixture('basic');
-        assert.equal(dialog.getAttribute('role'), 'dialog', 'has role="dialog"');
-      });
-
-    });
-  </script>
-
-</body>
-
-</html>
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+
+  <title>paper-dialog tests</title>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../paper-dialog.html">
+</head>
+
+<body>
+  <style>
+    paper-dialog {
+      animation-duration: 50ms;
+    }
+  </style>
+
+  <test-fixture id="basic">
+    <template>
+      <paper-dialog>
+        <p>Dialog</p>
+      </paper-dialog>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="modal">
+    <template>
+      <paper-dialog modal>
+        <p>Dialog</p>
+      </paper-dialog>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="opened-modals">
+    <template>
+      <paper-dialog modal opened>
+        <p>Dialog 1</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+      </paper-dialog>
+      <paper-dialog modal opened>
+        <p>Dialog 2</p>
+      </paper-dialog>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="animations">
+    <template>
+      <paper-dialog entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+        <p>Dialog</p>
+        <paper-dialog entry-animation="fade-in-animation">
+          <p>Dialog</p>
+        </paper-dialog>
+      </paper-dialog>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('modal', function() {
+
+      test('backdrop element remains opened when closing top modal, closes when all modals are closed', function(done) {
+        var modals = fixture('opened-modals');
+        modals[1].addEventListener('iron-overlay-opened', function() {
+          assert.isTrue(modals[1].backdropElement.opened, 'backdrop is open');
+          modals[1].close();
+        });
+        modals[1].addEventListener('iron-overlay-closed', function() {
+          assert.isTrue(modals[1].backdropElement.opened, 'backdrop is still open');
+          modals[0].close();
+        });
+        modals[0].addEventListener('iron-overlay-closed', function() {
+          assert.isFalse(modals[0].backdropElement.opened, 'backdrop is closed');
+          done();
+        });
+      });
+
+    });
+
+    suite('animations', function() {
+
+      var dialog;
+      setup(function() {
+        dialog = fixture('animations');
+      });
+
+      test('should not animate by default', function(done) {
+        var dialog = fixture('basic');
+        var spy = sinon.stub();
+        dialog.addEventListener('animationend', spy);
+        dialog.addEventListener('iron-overlay-opened', function() {
+          assert.equal(spy.callCount, 0, 'no open animation');
+          dialog.close();
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          assert.equal(spy.callCount, 0, 'no close animation');
+          done();
+        });
+        dialog.open();
+      });
+
+      test('should animate on opened and closed', function(done) {
+        var spy = sinon.stub();
+        dialog.addEventListener('animationend', spy);
+        dialog.addEventListener('iron-overlay-opened', function() {
+          assert.equal(spy.callCount, 1, 'open animation ok');
+          dialog.close();
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          assert.equal(spy.callCount, 2, 'close animation ok');
+          done();
+        });
+        dialog.open();
+      });
+
+      test('should remove animation classes when done animating', function(done) {
+        dialog.addEventListener('iron-overlay-opened', function() {
+          assert.isFalse(dialog.classList.contains(dialog.entryAnimation), 'no entry animation class');
+          dialog.close();
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          assert.isFalse(dialog.classList.contains(dialog.exitAnimation), 'no exit animation class');
+          done();
+        });
+        dialog.open();
+      });
+
+      test('should handle only its own animations', function(done) {
+        var dialog = fixture('animations');
+        var spy = sinon.stub();
+        dialog.addEventListener('iron-overlay-opened', spy);
+        // Open both, observe if event was triggered twice.
+        dialog.open();
+        dialog.querySelector('paper-dialog').open();
+        setTimeout(function() {
+          assert.equal(spy.callCount, 1, 'opened event fired once');
+          done();
+        }, 300);
+      });
+
+    });
+
+    suite('a11y', function() {
+      a11ySuite('basic', []);
+
+      a11ySuite('modal', []);
+
+      test('dialog has role="dialog"', function() {
+        var dialog = fixture('basic');
+        assert.equal(dialog.getAttribute('role'), 'dialog', 'has role="dialog"');
+      });
+
+    });
+  </script>
+
+</body>
+
+</html>

From f0f60ae56ca6a6c51a3f274bb4b3b8ddcef6b718 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 11:45:29 -0700
Subject: [PATCH 02/16] format demo page

---
 demo/index.html | 122 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 79 insertions(+), 43 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 8e8ab91..624ee6c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -31,17 +31,19 @@
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
-  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
-    .centered {
-      min-width: 500px;
-    }
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
+      .centered {
+        min-width: 500px;
+      }
 
-    demo-snippet {
-      --demo-snippet-code: {
-        max-height: 250px;
+      demo-snippet {
+        --demo-snippet-code: {
+          max-height: 250px;
+        }
       }
-    }
-  </style></custom-style>
+    </style>
+  </custom-style>
 
 </head>
 
@@ -58,29 +60,47 @@ <h3>Dialog layouts</h3>
 
       <paper-dialog id="dialog">
         <h2>Dialog Title</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </paper-dialog>
 
       <paper-dialog id="scrolling">
         <h2>Scrolling</h2>
         <paper-dialog-scrollable>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </paper-dialog-scrollable>
         <div class="buttons">
           <paper-button dialog-dismiss>Cancel</paper-button>
@@ -90,8 +110,10 @@ <h2>Scrolling</h2>
 
       <paper-dialog id="actions">
         <h2>Dialog Title</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <div class="buttons">
           <paper-button>More Info...</paper-button>
           <paper-button dialog-dismiss>Decline</paper-button>
@@ -100,7 +122,8 @@ <h2>Dialog Title</h2>
       </paper-dialog>
 
       <paper-dialog id="modal" modal>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         <div class="buttons">
           <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
         </div>
@@ -131,8 +154,10 @@ <h2>Dialog Title</h2>
 
       <paper-dialog id="nested">
         <h2>Dialog Title</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <div class="buttons">
           <paper-button onclick="innerDialog.open()">Open nested dialog</paper-button>
         </div>
@@ -140,7 +165,8 @@ <h2>Dialog Title</h2>
 
       <paper-dialog id="innerDialog">
         <h2>Dialog Title</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua.</p>
       </paper-dialog>
     </template>
   </demo-snippet>
@@ -170,19 +196,25 @@ <h3>Styling and positioning</h3>
 
       <paper-dialog id="colors" class="colored">
         <h2>Custom Colors</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </paper-dialog>
 
       <paper-dialog id="position" class="size-position">
         <h2>Custom Size &amp; Position</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </paper-dialog>
     </template>
   </demo-snippet>
 
-  <h3>Position with <code>positionTarget</code></h3>
+  <h3>Position with
+    <code>positionTarget</code>
+  </h3>
   <demo-snippet>
     <template>
       <style is="custom-style">
@@ -197,8 +229,10 @@ <h3>Position with <code>positionTarget</code></h3>
       <paper-dialog id="alignedDialog" no-overlap horizontal-align="left" vertical-align="top">
         <h2>Aligned dialog</h2>
         <paper-dialog-scrollable>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </paper-dialog-scrollable>
       </paper-dialog>
 
@@ -217,8 +251,10 @@ <h3>Transitions with CSS animation keyframes</h3>
       <paper-button raised onclick="animated.open()">open</paper-button>
       <paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
         <h2>Dialog Title</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </paper-dialog>
 
       <style>
@@ -256,4 +292,4 @@ <h2>Dialog Title</h2>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file

From 9ab4aef8286ef8a6d80aec8ac5a178bb4be4f932 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 11:46:07 -0700
Subject: [PATCH 03/16] simpler example

---
 README.md         | 4 ----
 paper-dialog.d.ts | 4 ----
 paper-dialog.html | 4 ----
 3 files changed, 12 deletions(-)

diff --git a/README.md b/README.md
index ef92f06..f7e91e9 100644
--- a/README.md
+++ b/README.md
@@ -60,10 +60,6 @@ CSS keyframe animations; define the animation keyframes, a CSS class for the ani
     10% {
       opacity: 0.2;
     }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
   }
 
   .appear-from-top {
diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 1514226..8a97266 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -67,10 +67,6 @@
  *         10% {
  *           opacity: 0.2;
  *         }
- *         100% {
- *           transform: translateY(0);
- *           opacity: 1;
- *         }
  *       }
  *
  *       .appear-from-top {
diff --git a/paper-dialog.html b/paper-dialog.html
index 07f65ef..2d09bd4 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -66,10 +66,6 @@ <h2>Header</h2>
         10% {
           opacity: 0.2;
         }
-        100% {
-          transform: translateY(0);
-          opacity: 1;
-        }
       }
 
       .appear-from-top {

From eb147cae99955a898b8bab9cbd6d403cd7f716ae Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 11:52:42 -0700
Subject: [PATCH 04/16] update docs for entry/exitAnimation

---
 paper-dialog.d.ts | 8 ++++++--
 paper-dialog.html | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 8a97266..eec563e 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -90,12 +90,16 @@
 interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavior {
 
   /**
-   * Set Entry Animation
+   * The class defining the entry animation. `<paper-dialog>` ships
+   * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
+   * but you can use custom animations too. See the Animations section in the README.md.
    */
   entryAnimation: string|null|undefined;
 
   /**
-   * Set Exit Animation
+   * The class defining the exit animation. `<paper-dialog>` ships
+   * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
+   * but you can use custom animations too. See the Animations section in the README.md.
    */
   exitAnimation: string|null|undefined;
   cancelAnimation(): void;
diff --git a/paper-dialog.html b/paper-dialog.html
index 2d09bd4..2aea2b9 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -158,13 +158,17 @@ <h2>Header</h2>
 
     properties: {
       /**
-       * Set Entry Animation
+       * The class defining the entry animation. `<paper-dialog>` ships 
+       * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
+       * but you can use custom animations too. See the Animations section in the README.md.
        */
       entryAnimation: {
         type: String
       },
       /**
-       * Set Exit Animation
+       * The class defining the exit animation. `<paper-dialog>` ships 
+       * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
+       * but you can use custom animations too. See the Animations section in the README.md.
        */
       exitAnimation: {
         type: String

From 9f9970fbea8cd2a8a5e6a59149557ad5a3061fc0 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 12:30:19 -0700
Subject: [PATCH 05/16] fix tests

---
 paper-dialog.html      |  3 +-
 test/paper-dialog.html | 85 ++++++++++++++++++++++++++++--------------
 2 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/paper-dialog.html b/paper-dialog.html
index 2aea2b9..203f44b 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -219,7 +219,8 @@ <h2>Header</h2>
       if (event.target !== this) {
         return;
       }
-      this.classList.remove(event.animationName);
+      // Remove the animation classes.
+      this.cancelAnimation();
       this._finishRender();
     },
 
diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index 864cec4..5a0ecdc 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -24,11 +24,6 @@
 </head>
 
 <body>
-  <style>
-    paper-dialog {
-      animation-duration: 50ms;
-    }
-  </style>
 
   <test-fixture id="basic">
     <template>
@@ -72,7 +67,8 @@
   <script>
     suite('modal', function() {
 
-      test('backdrop element remains opened when closing top modal, closes when all modals are closed', function(done) {
+      test('backdrop element remains opened when closing top modal, closes when all modals are closed', function(
+        done) {
         var modals = fixture('opened-modals');
         modals[1].addEventListener('iron-overlay-opened', function() {
           assert.isTrue(modals[1].backdropElement.opened, 'backdrop is open');
@@ -92,41 +88,66 @@
 
     suite('animations', function() {
 
-      var dialog;
+      var dialog, innerDialog;
+      var animationDuration = 50;
+      // We wait some extra ms so that `animationend` can propagate up and
+      // be captured by the test spies.
+      var timeoutMs = animationDuration + 50;
       setup(function() {
         dialog = fixture('animations');
+        innerDialog = dialog.querySelector('paper-dialog');
+        // Make it quick.
+        dialog.style.animationDuration =
+          innerDialog.style.animationDuration = animationDuration + 'ms';
       });
 
       test('should not animate by default', function(done) {
         var dialog = fixture('basic');
         var spy = sinon.stub();
         dialog.addEventListener('animationend', spy);
-        dialog.addEventListener('iron-overlay-opened', function() {
+        dialog.open();
+        setTimeout(function() {
+          assert.isTrue(dialog.opened, 'opened ok');
           assert.equal(spy.callCount, 0, 'no open animation');
           dialog.close();
-        });
-        dialog.addEventListener('iron-overlay-closed', function() {
-          assert.equal(spy.callCount, 0, 'no close animation');
-          done();
-        });
-        dialog.open();
+          setTimeout(function() {
+            assert.isFalse(dialog.opened, 'closed ok');
+            assert.equal(spy.callCount, 0, 'no close animation');
+            done();
+          }, timeoutMs);
+        }, timeoutMs);
       });
 
       test('should animate on opened and closed', function(done) {
         var spy = sinon.stub();
         dialog.addEventListener('animationend', spy);
-        dialog.addEventListener('iron-overlay-opened', function() {
+        dialog.open();
+        setTimeout(function() {
+          assert.isTrue(dialog.opened, 'opened ok');
           assert.equal(spy.callCount, 1, 'open animation ok');
           dialog.close();
-        });
-        dialog.addEventListener('iron-overlay-closed', function() {
-          assert.equal(spy.callCount, 2, 'close animation ok');
-          done();
-        });
+          setTimeout(function() {
+            assert.isFalse(dialog.opened, 'closed ok');
+            assert.equal(spy.callCount, 2, 'close animation ok');
+            done();
+          }, timeoutMs);
+        }, timeoutMs);
+      });
+      
+      test('should recognize undefined animations', function(done) {
+        dialog.entryAnimation = 'undefined-animation'
+        var spy = sinon.stub();
+        dialog.addEventListener('animationend', spy);
         dialog.open();
+        setTimeout(function() {
+          assert.isTrue(dialog.opened, 'opened ok');
+          assert.equal(spy.callCount, 0, 'open animation ok');
+          done();
+        }, timeoutMs);
       });
 
       test('should remove animation classes when done animating', function(done) {
+        dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
           assert.isFalse(dialog.classList.contains(dialog.entryAnimation), 'no entry animation class');
           dialog.close();
@@ -135,20 +156,26 @@
           assert.isFalse(dialog.classList.contains(dialog.exitAnimation), 'no exit animation class');
           done();
         });
-        dialog.open();
       });
 
       test('should handle only its own animations', function(done) {
-        var dialog = fixture('animations');
-        var spy = sinon.stub();
-        dialog.addEventListener('iron-overlay-opened', spy);
-        // Open both, observe if event was triggered twice.
+
+        var callCount = 0;
+        dialog.addEventListener('iron-overlay-opened', function(event) {
+          // `iron-overlay-opened` is composed and bubbles, so increase the count only
+          // if it got triggered by `dialog`.
+          if (event.target === dialog) {
+            callCount++;
+          }
+        });
         dialog.open();
-        dialog.querySelector('paper-dialog').open();
+        innerDialog.open();
         setTimeout(function() {
-          assert.equal(spy.callCount, 1, 'opened event fired once');
+          assert.isTrue(dialog.opened, 'dialog opened');
+          assert.isTrue(innerDialog.opened, 'innerDialog opened');
+          assert.equal(callCount, 1, 'opened event fired once');
           done();
-        }, 300);
+        }, timeoutMs);
       });
 
     });
@@ -168,4 +195,4 @@
 
 </body>
 
-</html>
+</html>
\ No newline at end of file

From 0d56d9001fbb7e3b55ec6d2a020307cb18d0c9fa Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 12:38:09 -0700
Subject: [PATCH 06/16] s/ext-animation/exit-animation

---
 README.md         | 2 +-
 paper-dialog.d.ts | 2 +-
 paper-dialog.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f7e91e9..ad66982 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ is opened or closed. Included in the component are:
 
 These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
 This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
-CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
 
 ```html
 <style>
diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index eec563e..f8e4f30 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -56,7 +56,7 @@
  *
  * These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
  * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
- * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
+ * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
  *
  *     <style>
  *       @keyframes appear-from-top {
diff --git a/paper-dialog.html b/paper-dialog.html
index 203f44b..0f0aaf4 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -55,7 +55,7 @@ <h2>Header</h2>
 
 These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
 This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
-CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/ext-animation`, e.g.
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
 
     <style>
       @keyframes appear-from-top {

From f58d52b0757799b83dc2a1d681b200b23b5cfc9d Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 12:44:48 -0700
Subject: [PATCH 07/16] workaround for Polymer/gen-typescript-declarations#98

---
 paper-dialog.d.ts | 2 +-
 paper-dialog.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index f8e4f30..62500eb 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -59,7 +59,7 @@
  * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
  *
  *     <style>
- *       @keyframes appear-from-top {
+ *       \@keyframes appear-from-top {
  *         0% {
  *           transform: translateY(-2000px);
  *           opacity: 0;
diff --git a/paper-dialog.html b/paper-dialog.html
index 0f0aaf4..e570bbb 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -58,7 +58,7 @@ <h2>Header</h2>
 CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
 
     <style>
-      @keyframes appear-from-top {
+      \@keyframes appear-from-top {
         0% {
           transform: translateY(-2000px);
           opacity: 0;

From d3e2b14f32d312941f9d39ec72a71c5e2c9f455c Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 13:08:00 -0700
Subject: [PATCH 08/16] fix tests timing

---
 test/paper-dialog.html | 89 +++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index 5a0ecdc..f205a9f 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -89,16 +89,12 @@
     suite('animations', function() {
 
       var dialog, innerDialog;
-      var animationDuration = 50;
-      // We wait some extra ms so that `animationend` can propagate up and
-      // be captured by the test spies.
-      var timeoutMs = animationDuration + 50;
       setup(function() {
         dialog = fixture('animations');
         innerDialog = dialog.querySelector('paper-dialog');
         // Make it quick.
         dialog.style.animationDuration =
-          innerDialog.style.animationDuration = animationDuration + 'ms';
+          innerDialog.style.animationDuration = '50ms';
       });
 
       test('should not animate by default', function(done) {
@@ -106,44 +102,54 @@
         var spy = sinon.stub();
         dialog.addEventListener('animationend', spy);
         dialog.open();
-        setTimeout(function() {
-          assert.isTrue(dialog.opened, 'opened ok');
-          assert.equal(spy.callCount, 0, 'no open animation');
-          dialog.close();
-          setTimeout(function() {
-            assert.isFalse(dialog.opened, 'closed ok');
-            assert.equal(spy.callCount, 0, 'no close animation');
-            done();
-          }, timeoutMs);
-        }, timeoutMs);
+        dialog.addEventListener('iron-overlay-opened', function() {
+          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 0, 'no open animation');
+            dialog.close();
+            dialog.addEventListener('iron-overlay-closed', function() {
+              // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+              requestAnimationFrame(function() {
+                assert.equal(spy.callCount, 0, 'no close animation');
+                done();
+              });
+            });
+          });
+        });
       });
 
       test('should animate on opened and closed', function(done) {
         var spy = sinon.stub();
         dialog.addEventListener('animationend', spy);
         dialog.open();
-        setTimeout(function() {
-          assert.isTrue(dialog.opened, 'opened ok');
-          assert.equal(spy.callCount, 1, 'open animation ok');
-          dialog.close();
-          setTimeout(function() {
-            assert.isFalse(dialog.opened, 'closed ok');
-            assert.equal(spy.callCount, 2, 'close animation ok');
-            done();
-          }, timeoutMs);
-        }, timeoutMs);
+        dialog.addEventListener('iron-overlay-opened', function() {
+          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 1, 'open animation ok');
+            dialog.close();
+            dialog.addEventListener('iron-overlay-closed', function() {
+              // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+              requestAnimationFrame(function() {
+                assert.equal(spy.callCount, 2, 'close animation ok');
+                done();
+              });
+            });
+          });
+        });
       });
-      
+
       test('should recognize undefined animations', function(done) {
         dialog.entryAnimation = 'undefined-animation'
         var spy = sinon.stub();
         dialog.addEventListener('animationend', spy);
         dialog.open();
-        setTimeout(function() {
-          assert.isTrue(dialog.opened, 'opened ok');
-          assert.equal(spy.callCount, 0, 'open animation ok');
-          done();
-        }, timeoutMs);
+        dialog.addEventListener('iron-overlay-opened', function() {
+          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 0, 'open animation ok');
+            done();
+          });
+        });
       });
 
       test('should remove animation classes when done animating', function(done) {
@@ -159,23 +165,16 @@
       });
 
       test('should handle only its own animations', function(done) {
-
-        var callCount = 0;
-        dialog.addEventListener('iron-overlay-opened', function(event) {
-          // `iron-overlay-opened` is composed and bubbles, so increase the count only
-          // if it got triggered by `dialog`.
+        dialog.open();
+        innerDialog.open();
+        dialog.addEventListener('iron-overlay-opened', function() {
+          // `iron-overlay-opened` is composed and bubbles, so check who triggered
+          // it. If it got triggered multiple times, the test will fail as we'd be
+          // calling `done` twice.
           if (event.target === dialog) {
-            callCount++;
+            done();
           }
         });
-        dialog.open();
-        innerDialog.open();
-        setTimeout(function() {
-          assert.isTrue(dialog.opened, 'dialog opened');
-          assert.isTrue(innerDialog.opened, 'innerDialog opened');
-          assert.equal(callCount, 1, 'opened event fired once');
-          done();
-        }, timeoutMs);
       });
 
     });

From f0d8b53caa125eae9a2d5988b35c512feec1a330 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 13:09:00 -0700
Subject: [PATCH 09/16] no nesting

---
 test/paper-dialog.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index f205a9f..6f3adc9 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -127,13 +127,13 @@
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 1, 'open animation ok');
             dialog.close();
-            dialog.addEventListener('iron-overlay-closed', function() {
-              // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
-              requestAnimationFrame(function() {
-                assert.equal(spy.callCount, 2, 'close animation ok');
-                done();
-              });
-            });
+          });
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 2, 'close animation ok');
+            done();
           });
         });
       });

From c005a2ad25428ee7c2cf8ec3dad21f2087d4f48d Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 13:20:06 -0700
Subject: [PATCH 10/16] forgot event

---
 test/paper-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index 6f3adc9..b5f637a 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -167,7 +167,7 @@
       test('should handle only its own animations', function(done) {
         dialog.open();
         innerDialog.open();
-        dialog.addEventListener('iron-overlay-opened', function() {
+        dialog.addEventListener('iron-overlay-opened', function(event) {
           // `iron-overlay-opened` is composed and bubbles, so check who triggered
           // it. If it got triggered multiple times, the test will fail as we'd be
           // calling `done` twice.

From f7fa41a9ed8359599cf95baf422b748d8357f85d Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrin@google.com>
Date: Tue, 13 Mar 2018 13:53:40 -0700
Subject: [PATCH 11/16] update display before removing animation class

---
 paper-dialog.html      | 25 ++++++++++---------------
 test/paper-dialog.html | 22 +++++++++++-----------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/paper-dialog.html b/paper-dialog.html
index e570bbb..6e04439 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -192,7 +192,6 @@ <h2>Header</h2>
     },
 
     cancelAnimation: function() {
-      // Short-cut and cancel all animations and hide
       this.classList.remove(this.entryAnimation);
       this.classList.remove(this.exitAnimation);
     },
@@ -203,34 +202,30 @@ <h2>Header</h2>
         this.classList.add(animation);
         if (this._willAnimate() === false) {
           console.info(animation + ' animation was not played');
-          this.classList.remove(animation);
-          this._finishRender();
+          this._onAnimationEnd();
         }
       } else {
-        this._finishRender();
+        this._onAnimationEnd();
       }
     },
 
     /**
-     * @param {!Event} event
+     * @param {Event=} event
      * @private
      */
     _onAnimationEnd: function(event) {
-      if (event.target !== this) {
+      if (event && event.target !== this) {
         return;
       }
-      // Remove the animation classes.
-      this.cancelAnimation();
-      this._finishRender();
-    },
-
-    /**
-     * @private
-     */
-    _finishRender: function() {
       if (this.opened) {
+        this.classList.remove(this.entryAnimation);
         this._finishRenderOpened();
       } else {
+        // Ensure to update display before removing the 
+        // animation class, so that user doesn't see flickering
+        // e.g. dialog returning to its initial position/opacity.
+        this.style.display = 'none';
+        this.classList.remove(this.exitAnimation);
         this._finishRenderClosed();
       }
     },
diff --git a/test/paper-dialog.html b/test/paper-dialog.html
index b5f637a..6c50227 100644
--- a/test/paper-dialog.html
+++ b/test/paper-dialog.html
@@ -103,17 +103,17 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 0, 'no open animation');
             dialog.close();
-            dialog.addEventListener('iron-overlay-closed', function() {
-              // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
-              requestAnimationFrame(function() {
-                assert.equal(spy.callCount, 0, 'no close animation');
-                done();
-              });
-            });
+          });
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          // Wait for `animationend` to propagate up.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 0, 'no close animation');
+            done();
           });
         });
       });
@@ -123,14 +123,14 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 1, 'open animation ok');
             dialog.close();
           });
         });
         dialog.addEventListener('iron-overlay-closed', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 2, 'close animation ok');
             done();
@@ -144,7 +144,7 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 0, 'open animation ok');
             done();

From 603155af1d110df833579b414b437d2ffa84ca0c Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 22:16:23 -0700
Subject: [PATCH 12/16] set animation-fill-mode to both

---
 paper-dialog.d.ts |  2 --
 paper-dialog.html | 31 +++++++++++++------------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 62500eb..7962207 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -102,8 +102,6 @@ interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavio
    * but you can use custom animations too. See the Animations section in the README.md.
    */
   exitAnimation: string|null|undefined;
-  cancelAnimation(): void;
-  playAnimation(): void;
 }
 
 interface HTMLElementTagNameMap {
diff --git a/paper-dialog.html b/paper-dialog.html
index 6e04439..70a5bde 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -35,7 +35,7 @@ <h2>Header</h2>
     </paper-dialog>
 
 ### Changes in 2.0
-- `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
+- `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom)
 (compound selector will select only top level nodes)
 - `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
 
@@ -97,6 +97,7 @@ <h2>Header</h2>
     <style include="paper-dialog-shared-styles">
       :host {
         animation-duration: 500ms;
+        animation-fill-mode: both;
         animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       }
 
@@ -158,7 +159,7 @@ <h2>Header</h2>
 
     properties: {
       /**
-       * The class defining the entry animation. `<paper-dialog>` ships 
+       * The class defining the entry animation. `<paper-dialog>` ships
        * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
        * but you can use custom animations too. See the Animations section in the README.md.
        */
@@ -166,7 +167,7 @@ <h2>Header</h2>
         type: String
       },
       /**
-       * The class defining the exit animation. `<paper-dialog>` ships 
+       * The class defining the exit animation. `<paper-dialog>` ships
        * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
        * but you can use custom animations too. See the Animations section in the README.md.
        */
@@ -179,24 +180,22 @@ <h2>Header</h2>
      * @private
      */
     _renderOpened: function() {
-      this.cancelAnimation();
-      this.playAnimation();
+      this._playAnimation();
     },
 
     /**
      * @private
      */
     _renderClosed: function() {
-      this.cancelAnimation();
-      this.playAnimation();
+      this._playAnimation();
     },
 
-    cancelAnimation: function() {
+    /**
+     * @private
+     */
+    _playAnimation: function() {
       this.classList.remove(this.entryAnimation);
       this.classList.remove(this.exitAnimation);
-    },
-
-    playAnimation: function() {
       const animation = this.opened ? this.entryAnimation : this.exitAnimation;
       if (animation) {
         this.classList.add(animation);
@@ -217,15 +216,11 @@ <h2>Header</h2>
       if (event && event.target !== this) {
         return;
       }
+      this.classList.remove(this.entryAnimation);
+      this.classList.remove(this.exitAnimation);
       if (this.opened) {
-        this.classList.remove(this.entryAnimation);
         this._finishRenderOpened();
       } else {
-        // Ensure to update display before removing the 
-        // animation class, so that user doesn't see flickering
-        // e.g. dialog returning to its initial position/opacity.
-        this.style.display = 'none';
-        this.classList.remove(this.exitAnimation);
         this._finishRenderClosed();
       }
     },
@@ -241,4 +236,4 @@ <h2>Header</h2>
     }
 
   });
-</script>
\ No newline at end of file
+</script>

From f9d3560309e98acc857ed448ffde620a3ca168a7 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 22:01:15 -0700
Subject: [PATCH 13/16] update types

---
 paper-dialog.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 7962207..5dcea62 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -36,7 +36,7 @@
  *     </paper-dialog>
  *
  * ### Changes in 2.0
- * - `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
+ * - `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom)
  * (compound selector will select only top level nodes)
  * - `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
  *

From dd399e141f489fd268f023d1ed4944cad4742608 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:18:07 -0700
Subject: [PATCH 14/16] warn about animationConfig usages

---
 paper-dialog.d.ts |  8 +++++++
 paper-dialog.html | 57 ++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 5dcea62..a011b60 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -89,6 +89,13 @@
  */
 interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavior {
 
+  /**
+   * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+   * `paper-dialog` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings. Setting it won't have effects on the animation.
+   */
+  animationConfig: object|null|undefined;
+
   /**
    * The class defining the entry animation. `<paper-dialog>` ships
    * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
@@ -102,6 +109,7 @@ interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavio
    * but you can use custom animations too. See the Animations section in the README.md.
    */
   exitAnimation: string|null|undefined;
+  ready(): void;
 }
 
 interface HTMLElementTagNameMap {
diff --git a/paper-dialog.html b/paper-dialog.html
index 70a5bde..2d3cead 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -158,6 +158,16 @@ <h2>Header</h2>
     },
 
     properties: {
+      /**
+       * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+       * `paper-dialog` doesn't depend anymore on `neon-animation`, and this property is kept
+       * here to not break bindings. Setting it won't have effects on the animation.
+       * @deprecated
+       */
+      animationConfig: {
+        type: Object
+      },
+
       /**
        * The class defining the entry animation. `<paper-dialog>` ships
        * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
@@ -176,28 +186,56 @@ <h2>Header</h2>
       }
     },
 
+    ready: function() {
+      if (this.animationConfig) {
+        console.warn('Configuring animations through animationConfig is no longer supported.' +
+          'Use entryAnimation and exitAnimation instead.');
+      } else if (this.entryAnimation || this.exitAnimation) {
+        // Keep this for backwards-compat.
+        this.animationConfig = {
+          entry: {
+            name: this.entryAnimation
+          },
+          exit: {
+            name: this.exitAnimation
+          },
+        };
+      }
+    },
+
     /**
      * @private
      */
     _renderOpened: function() {
-      this._playAnimation();
+      this._cancelAnimation();
+      this._playAnimation(this.entryAnimation);
     },
 
     /**
      * @private
      */
     _renderClosed: function() {
-      this._playAnimation();
+      this._cancelAnimation();
+      this._playAnimation(this.exitAnimation);
+    },
+
+    /**
+     * @private
+     */
+    _cancelAnimation: function() {
+      if (this._pendingAnimation) {
+        this.classList.remove(this._pendingAnimation);
+        this._pendingAnimation = null;
+      }
     },
 
     /**
+     * @param {string=} animation
      * @private
      */
-    _playAnimation: function() {
-      this.classList.remove(this.entryAnimation);
-      this.classList.remove(this.exitAnimation);
-      const animation = this.opened ? this.entryAnimation : this.exitAnimation;
+    _playAnimation: function(animation) {
       if (animation) {
+        this._pendingAnimation = animation;
         this.classList.add(animation);
         if (this._willAnimate() === false) {
           console.info(animation + ' animation was not played');
@@ -216,8 +254,7 @@ <h2>Header</h2>
       if (event && event.target !== this) {
         return;
       }
-      this.classList.remove(this.entryAnimation);
-      this.classList.remove(this.exitAnimation);
+      this._cancelAnimation();
       if (this.opened) {
         this._finishRenderOpened();
       } else {
@@ -228,7 +265,7 @@ <h2>Header</h2>
     /**
      * @private
      */
-     _willAnimate: function() {
+    _willAnimate: function() {
       // If CSS Class does not have animation-name considered not be an animation
       var style = window.getComputedStyle(this);
       return (style.getPropertyValue('animation-name') !== 'none' &&
@@ -236,4 +273,4 @@ <h2>Header</h2>
     }
 
   });
-</script>
+</script>
\ No newline at end of file

From f255ab0f060f4265366445f917f4f92216c6b253 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:39:33 -0700
Subject: [PATCH 15/16] implement
 cancelAnimation/playAnimation/getAnimationConfig as no-ops

---
 paper-dialog.d.ts | 21 +++++++++++++++++++++
 paper-dialog.html | 26 ++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index a011b60..5a34d0a 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -110,6 +110,27 @@ interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavio
    */
   exitAnimation: string|null|undefined;
   ready(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  cancelAnimation(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  playAnimation(type?: string, cookie?: object): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  getAnimationConfig(type: any): any;
 }
 
 interface HTMLElementTagNameMap {
diff --git a/paper-dialog.html b/paper-dialog.html
index 2d3cead..4865de2 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -203,6 +203,32 @@ <h2>Header</h2>
       }
     },
 
+    /**
+      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+      * now is a no-op.
+      * @deprecated
+      */
+    cancelAnimation: function() {},
+
+    /**
+      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+      * now is a no-op.
+      * @param {string=} type
+      * @param {!Object=} cookie
+      * @deprecated
+      */
+    playAnimation: function(type, cookie) {},
+
+    /**
+      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+      * now is a no-op.
+      * @deprecated
+      */
+    getAnimationConfig: function(type) { return []; },
+
     /**
      * @private
      */

From 9b02346395827cc55cf53a47ef78aac346e7264c Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:41:02 -0700
Subject: [PATCH 16/16] correct typo

---
 paper-dialog.d.ts | 6 +++---
 paper-dialog.html | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/paper-dialog.d.ts b/paper-dialog.d.ts
index 5a34d0a..42126b4 100644
--- a/paper-dialog.d.ts
+++ b/paper-dialog.d.ts
@@ -112,21 +112,21 @@ interface PaperDialogElement extends Polymer.Element, Polymer.PaperDialogBehavio
   ready(): void;
 
   /**
-   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * `paper-dialog` doesn't depend anymore on `neon-animation`.
    * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
    * now is a no-op.
    */
   cancelAnimation(): void;
 
   /**
-   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * `paper-dialog` doesn't depend anymore on `neon-animation`.
    * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
    * now is a no-op.
    */
   playAnimation(type?: string, cookie?: object): void;
 
   /**
-   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * `paper-dialog` doesn't depend anymore on `neon-animation`.
    * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
    * now is a no-op.
    */
diff --git a/paper-dialog.html b/paper-dialog.html
index 4865de2..7f41df3 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -204,7 +204,7 @@ <h2>Header</h2>
     },
 
     /**
-      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * `paper-dialog` doesn't depend anymore on `neon-animation`.
       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
       * now is a no-op.
       * @deprecated
@@ -212,7 +212,7 @@ <h2>Header</h2>
     cancelAnimation: function() {},
 
     /**
-      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * `paper-dialog` doesn't depend anymore on `neon-animation`.
       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
       * now is a no-op.
       * @param {string=} type
@@ -222,7 +222,7 @@ <h2>Header</h2>
     playAnimation: function(type, cookie) {},
 
     /**
-      * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+      * `paper-dialog` doesn't depend anymore on `neon-animation`.
       * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
       * now is a no-op.
       * @deprecated