From 53053eb447686ac9a66b8035a958584ac2e40ecf Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 14 Apr 2017 17:59:21 -0700
Subject: [PATCH] Add 2.x hybrid affordances for stamping template content.
 Fixes #4536

---
 src/lib/template/dom-bind.html   | 12 +++++--
 src/lib/template/dom-if.html     | 13 ++++++--
 src/lib/template/dom-repeat.html |  7 ++++
 test/unit/dom-bind.html          | 37 +++++++++++++++++++--
 test/unit/dom-if.html            | 39 ++++++++++++++++++----
 test/unit/dom-repeat.html        | 55 +++++++++++++++++++++++---------
 6 files changed, 134 insertions(+), 29 deletions(-)

diff --git a/src/lib/template/dom-bind.html b/src/lib/template/dom-bind.html
index c9561c9105..a7cdf4bccd 100644
--- a/src/lib/template/dom-bind.html
+++ b/src/lib/template/dom-bind.html
@@ -108,8 +108,16 @@
     },
 
     _insertChildren: function() {
-      var parentDom = Polymer.dom(Polymer.dom(this).parentNode);
-      parentDom.insertBefore(this.root, this);
+      var refNode;
+      var parentNode = Polymer.dom(this).parentNode;
+      // Affordance for 2.x hybrid mode
+      if (parentNode.localName == this.is) {
+        refNode = parentNode;
+        parentNode = Polymer.dom(parentNode).parentNode;
+      } else {
+        refNode = this;
+      }
+      Polymer.dom(parentNode).insertBefore(this.root, refNode);
     },
 
     _removeChildren: function() {
diff --git a/src/lib/template/dom-if.html b/src/lib/template/dom-if.html
index dc018ba579..8952e8be5a 100644
--- a/src/lib/template/dom-if.html
+++ b/src/lib/template/dom-if.html
@@ -134,11 +134,18 @@
       var parentNode = Polymer.dom(this).parentNode;
       // Guard against element being detached while render was queued
       if (parentNode) {
-        var parent = Polymer.dom(parentNode);
+        var refNode;
+        // Affordance for 2.x hybrid mode
+        if (parentNode.localName == this.is) {
+          refNode = parentNode;
+          parentNode = Polymer.dom(parentNode).parentNode;
+        } else {
+          refNode = this;
+        }
         if (!this._instance) {
           this._instance = this.stamp();
           var root = this._instance.root;
-          parent.insertBefore(root, this);
+          Polymer.dom(parentNode).insertBefore(root, refNode);
         } else {
           var c$ = this._instance._children;
           if (c$ && c$.length) {
@@ -146,7 +153,7 @@
             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);
+                Polymer.dom(parentNode).insertBefore(n, refNode);
               }
             }
           }
diff --git a/src/lib/template/dom-repeat.html b/src/lib/template/dom-repeat.html
index 07f56d9c2d..f8e3b2bdc3 100644
--- a/src/lib/template/dom-repeat.html
+++ b/src/lib/template/dom-repeat.html
@@ -710,6 +710,13 @@
       var beforeRow = this._instances[idx + 1];
       var beforeNode = beforeRow && !beforeRow.isPlaceholder ? beforeRow._children[0] : this;
       var parentNode = Polymer.dom(this).parentNode;
+      // Affordance for 2.x hybrid mode
+      if (parentNode.localName == this.is) {
+        if (beforeNode == this) {
+          beforeNode = parentNode;
+        }
+        parentNode = Polymer.dom(parentNode).parentNode;
+      }
       Polymer.dom(parentNode).insertBefore(inst.root, beforeNode);
       this._instances[idx] = inst;
       return inst;
diff --git a/test/unit/dom-bind.html b/test/unit/dom-bind.html
index 4539493f56..40e9d31b3a 100644
--- a/test/unit/dom-bind.html
+++ b/test/unit/dom-bind.html
@@ -21,7 +21,7 @@
   </template>
 
   <script>
