From 7a244fa5860ed7c8ad8d2a4e6385a8b398219f35 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Mon, 28 Mar 2016 17:37:06 -0700
Subject: [PATCH] Delay detached callback with the same strategy as attached
 callback

Keep ordering consistant
Fixes #3531
---
 src/lib/base.html                   | 14 ++++--
 test/runner.html                    |  3 ++
 test/unit/attach-detach-timing.html | 74 +++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 test/unit/attach-detach-timing.html
diff --git a/src/lib/base.html b/src/lib/base.html
index 7d24ebf4ab..d692a8ed8c 100644
--- a/src/lib/base.html
+++ b/src/lib/base.html
@@ -50,10 +50,10 @@
     },
 
     /**
-     * As an optimization, when `Polymer.Settings.lazyRegister` is set to true 
-     * registration tasks are deferred until the first instance of the element 
+     * As an optimization, when `Polymer.Settings.lazyRegister` is set to true
+     * registration tasks are deferred until the first instance of the element
      * is created. If an element should not defer registration tasks until
-     * this time, `ensureRegisterFinished` may be called 
+     * this time, `ensureRegisterFinished` may be called
      * on the element's prototype.
      */
     ensureRegisterFinished: function() {
@@ -91,8 +91,12 @@
 
     // reserved for canonical behavior
     detachedCallback: function() {
-      this.isAttached = false;
-      this._doBehavior('detached'); // abstract
+      // NOTE: duplicate attachedCallback behavior
+      var self = this;
+      Polymer.RenderStatus.whenReady(function() {
+        self.isAttached = false;
+        self._doBehavior('detached'); // abstract
+      });
     },
 
     // reserved for canonical behavior
diff --git a/test/runner.html b/test/runner.html
index 53410cee75..6ef64721da 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -79,6 +79,9 @@
       var idx = suites.indexOf('unit/polymer-dom-shadow.html');
       suites.splice(idx, 0, 'unit/polymer-dom-native-shadow.html');
     }
+    if (window.customElements || document.registerElement) {
+      suites.push('unit/attach-detach-timing.html');
+    }
     WCT.loadSuites(suites);
   </script>
 </body>
diff --git a/test/unit/attach-detach-timing.html b/test/unit/attach-detach-timing.html
new file mode 100644
index 0000000000..070259f7c1
--- /dev/null
+++ b/test/unit/attach-detach-timing.html
@@ -0,0 +1,74 @@
+<!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
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script>
+    window.WCT = {
+      // don't wait for HTML Imports to load
+      waitFor: function(cb) {
+        cb();
+      }
+    };
+    </script>
+    <script src="../../../web-component-tester/browser.js"></script>
+    <link rel="import" href="../../polymer.html">
+    <script>
+    Polymer({
+      is: 'attach-detach',
+      properties: {
+        stream: {
+          type: Array,
+          value: function(){ return []; }
+        }
+      },
+      attached: function() {
+        this.stream.push('attached');
+      },
+      detached: function() {
+        this.stream.push('detached');
+      }
+    });
+    </script>
+    <script>
+      function checkOrder(el) {
+        assert.equal(el.stream.join(' '), [
+          'attached',
+          'detached'
+        ].join(' '));
+      }
+    </script>
+  </head>
+  <body>
+    <attach-detach id="ad"></attach-detach>
+    <script>
+    var ad = document.getElementById('ad');
+    ad.remove();
+    var el = document.createElement('attach-detach');
+    document.body.appendChild(el);
+    el.remove();
+    test('attach() and detach() are correct for upgraded elements', function() {
+      checkOrder(ad);
+    });
+    test('attach() and detach() are correct for imperative elements', function() {
+      checkOrder(el);
+    });
+    test('attach() and detach() are correct for elements made after load', function() {
+      var e = document.createElement('attach-detach');
+      document.body.appendChild(e);
+      e.remove();
+      checkOrder(e);
+    });
+    </script>
+  </body>
+</html>
