From bb85e2b6d66d25e002708b601b7361c4f06d398b Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 4 Dec 2015 15:38:20 -0800
Subject: [PATCH] Ensure dom-if in host does not restamp when host detaches.
 Fixes #3125.

---
 src/lib/template/dom-if.html   |  27 +++++--
 test/unit/dom-if-elements.html |  24 ++++++
 test/unit/dom-if.html          | 136 +++++++++++++++++++++++++++++++--
 3 files changed, 172 insertions(+), 15 deletions(-)

diff --git a/src/lib/template/dom-if.html b/src/lib/template/dom-if.html
index 236a0f50ba..31b68cfbdc 100644
--- a/src/lib/template/dom-if.html
+++ b/src/lib/template/dom-if.html
@@ -74,7 +74,9 @@
 
     detached: function() {
       // TODO(kschaaf): add logic to re-stamp in attached?
-      this._teardownInstance();
+      if (!this.parentNode) {
+        this._teardownInstance();
+      }
     },
 
     attached: function() {
@@ -116,16 +118,27 @@
     },
 
     _ensureInstance: function() {
-      if (!this._instance) {
-        var parentNode = Polymer.dom(this).parentNode;
-        // Guard against element being detached while render was queued
-        if (parentNode) {
-          var parent = Polymer.dom(parentNode);
+      var parentNode = Polymer.dom(this).parentNode;
+      // Guard against element being detached while render was queued
+      if (parentNode) {
+        var parent = Polymer.dom(parentNode);
+        if (!this._instance) {
           // TODO(sorvell): pickup stamping logic from x-repeat
           this._instance = this.stamp();
           var root = this._instance.root;
           // TODO(sorvell): this incantation needs to be simpler.
           parent.insertBefore(root, this);
+        } else {
+          var c$ = this._instance._children;
+          if (c$ && c$.length) {
+            // Detect case where dom-if was re-attached in new position
+            var lastChild = Polymer.dom(this).previousSibling;
+            if (lastChild !== c$[c$.length-1]) {
+              for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
+                parent.insertBefore(n, this);
+              }
+            }
+          }
         }
       }
     },
@@ -133,7 +146,7 @@
     _teardownInstance: function() {
       if (this._instance) {
         var c$ = this._instance._children;
-        if (c$) {
+        if (c$ && c$.length) {
           // use first child parent, for case when dom-if may have been detached
           var parent = Polymer.dom(Polymer.dom(c$[0]).parentNode);
           for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
diff --git a/test/unit/dom-if-elements.html b/test/unit/dom-if-elements.html
index f569bebfa3..26f89903c6 100644
--- a/test/unit/dom-if-elements.html
+++ b/test/unit/dom-if-elements.html
@@ -175,3 +175,27 @@
   });
   </script>
 </dom-module>
+
+<dom-module id="x-host">
+  <template>
+    <template id="domif" is="dom-if" if>
+      <x-client></x-client>
+      <x-client></x-client>
+      <x-client></x-client>
+    </template>
+  </template>
+  <script>
+  Polymer({
+    is: 'x-host'
+  });
+  Polymer({
+    is: 'x-client',
+    statics: {
+      uid: 0
+    },
+    ready: function() {
+      this.uid = this.statics.uid++;
+    }
+  });
+  </script>
+</dom-module>
diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
index 1050514d99..1f379e454c 100644
--- a/test/unit/dom-if.html
+++ b/test/unit/dom-if.html
@@ -56,9 +56,16 @@
     </template>
   </div>
 
-  <template is="dom-if" id="simple">
-    <div></div>
-  </template>
+  <div id="outerContainer">
+    <template is="dom-if" id="simple">
+      <x-client></x-client>
+      <x-client></x-client>
+      <x-client></x-client>
+    </template>
+
+    <div id="innerContainer">
+    </div>
+  </div>
 
   <script>
 
@@ -497,19 +504,132 @@
 
     });
 
-    suite('queueing race conditions', function() {
+    suite('attach/detach tests', function() {
+
+      test('remove, append domif', function(done) {
+        var domif = document.querySelector('#simple');
+        domif.if = true;
+        outerContainer.removeChild(domif);
+        setTimeout(function() {
+          var clients = outerContainer.querySelectorAll('x-client');
+          assert.equal(clients.length, 0);
+          outerContainer.appendChild(domif);
+          setTimeout(function() {
+            var clients = outerContainer.querySelectorAll('x-client');
+            assert.equal(clients[0].uid, 0);
+            assert.equal(clients[1].uid, 1);
+            assert.equal(clients[2].uid, 2);
+            assert.equal(clients[1].previousElementSibling, clients[0]);
+            assert.equal(clients[2].previousElementSibling, clients[1]);
+            assert.equal(domif.previousElementSibling, clients[2]);
+            done();
+          });
+        });
+      });
 
-      test('domif=true, attach, detach', function(done) {
+      test('move domif (clients persist)', function(done) {
         var domif = document.querySelector('#simple');
         domif.if = true;
-        document.body.appendChild(domif);
-        document.body.removeChild(domif);
+        Polymer.dom(innerContainer).appendChild(domif);
         setTimeout(function() {
-          document.body.appendChild(domif);
+          var clients = innerContainer.querySelectorAll('x-client');
+          // Same clients as before since move happened in one turn
+          assert.equal(clients[0].uid, 0);
+          assert.equal(clients[1].uid, 1);
+          assert.equal(clients[2].uid, 2);
+          assert.equal(clients[1].previousElementSibling, clients[0]);
+          assert.equal(clients[2].previousElementSibling, clients[1]);
+          assert.equal(domif.previousElementSibling, clients[2]);
           done();
         });
       });
 
+      test('remove, wait, append domif (clients recreated)', function(done) {
+        var domif = document.querySelector('#simple');
+        domif.if = true;
+        Polymer.dom(innerContainer).removeChild(domif);
+        setTimeout(function() {
+          var clients = innerContainer.querySelectorAll('x-client');
+          assert.equal(clients.length, 0);
+          Polymer.dom(innerContainer).appendChild(domif);
+          setTimeout(function() {
+            var clients = outerContainer.querySelectorAll('x-client');
+            // New clients since removed for a turn
+            assert.equal(clients[0].uid, 3);
+            assert.equal(clients[1].uid, 4);
+            assert.equal(clients[2].uid, 5);
+            assert.equal(clients[1].previousElementSibling, clients[0]);
+            assert.equal(clients[2].previousElementSibling, clients[1]);
+            assert.equal(domif.previousElementSibling, clients[2]);
+            done();
+          });
+        });
+      });
+
+      test('move host with domif (clients persist)', function(done) {
+        var host = document.createElement('x-host');
+        Polymer.dom(outerContainer).appendChild(host);
+        setTimeout(function() {
+          var clients = Polymer.dom(host.root).querySelectorAll('x-client');
+          // New clients created in host instance
+          assert.equal(clients[0].uid, 6);
+          assert.equal(clients[1].uid, 7);
+          assert.equal(clients[2].uid, 8);
+          assert.equal(clients[1].previousElementSibling, clients[0]);
+          assert.equal(clients[2].previousElementSibling, clients[1]);
+          assert.equal(host.$.domif.previousElementSibling, clients[2]);
+          Polymer.dom(innerContainer).appendChild(host);
+          setTimeout(function() {
+            var clients = Polymer.dom(host.root).querySelectorAll('x-client');
+            // Clients in removed host persist
+            assert.equal(clients[0].uid, 6);
+            assert.equal(clients[1].uid, 7);
+            assert.equal(clients[2].uid, 8);
+            assert.equal(clients[1].previousElementSibling, clients[0]);
+            assert.equal(clients[2].previousElementSibling, clients[1]);
+            assert.equal(host.$.domif.previousElementSibling, clients[2]);
+            done();
+          });
+        });
+      });
+
+      test('remove, wait, append host with domif (clients persist)', function(done) {
+        var host = document.createElement('x-host');
+        Polymer.dom(outerContainer).appendChild(host);
+        setTimeout(function() {
+          var clients = Polymer.dom(host.root).querySelectorAll('x-client');
+          // New clients created in host instance
+          assert.equal(clients[0].uid, 9);
+          assert.equal(clients[1].uid, 10);
+          assert.equal(clients[2].uid, 11);
+          assert.equal(clients[1].previousElementSibling, clients[0]);
+          assert.equal(clients[2].previousElementSibling, clients[1]);
+          assert.equal(host.$.domif.previousElementSibling, clients[2]);
+          Polymer.dom(outerContainer).removeChild(host);
+          setTimeout(function() {
+            // Clients in removed host persist
+            assert.equal(clients[0].uid, 9);
+            assert.equal(clients[1].uid, 10);
+            assert.equal(clients[2].uid, 11);
+            assert.equal(clients[1].previousElementSibling, clients[0]);
+            assert.equal(clients[2].previousElementSibling, clients[1]);
+            assert.equal(host.$.domif.previousElementSibling, clients[2]);
+            Polymer.dom(innerContainer).appendChild(host);
+            setTimeout(function() {
+              // Clients in removed host persist
+              var clients = Polymer.dom(host.root).querySelectorAll('x-client');
+              assert.equal(clients[0].uid, 9);
+              assert.equal(clients[1].uid, 10);
+              assert.equal(clients[2].uid, 11);
+              assert.equal(clients[1].previousElementSibling, clients[0]);
+              assert.equal(clients[2].previousElementSibling, clients[1]);
+              assert.equal(host.$.domif.previousElementSibling, clients[2]);
+              done();
+            });
+          });
+        });
+      });
+
     });