Fix issue where the DOM tree could get out of sync.

The problem occurs when a node that requires invalidation is moved into
anohter node that does not require invalidation. The internal pointers
are no updated as expected.

Fixes https://github.com/Polymer/platform/issues/48

src/wrappers/Node.js

@@ -184,6 +184,18 @@
     return df;
   }
 
+  function clearChildNodes(wrapper) {
+    if (wrapper.firstChild_ !== undefined) {
+      var child = wrapper.firstChild_;
+      while (child) {
+        var tmp = child;
+        child = child.nextSibling_;
+        tmp.parentNode_ = tmp.previousSibling_ = tmp.nextSibling_ = undefined;
+      }
+    }
+    wrapper.firstChild_ = wrapper.lastChild_ = undefined;
+  }
+
   function removeAllChildNodes(wrapper) {
     if (wrapper.invalidateShadowRenderer()) {
       var childWrapper = wrapper.firstChild;
@@ -325,6 +337,7 @@
 
       if (useNative) {
         ensureSameOwnerDocument(this, childWrapper);
+        clearChildNodes(this);
         originalInsertBefore.call(this.impl, unwrap(childWrapper), refNode);
       } else {
         if (!previousNode)
@@ -402,6 +415,7 @@
         childWrapper.previousSibling_ = childWrapper.nextSibling_ =
             childWrapper.parentNode_ = undefined;
       } else {
+        clearChildNodes(this);
         removeChildOriginalHelper(this.impl, childNode);
       }
 
@@ -467,6 +481,7 @@
         }
       } else {
         ensureSameOwnerDocument(this, newChildWrapper);
+        clearChildNodes(this);
         originalReplaceChild.call(this.impl, unwrap(newChildWrapper),
                                   oldChildNode);
       }
@@ -559,6 +574,7 @@
           this.appendChild(textNode);
         }
       } else {
+        clearChildNodes(this);
         this.impl.textContent = textContent;
       }
 

test/js/test.js

@@ -491,4 +491,28 @@ suite('Shadow DOM', function() {
     assert.equal(count, 0);
   });
   */
+
+  test('moving nodes from light to shadow - issue 48', function() {
+    var div = document.createElement('div');
+    div.innerHTML = '<a></a><b></b>';
+    var a = div.firstChild;
+    var b = div.lastChild;
+
+    var sr = div.createShadowRoot();
+    sr.innerHTML = '<c></c>';
+    var c = sr.firstChild;
+
+    assert.equal(getVisualInnerHtml(div), '<c></c>');
+
+    c.appendChild(a);
+    assert.equal(getVisualInnerHtml(div), '<c><a></a></c>');
+
+    c.textContent = '';
+    assert.equal(getVisualInnerHtml(div), '<c></c>');
+
+    c.appendChild(b);
+    assert.equal(getVisualInnerHtml(div), '<c><b></b></c>');
+
+  });
+
 });