-  /* global earlyDomBind earlyBoundChild decEl1 decEl2 decDomBind z container needsHost*/
+  /* global earlyDomBind earlyBoundChild decEl1 decEl2 decDomBind z container needsHost hybridDomBind hybridEl1 hybridEl2*/
     earlyDomBind.value = 'hi!';
   </script>
 
@@ -42,6 +42,13 @@
     <x-needs-host id="needsHost"></x-needs-host>
   </template>
 
+  <dom-bind>
+    <template is="dom-bind" id="hybridDomBind">
+      <x-basic value="{{value}}" id="hybridEl1"></x-basic>
+      <x-basic value="{{value}}" id="hybridEl2"></x-basic>
+    </template>
+  </dom-bind>
+
   <script>
 
     suite('dom-bind touched before upgrade', function() {
@@ -235,7 +242,7 @@
             Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
           done();
         });
-      });        
+      });
 
       test('re-enable dom-change', function(done) {
         if (Polymer.Settings.suppressTemplateNotifications) {
@@ -255,6 +262,32 @@
 
     });
 
+    suite('hybrid dom-bind', function() {
+
+      var domBind;
+      var el1;
+      var el2;
+
+      setup(function() {
+        domBind = hybridDomBind;
+        el1 = hybridEl1;
+        el2 = hybridEl2;
+      });
+
+      test('value binds top-down', function() {
+        domBind.value = 'foo';
+        assert.equal(el1.value, 'foo');
+        assert.equal(el2.value, 'foo');
+      });
+
+      test('parent is parent of <dom-bind>', function() {
+        domBind.value = 'foo';
+        assert.equal(el1.parentNode, document.body);
+        assert.equal(el2.parentNode, document.body);
+      });
+
+    });
+
   </script>
 
   <link rel="import" href="dom-bind-elements2.html">
diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
index 39dfcfbf14..3666bde095 100644
--- a/test/unit/dom-if.html
+++ b/test/unit/dom-if.html
@@ -71,8 +71,33 @@
     <template is="dom-if" if id="toBeRemoved"><div id="shouldBeRemoved"></div></template>
   </div>
 
+  <!-- 2.x hybrid test -->
+  <dom-if>
+    <template is="dom-if" id="hybridDomIf" if restamp>
+      <div hybrid-stamped>[[prop]]</div>
+    </template>
+  </dom-if>
+
   <script>
-    /* global configured individual unconfigured1 unconfigured2 inDocumentContainer inDocumentIf structuredContainer structuredDomIf structuredDomBind outerContainer innerContainer shouldBeRemoved toBeRemoved removalContainer*/
+    /* global configured individual unconfigured1 unconfigured2 inDocumentContainer inDocumentIf structuredContainer structuredDomIf structuredDomBind outerContainer innerContainer shouldBeRemoved toBeRemoved removalContainer hybridDomIf*/
+
+    suite('hybrid dom-if', function() {
+
+      test('parent is parent of <dom-if>', function() {
+        var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
+        assert.equal(stamped.length, 1);
+        assert.equal(stamped[0].parentNode, document.body);
+      });
+
+      test('children removed correctly', function() {
+        hybridDomIf.if = false;
+        hybridDomIf.render();
+        var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
+        assert.equal(stamped.length, 0);
+      });
+
+    });
+
     suite('nested pre-configured dom-if', function() {
 
       test('parent scope binding', function() {
@@ -337,7 +362,7 @@
         var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped[0].prop = 'outer';
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
       });
 
@@ -352,7 +377,7 @@
         stamped.forEach(function(n) {
           assert.equal(getComputedStyle(n).display, 'none', 'node was not hidden but should have been');
         });
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
       });
 
@@ -368,7 +393,7 @@
         stamped.forEach(function(n) {
           assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
         });
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
       });
 
@@ -380,10 +405,10 @@
         CustomElements.takeRecords();
         CustomElements.takeRecords();
         var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
         assert.equal(stamped.length, 0, 'total stamped count incorrect');
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
       });
 
@@ -398,7 +423,7 @@
         var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
         assert.equal(stamped.length, 3, 'total stamped count incorrect');
         stamped[0].prop = 'outer';
