Merge pull request #496 from Polymer/polymer_issue_421

allow createShadowRoot on body
googlearchive · Sep 5, 2014 · 5230708 · 5230708
2 parents dca7608 + d5640d2
commit 5230708
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 18 deletions.
diff --git a/src/ShadowRenderer.js b/src/ShadowRenderer.js
@@ -73,7 +73,7 @@
       refChildWrapper.previousSibling_ = refChildWrapper.previousSibling;
     }
 
-    parentNode.insertBefore(newChild, refChild);
+    scope.originalInsertBefore.call(parentNode, newChild, refChild);
   }
 
   function remove(nodeWrapper) {
@@ -95,7 +95,7 @@
     if (parentNodeWrapper.firstChild === nodeWrapper)
       parentNodeWrapper.firstChild_ = nodeWrapper;
 
-    parentNode.removeChild(node);
+    scope.originalRemoveChild.call(parentNode, node);
   }
 
   var distributedNodesTable = new WeakMap();

diff --git a/src/wrappers/Node.js b/src/wrappers/Node.js
@@ -730,6 +730,8 @@
   scope.nodeWasRemoved = nodeWasRemoved;
   scope.nodesWereAdded = nodesWereAdded;
   scope.nodesWereRemoved = nodesWereRemoved;
+  scope.originalInsertBefore = originalInsertBefore;
+  scope.originalRemoveChild = originalRemoveChild;
   scope.snapshotNodeList = snapshotNodeList;
   scope.wrappers.Node = Node;
 

diff --git a/test/html/document-body-shadow-root.html b/test/html/document-body-shadow-root.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<script src="../../../tools/test/chai/chai.js"></script>
+<script src="../../../tools/test/htmltest.js"></script>
+<script src="../../shadowdom.js"></script>
+<script>
+
+var assert = chai.assert;
+var wrap = ShadowDOMPolyfill.wrap;
+var doc = wrap(document);
+
+doc.addEventListener('DOMContentLoaded', function(e) {
+
+  doc.body.innerHTML = 'You should NOT see this.';
+
+  var sr = doc.body.createShadowRoot();
+  var firstStr = 'You should see this';
+  var secondStr = '... and you should also see this';
+  sr.innerHTML = firstStr + '<content>';
+
+  doc.body.offsetHeight;
+
+  doc.body.innerHTML = secondStr;
+
+  doc.body.offsetHeight;
+
+  assert.equal(doc.body.innerHTML, secondStr);
+  assert.equal(sr.firstChild.textContent, firstStr);
+  assert.equal(document.body.textContent, firstStr + secondStr);
+
+  done();
+});
+
+</script>
diff --git a/test/js/HTMLBodyElement.js b/test/js/HTMLBodyElement.js
@@ -122,4 +122,6 @@ htmlSuite('HTMLBodyElement', function() {
   });
 
   htmlTest('html/document-body-inner-html.html');
+
+  htmlTest('html/document-body-shadow-root.html');
 });
diff --git a/test/js/rerender.js b/test/js/rerender.js
@@ -540,28 +540,24 @@ suite('Shadow DOM rerender', function() {
 
   test('minimal dom changes', function() {
     var div = document.createElement('div');
-    var OriginalNodePrototype =
-        // Node.prototype
-        Object.getPrototypeOf(
-            // Element.prototype
-            Object.getPrototypeOf(
-                // HTMLElement.prototype
-                Object.getPrototypeOf(
-                    // HTMLDivElement.prototype
-                    Object.getPrototypeOf(unwrap(div)))));
-
-    var originalInsertBefore = OriginalNodePrototype.insertBefore;
-    var originalRemoveChild = OriginalNodePrototype.removeChild;
+
+    // TODO(jmesserly): ideally we would intercept all of the visual DOM
+    // operations, but that isn't possible because they are captured in the code
+    // as originalInsertBefore/originalRemoveChild, so we only see the calls
+    // inside ShadowRenderer.
+
+    var originalInsertBefore = ShadowDOMPolyfill.originalInsertBefore;
+    var originalRemoveChild = ShadowDOMPolyfill.originalRemoveChild;
 
     var insertBeforeCount = 0;
     var removeChildCount = 0;
 
-    OriginalNodePrototype.insertBefore = function(newChild, refChild) {
+    ShadowDOMPolyfill.originalInsertBefore = function(newChild, refChild) {
       insertBeforeCount++;
       return originalInsertBefore.call(this, newChild, refChild);
     };
 
-    OriginalNodePrototype.removeChild = function(child) {
+    ShadowDOMPolyfill.originalRemoveChild = function(child) {
       removeChildCount++;
       return originalRemoveChild.call(this, child);
     };
@@ -642,8 +638,8 @@ suite('Shadow DOM rerender', function() {
 
 
     } finally {
-      OriginalNodePrototype.insertBefore =  originalInsertBefore;
-      OriginalNodePrototype.removeChild = originalRemoveChild;
+      ShadowDOMPolyfill.originalInsertBefore =  originalInsertBefore;
+      ShadowDOMPolyfill.originalRemoveChild = originalRemoveChild;
     }
   });
 });