From 86bc783160b865c9c93d4a76927a0718f3d3209b Mon Sep 17 00:00:00 2001
From: John Messerly <jmesserly@google.com>
Date: Wed, 10 Dec 2014 16:46:21 -0800
Subject: [PATCH] Expands the `<content>` element to remember logical DOM

It's now capable of rerendering if logical DOM changes.

Notes:

* lightChildren, if present, indicates the logical child views. lightParent will be set for those elements.
* lightChildren is an array, because that seemed like the "simplest thing that could possibly work". We could expose linked list APIs instead (firstChild, nextSibling, etc) if we wanted.
* addLightChild/removeLightChild are a convenience, but not recommended for adding large number of items because they automatically call distributeContent(). Another option would be to schedule it and do it lazily.
---
 polymer-core.html         |   3 -
 src/features/content.html | 304 +++++++++++++++++++++++++++---
 src/features/ready.html   |   5 +
 test/index.html           |   1 +
 test/unit/content.html    | 383 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 669 insertions(+), 27 deletions(-)
 create mode 100644 test/unit/content.html

diff --git a/polymer-core.html b/polymer-core.html
index 96e59d438e..1879611959 100644
--- a/polymer-core.html
+++ b/polymer-core.html
@@ -58,9 +58,6 @@
       }
       this.listenListeners();
       this.listenKeyPresses();
-      if (this._useContent) {
-        this.distributeContent();
-      }
       this.takeAttributes();
     }
 
diff --git a/src/features/content.html b/src/features/content.html
index b0c56943e0..1fa9118fbe 100644
--- a/src/features/content.html
+++ b/src/features/content.html
@@ -7,7 +7,16 @@
 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
 -->
+<link rel="import" href="ready.html">
 <script>
