Cache style.display & textContent and re-apply on true. Fixes #2037

Polymer · Jul 24, 2015 · 2611285 · 2611285
1 parent cb32751
commit 2611285
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 45 deletions.
diff --git a/src/lib/template/dom-if.html b/src/lib/template/dom-if.html
@@ -85,10 +85,10 @@
     },
 
     /**
-     * Forces the element to render its content. Normally rendering is 
-     * asynchronous to a provoking change. This is done for efficiency so 
-     * that multiple changes trigger only a single render. The render method 
-     * should be called if, for example, template rendering is required to 
+     * Forces the element to render its content. Normally rendering is
+     * asynchronous to a provoking change. This is done for efficiency so
+     * that multiple changes trigger only a single render. The render method
+     * should be called if, for example, template rendering is required to
      * validate application state.
      */
     render: function() {
@@ -98,7 +98,6 @@
     _render: function() {
       if (this.if) {
         if (!this.ctor) {
-          this._wrapTextNodes(this._content || this.content);
           this.templatize(this);
         }
         this._ensureInstance();
@@ -140,18 +139,6 @@
       }
     },
 
-    _wrapTextNodes: function(root) {
-      // wrap text nodes in span so they can be hidden.
-      for (var n = root.firstChild; n; n=n.nextSibling) {
-        if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) {
-          var s = document.createElement('span');
-          root.insertBefore(s, n);
-          s.appendChild(n);
-          n = s;
-        }
-      }
-    },
-
     _showHideChildren: function() {
       var hidden = this.__hideTemplateChildren__ || !this.if;
       if (this._instance) {

diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
@@ -144,10 +144,22 @@
       var c = this._children;
       for (var i=0; i<c.length; i++) {
         var n = c[i];
-        if (n.style) {
-          n.style.display = hide ? 'none' : '';
-          n.__hideTemplateChildren__ = hide;
+        if (n.nodeType === Node.TEXT_NODE) {
+          if (hide && !n.__hideTemplateChildren__) {
+            n.__polymerTextContent__ = n.textContent;
+            n.textContent = '';
+          } else if (!hide && n.__polymerTextContent__ !== undefined) {
+            n.textContent = n.__polymerTextContent__;
+          }
+        } else if (n.style) {
+          if (hide && !n.__hideTemplateChildren__) {
+            n.__polymerDisplay__ = n.style.display;
+            n.style.display = 'none';
+          } else if (!hide && n.__polymerDisplay__ !== undefined) {
+            n.style.display = n.__polymerDisplay__;
+          }
         }
+        n.__hideTemplateChildren__ = hide;
       }
     },
 

diff --git a/test/smoke/dom-if.html b/test/smoke/dom-if.html
@@ -29,16 +29,20 @@
 
       <template is="dom-if" id="if1" if="[[checked]]">
         <h3>Lazy / hidden</h3>
-        <div class="content">
-          <div>I have been <input value="{{parent.value::input}}"></div>
+        Text node
+        <div class="content" style="display: inline-block;">
+          <div>I have been <input value="{{value::input}}"></div>
         </div>
+        Text node
       </template>
 
       <template is="dom-if" id="if2" if="[[checked]]" restamp>
         <h3>Restamp</h3>
-        <div class="content">
-          <div>I have been <input value="{{parent.value::input}}"></div>
+        Text node
+        <div class="content" style="display: inline-block;">
+          <div>I have been <input value="{{value::input}}"></div>
         </div>
+        Text node
       </template>
 
     </template>

diff --git a/test/unit/dom-if-elements.html b/test/unit/dom-if-elements.html
@@ -159,7 +159,7 @@
   });
 </script>
 
-<dom-module id="x-whitespace">
+<dom-module id="x-textcontent">
   <template>
     <template id="domIf" is="dom-if" if>
       <div>1</div>
@@ -171,7 +171,7 @@
   </template>
   <script>
   Polymer({
-    is: 'x-whitespace'
+    is: 'x-textcontent'
   });
   </script>
 </dom-module>
diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
@@ -467,32 +467,27 @@
         assert.ok(showing);
       });
 
-      test('empty whitespace nodes not wrapped', function() {
-        var x = document.createElement('x-whitespace');
-        document.body.appendChild(x);
-        x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 6);
-        x.$.domIf.if = false;
-        x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 6);
-        x.$.domIf.if = true;
-        x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 6);
-        document.body.removeChild(x);
-      });
+    });
+
+    suite('text node handling', function() {
 
-      test('empty whitespace nodes not wrapped restamp', function() {
-        var x = document.createElement('x-whitespace');
-        x.$.domIf.restamp = true;
+      test('text nodes cleared on if=false', function() {
+        var x = document.createElement('x-textcontent');
         document.body.appendChild(x);
         x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 6);
+        var stamped = Polymer.dom(x.root).childNodes;
+        assert.equal(stamped.length, 12);
+        assert.equal(stamped[7].textContent.trim(), 'Stuff');
         x.$.domIf.if = false;
         x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 1);
+        stamped = Polymer.dom(x.root).childNodes;
+        assert.equal(stamped.length, 12);
+        assert.equal(stamped[7].textContent.trim(), '');
         x.$.domIf.if = true;
         x.$.domIf.render();
-        assert.equal(Polymer.dom(x.root).children.length, 6);
+        stamped = Polymer.dom(x.root).childNodes;
+        assert.equal(stamped.length, 12);
+        assert.equal(stamped[7].textContent.trim(), 'Stuff');
         document.body.removeChild(x);
       });