Ensure stamped DOM reflects _hideTemplateChildren state. Fixes #1751

Polymer · Jul 1, 2015 · 2e01fb0 · 2e01fb0
1 parent b72fd6b
commit 2e01fb0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
@@ -320,9 +320,13 @@
       // each row is a document fragment which is lost when we appendChild,
       // so we have to track each child individually
       var children = [];
+      var hide = host._hideTemplateChildren;
       for (var n = this.root.firstChild; n; n=n.nextSibling) {
         children.push(n);
         n._templateInstance = this;
+        if (hide && n.style) {
+          n.style.display = 'none';
+        }
       }
       // Since archetype overrides Base/HTMLElement, Safari complains
       // when accessing `children`

diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html
@@ -2753,6 +2753,52 @@ <h4>inDocumentRepeater</h4>
         assert.equal(repeater3.keyForElement(stamped1[4]), coll3.getKey(items3[2]));
       });
 
+      test('_hideTemplateChildren', function() {
+        // Initially all showing
+        var stamped1 = Polymer.dom(primitive.$.container1).querySelectorAll('*:not(template)');
+        assert.equal(getComputedStyle(stamped1[0]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[1]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[2]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[3]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[4]).display, 'block');
+
+        // Hide all
+        primitive.$.repeater1._hideTemplateChildren = true;
+        assert.equal(getComputedStyle(stamped1[0]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[1]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[2]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[3]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[4]).display, 'none');
+
+        // Add one while hidden
+        primitive.push('items', 'new 1');
+        primitive.$.repeater1.render();
+        stamped1 = Polymer.dom(primitive.$.container1).querySelectorAll('*:not(template)');
+        assert.equal(getComputedStyle(stamped1[0]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[1]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[2]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[3]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[4]).display, 'none');
+        assert.equal(getComputedStyle(stamped1[5]).display, 'none');
+
+        // Add one then unhide
+        primitive.push('items', 'new 2');
+        primitive.$.repeater1._hideTemplateChildren = false;
+        primitive.$.repeater1.render();
+        stamped1 = Polymer.dom(primitive.$.container1).querySelectorAll('*:not(template)');
+        assert.equal(getComputedStyle(stamped1[0]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[1]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[2]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[3]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[4]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[5]).display, 'block');
+        assert.equal(getComputedStyle(stamped1[6]).display, 'block');
+
+        // Revert
+        primitive.splice('items', 5, 2);
+        primitive.$.repeater1.render();
+      });
+
     });
 
   </script>