-        assert.equal(unconfigured1.domUpdateHandlerCount, 
+        assert.equal(unconfigured1.domUpdateHandlerCount,
           Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
       });
 
diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html
index 97edd6b01f..744c516066 100644
--- a/test/unit/dom-repeat.html
+++ b/test/unit/dom-repeat.html
@@ -80,8 +80,15 @@ <h4>x-repeat-chunked</h4>
   <div id="inDocumentContainer">
   </div>
 
+  <!-- 2.x hybrid test -->
+  <dom-repeat>
+    <template is="dom-repeat" id="hybridDomRepeat" items='[{"prop":"a"},{"prop":"b"},{"prop":"c"}]'>
+      <div hybrid-stamped>[[item.prop]]</div>
+    </template>
+  </dom-repeat>
+
   <script>
-  /* global unconfigured1 unconfigured primitive limited inDocumentRepeater configured inDocumentContainer inDocumentContainerOrig unconfigured2 primitiveLarge simple:true model:true stamped:true chunked */
+  /* global unconfigured1 unconfigured primitive limited inDocumentRepeater configured inDocumentContainer inDocumentContainerOrig unconfigured2 primitiveLarge simple:true model:true stamped:true chunked hybridDomRepeat*/
 
     /*
       Expected:
@@ -100,7 +107,6 @@ <h4>x-repeat-chunked</h4>
       stamped[38] .. 3-3-3
     */
 
-
     suite('errors', function() {
 
       test('items must be array', function() {
@@ -830,7 +836,7 @@ <h4>x-repeat-chunked</h4>
           assert.equal(stamped2[39].itemaProp, 'new-1');
           assert.equal(stamped2[40].itemaProp, 'new-2');
           assert.equal(stamped2[41], undefined);
-          assert.equal(unconfigured1.domUpdateHandlerCount, 
+          assert.equal(unconfigured1.domUpdateHandlerCount,
             Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
           done();
         });
@@ -854,7 +860,7 @@ <h4>x-repeat-chunked</h4>
           assert.equal(stamped2[38].indexb, 2);
           assert.equal(stamped2[38].indexc, 2);
           assert.equal(stamped2[39], undefined);
-          assert.equal(unconfigured1.domUpdateHandlerCount, 
+          assert.equal(unconfigured1.domUpdateHandlerCount,
             Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
           done();
         });
@@ -3870,22 +3876,41 @@ <h4>x-repeat-chunked</h4>
 
       });
 
-      suite('notification suppression', function() {
+    }
 
-        test('re-enable dom-change', function() {
-          if (Polymer.Settings.suppressTemplateNotifications) {
-            unconfigured1.$.repeater.setAttribute('notify-dom-change', '');
-            unconfigured1.domUpdateHandlerCount = 0;
-            unconfigured.items = unconfigured.items.slice();
-            setTimeout(function() {
-              assert.equal(unconfigured1.domUpdateHandlerCount, 1);
-            });
-          }
+    suite('notification suppression', function() {
+
+      test('re-enable dom-change', function() {
+        if (Polymer.Settings.suppressTemplateNotifications) {
+          unconfigured1.$.repeater.setAttribute('notify-dom-change', '');
+          unconfigured1.domUpdateHandlerCount = 0;
+          unconfigured.items = unconfigured.items.slice();
+          setTimeout(function() {
+            assert.equal(unconfigured1.domUpdateHandlerCount, 1);
+          });
+        }
+      });
+
+    });
+
+    suite('hybrid dom-repeat', function() {
+
+      test('parent is parent of <dom-repeat>', function() {
+        var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
+        assert.equal(stamped.length, 3);
+        stamped.forEach(function(el) {
+          assert.equal(el.parentNode, document.body);
         });
+      });
 
+      test('children removed correctly', function() {
+        hybridDomRepeat.items = null;
+        hybridDomRepeat.render();
+        var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
+        assert.equal(stamped.length, 0);
       });
 
-    }
+    });
 
   </script>