+(function() {
+
+  /**
+
+    Implements a pared down version of ShadowDOM's scoping, which is easy to
+    polyfill across browsers.
+
+  */
 
   Base.addFeature({
 
@@ -27,38 +36,285 @@
     },
 
     poolContent: function() {
-      // pool the light dom
-      var pool = document.createDocumentFragment();
-      while (this.firstChild) {
-        pool.appendChild(this.firstChild);
-      }
-      this.contentPool = pool;
       // capture lightChildren to help reify dom scoping
-      this.lightChildren =
-        Array.prototype.slice.call(this.contentPool.childNodes, 0);
+      saveLightChildrenIfNeeded(this);
+      // create our lite ShadowRoot document fragment
+      // this is where the <template> contents will be stamped
+      var root = document.createDocumentFragment();
+      // add a pointer back from the lite ShadowRoot to this node.
+      root.host = this;
+      // initialize the `root` pointers: `root` is guarenteed to always be
+      // available, and be either `this` or `this.contentRoot`. By contrast,
+      // `contentRoot` is only set if _useContent is true. 
+      this.contentRoot = root;
+      this.root = root;
+      // TODO(jmesserly): ad-hoc signal for `ShadowDOM-lite-enhanced` root
+      root.isShadowRoot = true;
     },
 
     distributeContent: function() {
-      var content, pool = this.contentPool;
-      // replace <content> with nodes teleported from pool
-      while (content = this.querySelector('content')) {
-        var select = content.getAttribute('select');
-        var frag = pool;
-        if (select) {
-          frag = document.createDocumentFragment();
-          // TODO(sjmiles): diverges from ShadowDOM spec behavior: ShadowDOM
-          // only selects top level nodes from pool. Iterate children and match
-          // manually instead.
-          var nodes = pool.querySelectorAll(select);
-          for (var i=0, l=nodes.length; i<l; i++) {
-            frag.appendChild(nodes[i]);
+      // sanity check to guard against uninitialized state
+      if (!this.contentRoot) {
+        throw Error('poolContent() must be called before distributeContent()');
+      }
+      // reset distributions
+      this._resetLightTree(this.contentRoot);
+      // compute which nodes should be distributed where
+      // TODO(jmesserly): this is simplified because we assume a single
+      // ShadowRoot per host and no `<shadow>`.
+      this._poolDistribution(this.contentRoot, this._poolPopulation());
+      // update the real DOM to be the composed tree
+      this._composeTree(this);
+    },
+
+    // TODO(jmesserly): these methods will perform in O(N^2) where N is the
+    // number of times they are called. That is because each call does
+    // `distibuteContent` and the work it needs to do increases with each
+    // subsequent call. An alternative approach would be to schedule the work,
+    // and do it asynchronously, which would give us O(N) performance because
+    // we'd do it once per frame in the worst case.
+    addLightChild: function(node, opt_index) {
+      saveLightChildrenIfNeeded(this);
+      if (opt_index === undefined) {
+        this.lightChildren.push(node);
+      } else {
+        this.lightChildren.splice(opt_index, 0, node);
+      }
+      this.distributeContent();
+    },
+
+    removeLightChild: function(node) {
+      saveLightChildrenIfNeeded(this);
+      var index = this.lightChildren.indexOf(node);
+      if (index < 0) {
+        throw Error('The node to be removed is not a light child of this node');
+      }
+      this.lightChildren.splice(index, 1);
+      this.distributeContent();
+    },
+
+    // This is a polyfill for Element.prototype.matches, which is sometimes
+    // still prefixed. Alternatively we could just polyfill it somewhere.
+    // Note that the arguments are reversed from what you might expect.
+    elementMatches: function(selector, node) {
+      if (node === undefined) node = this;
+      return matchesSelector.call(node, selector);
+    },
+
+    _poolPopulation: function() {
+      // Gather the pool of nodes that should be distributed. We will combine
+      // these with the "content root" to arrive at the composed tree.
+      var pool = [];
+      var children = getLightChildren(this);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (isInsertionPoint(child)) {
+          pool.push.apply(pool, child._distributedNodes);
+        } else {
+          pool.push(child);
+        }
+      }
+      return pool;
+    },
+
+    // Many of the following methods are all conceptually static, but they are
+    // included here as "protected" methods to allow overriding.
+
+    _resetLightTree: function(node) {
+      var children = getLightChildren(node);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (isInsertionPoint(child)) {
+          child._distributedNodes = [];
+        } else if (child._destinationInsertionPoints) {
+          child._destinationInsertionPoints = undefined;
+        }
+        this._resetLightTree(child);
+      }
+    },
+
+    _poolDistribution: function(node, pool) {
+      if (node.localName == 'content') {
+        // distribute nodes from the pool that this selector matches
+        var content = node;
+        var anyDistributed = false;
+        for (var i = 0; i < pool.length; i++) {
+          var node = pool[i];
+          // skip nodes that were already used
+          if (!node) continue;
+          // distribute this node if it matches
+          if (this._matchesContentSelect(node, content)) {
+            distributeNodeInto(node, content);
+            // remove this node from the pool
+            pool[i] = undefined;
+            // since at least one node matched, we won't need fallback content
+            anyDistributed = true;
           }
         }
-        // content self-destructs
-        content.parentNode.replaceChild(frag, content);
+        // Fallback content if nothing was distributed here
+        if (!anyDistributed) {
+          var children = getLightChildren(content);
+          for (var i = 0; i < children.length; i++) {
+            distributeNodeInto(children[i], content);
+          }
+        }
+        return;
       }
-    }
+      // recursively distribute.
+      var children = getLightChildren(node);
+      for (var i = 0; i < children.length; i++) {
+        this._poolDistribution(children[i], pool);
+      }
+    },
+
+    _composeTree: function(node) {
+      var children = this._composeNode(node);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        // If the child has a content root, let it compose itself.
+        if (!child.contentRoot) {
+          this._composeTree(child);
+        }
+      }
+      this._updateChildNodes(node, children);
+    },
+
+    _composeNode: function(node) {
+      var children = [];
+      var lightChildren = getLightChildren(node.contentRoot || node);
+      for (var i = 0; i < lightChildren.length; i++) {
+        var child = lightChildren[i];
+        if (isInsertionPoint(child)) {
+          var distributedNodes = child._distributedNodes;
+          for (var j = 0; j < distributedNodes.length; j++) {
+            var distributedNode = distributedNodes[j];
+            if (isFinalDestination(child, distributedNode)) {
+              children.push(distributedNode);
+            }
+          }
+        } else {
+          children.push(child);
+        }
+      }
+      return children;
+    },
+
+    _updateChildNodes: function(node, children) {
+      // Add the children that need to be added. Walk the list backwards so we can
+      // use insertBefore easily.
+      for (var i = children.length - 1, nextNode = null; i >= 0; i--) {
+        var child = children[i];
+        // if the node is in the wrong place, move it.
+        if (child.parentNode != node || child.nextSibling != nextNode) {
+          insertBefore(node, child, nextNode);
+        }
+        nextNode = child;
+      }
+      // We just added nodes in order, starting from the end, so anything before
+      // the first node is gone and should be removed.
+      var first = children[0];
+      var child = node.firstChild;
+      while (child && child != first) {
+        var nextNode = child.nextSibling;
+        node.removeChild(child);
+        child = nextNode;
+      }
+    },
 
+    _matchesContentSelect: function(node, contentElement) {
+      var select = contentElement.getAttribute('select');
+      // no selector matches all nodes (including text)
+      if (!select) return true;
+      select = select.trim();
+      // same thing if it had only whitespace
+      if (!select) return true;
+      // selectors can only match Elements
+      if (!(node instanceof Element)) return false;
+      // only valid selectors can match:
+      //   TypeSelector
+      //   *
+      //   ClassSelector
+      //   IDSelector
+      //   AttributeSelector
+      //   negation
+      var validSelectors = /^(:not\()?[*.#[a-zA-Z_|]/;
+      if (!validSelectors.test(select)) return false;
+      try {
+        return this.elementMatches(select, node);
+      } catch (ex) {
+        // Invalid selector.
+        return false;
+      }
+    },
   });
 
+  function distributeNodeInto(child, insertionPoint) {
+    insertionPoint._distributedNodes.push(child);
+    var points = child._destinationInsertionPoints;
+    if (!points) {
+      child._destinationInsertionPoints = [insertionPoint];
+    } else {
+      points.push(insertionPoint);
+    }
+  }
+
+  function isFinalDestination(insertionPoint, node) {
+    var points = node._destinationInsertionPoints;
+    return points && points[points.length - 1] === insertionPoint;
+  }
+
+  function isInsertionPoint(node) {
+    // TODO(jmesserly): we could add back 'shadow' support here.
+    return node.localName == 'content';
+  }
+
+  function getLightChildren(node) {
+    var children = node.lightChildren;
+    return children ? children : node.childNodes;
+  }
+
+  function insertBefore(parentNode, newChild, refChild) {
+    // remove child from its old parent first
+    remove(newChild);
+    // make sure we never lose logical DOM information:
+    // if the parentNode doesn't have lightChildren, save that information now.
+    saveLightChildrenIfNeeded(parentNode);
+    // insert it into the real DOM
+    parentNode.insertBefore(newChild, refChild);
+  }
+
+  function remove(node) {
+    var parentNode = node.parentNode;
+    if (!parentNode) return;
+    // make sure we never lose logical DOM information:
+    // if the parentNode doesn't have lightChildren, save that information now.
+    saveLightChildrenIfNeeded(parentNode);
+    // remove it from the real DOM
+    parentNode.removeChild(node);
+  }
+
+  function saveLightChildrenIfNeeded(node) {
+    // Capture the list of light children. It's important to do this before we
+    // start transforming the DOM into "rendered" state.
+    // 
+    // Children may be added to this list dynamically. It will be treated as the
+    // source of truth for the light children of the element. This element's
+    // actual children will be treated as the rendered state once lightChildren
+    // is populated.
+    if (!node.lightChildren) {
+      var children = [];
+      for (var child = node.firstChild; child; child = child.nextSibling) {
+        children.push(child);
+        child.lightParent = node;
+      }
+      node.lightChildren = children;
+    }
+  }
+
+  var proto = Element.prototype;
+  var matchesSelector = proto.matches || proto.matchesSelector ||
+      proto.mozMatchesSelector || proto.msMatchesSelector ||
+      proto.oMatchesSelector || proto.webkitMatchesSelector;
+
+})();
 </script>
diff --git a/src/features/ready.html b/src/features/ready.html
index 7f81b08a3b..1e09df3d6a 100644
--- a/src/features/ready.html
+++ b/src/features/ready.html
@@ -79,6 +79,11 @@
 
     _ready: function() {
       this._readied = true;
+      // TODO(jmesserly): this is a hook to allow content.html to be called
+      // before "ready". This needs to be factored better.
+      if (this._useContent) {
+        this.distributeContent();
+      }
       this.ready();
     },
 
diff --git a/test/index.html b/test/index.html
index 916e64d65a..01c2b2e5a0 100644
--- a/test/index.html
+++ b/test/index.html
@@ -18,6 +18,7 @@
     WCT.loadSuites([
       'unit/base.html',
       'unit/ready.html',
+      'unit/content.html'
     ]);
   </script>
 </body>
diff --git a/test/unit/content.html b/test/unit/content.html
new file mode 100644
index 0000000000..7d491e19c8
--- /dev/null
+++ b/test/unit/content.html
@@ -0,0 +1,383 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 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>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../src/polymer.html">
+  <link rel="import" href="../../src/features/content.html">
+</head>
+<body>
+<script>
+
+var registered = false;
+function registerTestElement() {
+  if (registered) return;
+  Polymer({name: 'x-content-test'});
+  registered = true;
+}
+
+/**
+ * Test the `<content>` element distribution algorithm by verifying the
+ * resulting composed tree structure.
+ */
+function testRender(descr, hostInnerHtml, shadowRootHtml, expectedHtml) {
+  test(descr, function() {
+    registerTestElement();
+    // Create an instance of the test element.
+    var host = document.createElement('x-content-test');
+    // Populate the initial pool of light DOM children.
+    host.innerHTML = hostInnerHtml;
+    host.poolContent();
+    // Pretend we're stamping the template contents.
+    setInnerHTML(host.root, shadowRootHtml);
+    // Invoke distribution and verify the resulting tree.
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, expectedHtml);
+  });
+}
+
+testRender('Empty shadow', 'abc', '', '');
+testRender('Simple shadow', 'abc', 'def', 'def');
+testRender('Fallback shadow', 'abc',
+           '<content select="xxx">fallback</content>', 'fallback');
+testRender('Content', 'abc',
+           '<content>fallback</content>', 'abc');
+testRender('Content before', 'abc',
+           'before<content>fallback</content>', 'beforeabc');
+testRender('Content after', 'abc',
+           '<content>fallback</content>after', 'abcafter');
+
+suite('render content', function() {
+  testRender('no select', '<a href="">Link</a> <b>bold</b>',
+             '<content></content>',
+             '<a href="">Link</a> <b>bold</b>');
+  testRender('select ""', '<a href="">Link</a> <b>bold</b>',
+             '<content select=""></content>',
+             '<a href="">Link</a> <b>bold</b>');
+  testRender('select *', '<a href="">Link</a> <b>bold</b>',
+             '<content select="*"></content>',
+             '<a href="">Link</a><b>bold</b>');
+
+  testRender('select .a',
+             '<a class="a">a</a> <a class="b">b</a>',
+             '<content select=".a"></content>',
+             '<a class="a">a</a>');
+
+  testRender('select .b .a',
+             '<a class="a">a</a> <a class="b">b</a>',
+             '<content select=".b"></content><content select=".a"></content>',
+             '<a class="b">b</a><a class="a">a</a>');
+});
+
+
+test('Reproject', function() {
+  var host = document.createElement('x-content-test');
+  host.innerHTML = '<a></a>';
+  var a = host.firstChild;
+  host.poolContent();
+  setInnerHTML(host.root, '<x-content-test id="p">' +
+      '<b></b><content></content></x-content-test>');
+
+  var p = host.root.firstChild;
+  var b = p.firstChild;
+  var content = p.lastChild;
+
+  // force upgrade on polyfilled browsers
+  CustomElements.upgrade(p);
+
+  p.poolContent();
+  setInnerHTML(p.root,
+      'a: <content select=a></content>b: <content select=b></content>');
+  var textNodeA = p.root.firstChild;
+  var contentA = p.root.childNodes[1];
+  var textNodeB = p.root.childNodes[2]
+  var contentB = p.root.childNodes[3];
+
+  function testRender() {
+    // Simulate the correct ordering as "ready" would fire.
+    host.distributeContent();
+    p.distributeContent();
+
+    assert.strictEqual(host.innerHTML,
+        '<x-content-test id="p">a: <a></a>b: <b></b></x-content-test>');
+
+    assertArrayEqual(host.lightChildren, [a]);
+    assert.strictEqual(a.lightParent, host);
+    assertArrayEqual(host.root.lightChildren, [p]);
+    assert.strictEqual(p.lightParent, host.root);
+    assertArrayEqual(p.lightChildren, [b, content]);
+    assert.strictEqual(b.lightParent, p);
+    assert.strictEqual(content.lightParent, p);
+    assertArrayEqual(p.root.lightChildren,
+        [textNodeA, contentA, textNodeB, contentB]);
+  }
+
+  testRender();
+  testRender();
+});
+
+
+suite('Mutate light DOM', function() {
+  test('removeAllChildNodes - mutate host', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content>fallback</content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    host.firstChild.textContent = '';
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a></a>');
+
+    host.lightChildren = [];
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, 'fallback');
+  });
+
+
+  test('removeAllChildNodes - mutate shadow', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content><b>after</b>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b>after</b>');
+
+    host.root.lightChildren[1].textContent = '';
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b></b>');
+
+    host.root.lightChildren = [];
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '');
+  });
+
+  test('removeAllChildNodes - mutate shadow fallback', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content select="xxx"><b>fallback</b></content>');
+    var b = host.root.firstChild.firstChild;
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b>fallback</b>');
+
+    b.textContent = '';
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b></b>');
+
+    host.root.firstChild.lightChildren = [];
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '');
+
+    host.root.lightChildren = [];
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '');
+  });
+
+  test('removeChild - mutate host', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content>fallback</content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    host.firstChild.removeChild(host.firstChild.firstChild);
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a></a>');
+
+    host.lightChildren = [];
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, 'fallback');
+  });
+
+  test('removeChild - mutate host 2', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a></a><b></b>';
+    var a = host.firstChild;
+    var b = a.nextSibling;
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content>fallback</content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a></a><b></b>');
+
+    host.removeLightChild(b);
+    assert.strictEqual(host.innerHTML, '<a></a>');
+
+    host.removeLightChild(a);
+    assert.strictEqual(host.innerHTML, 'fallback');
+  });
+
+  test('removeChild - mutate shadow', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content><b>after</b>');
+    var b = host.root.lastChild;
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b>after</b>');
+
+    b.removeChild(b.firstChild);
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b></b>');
+
+    host.root.lightChildren.splice(1, 1); // remove b
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    host.root.lightChildren = []; // remove a
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '');
+  });
+
+  test('setAttribute select', function() {
+    // TODO(arv): DOM bindings for select.
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a><b>World</b>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content select="b">fallback b</content>' +
+                            '<content select="a">fallback a</content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b>World</b><a>Hello</a>');
+
+    host.root.firstChild.setAttribute('select', 'xxx');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, 'fallback b<a>Hello</a>');
+
+    host.root.firstChild.setAttribute('select', '');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b>World</b>fallback a');
+  });
+
+  test('appendChild - mutate host', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.addLightChild(b);
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b></b>');
+  });
+
+  test('appendChild - mutate shadow', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.root.appendChild(b);
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a><b></b>');
+  });
+
+  test('insertBefore - mutate host', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+    var a = host.firstChild;
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.addLightChild(b, 0);
+    assert.strictEqual(host.innerHTML, '<b></b><a>Hello</a>');
+  });
+
+  test('insertBefore - mutate shadow', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    var content = host.root.firstChild;
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.root.insertBefore(b, content);
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b></b><a>Hello</a>');
+  });
+
+  test('replaceChild - mutate host', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+    var a = host.firstChild;
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.lightChildren[0] = b;
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b></b>');
+  });
+
+  test('replaceChild - mutate shadow', function() {
+    var host = document.createElement('x-content-test');
+    host.innerHTML = '<a>Hello</a>';
+
+    host.poolContent();
+    setInnerHTML(host.root, '<content></content>');
+    var content = host.root.firstChild;
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<a>Hello</a>');
+
+    var b = document.createElement('b');
+    host.root.replaceChild(b, content);
+    host.distributeContent();
+    assert.strictEqual(host.innerHTML, '<b></b>');
+  });
+
+});
+
+function setInnerHTML(node, value) {
+  node.textContent = '';
+  var temp = node.ownerDocument.createElement('div');
+  temp.innerHTML = value;
+  var firstChild;
+  while (firstChild = temp.firstChild) {
+    node.appendChild(firstChild);
+  }
+}
+
+function assertArrayEqual(a, b, msg) {
+  assert.equal(a.length, b.length, msg);
+  for (var i = 0; i < a.length; i++) {
+    assert.equal(a[i], b[i], msg);
+  }
+}
+
+</script>
+</body>
+</html>