Merge pull request #1635 from Polymer/1632-kschaaf

dom-if hidden state is (this._hideTemplateChildren || !this.if).

src/lib/template/dom-if.html

@@ -77,7 +77,7 @@
       // TODO(kschaaf): add logic to re-stamp in attached?
       this._teardownInstance();
     },
-    
+
     attached: function() {
       if (this.if && this.ctor) {
         // TODO(sorvell): should not be async, but node can be attached
@@ -97,12 +97,12 @@
           this.templatize(this);
         }
         this._ensureInstance();
-        this._hideTemplateChildren = false;
+        this._showHideChildren();
       } else if (this.restamp) {
         this._teardownInstance();
       }
       if (!this.restamp && this._instance) {
-        this._hideTemplateChildren = !this.if;
+        this._showHideChildren();
       }
       if (this.if != this._lastIf) {
         this.fire('dom-change');
@@ -147,8 +147,8 @@
       }
     },
 
-    // Implements extension point from Templatizer mixin
-    _hideChildren: function(hidden) {
+    _showHideChildren: function() {
+      var hidden = this._hideTemplateChildren || !this.if;
       if (this._instance) {
         var c$ = this._instance._children;
         for (var i=0; i<c$.length; i++) {

src/lib/template/dom-repeat.html

@@ -519,7 +519,7 @@
     },
 
     // Implements extension point from Templatizer mixin
-    _hideChildren: function(hidden) {
+    _showHideChildren: function(hidden) {
       if (this.rows) {
         for (var i=0; i<this.rows.length; i++) {
           var c$ = this.rows[i]._children;

src/lib/template/templatizer.html

@@ -14,7 +14,7 @@
 
     properties: {
       _hideTemplateChildren: {
-        observer: '_hideTemplateChildrenChanged'
+        observer: '_showHideChildren'
       }
     },
 
@@ -86,12 +86,8 @@
       return (this.dataHost && this.dataHost._rootDataHost) || this.dataHost;
     },
 
-    _hideTemplateChildrenChanged: function(hidden) {
-      if (this._hideChildren) {
-        // Extension point for Templatizer sub-classes
-        // TODO(kschaaf): remove once element protos can override behaviors
-        this._hideChildren(hidden);
-      }
+    // For overriding
+    _showHideChildren: function(hidden) {
     },
 
     _debounceTemplate: function(fn) {

test/unit/dom-if-elements.html

@@ -116,3 +116,39 @@
     }
   });
 </script>
+
+<dom-module id="x-nested-if-individual">
+  <template>
+    <template is="dom-if" id="if-1" if="{{shouldStamp1}}">
+      <x-foo prop="{{prop1}}"></x-foo>
+      <template is="dom-if" id="if-2" if="{{shouldStamp2}}">
+        <x-foo prop="{{prop2}}"></x-foo>
+        <template is="dom-if" id="if-3" if="{{shouldStamp3}}">
+          <x-foo prop="{{prop3}}"></x-foo>
+        </template>
+      </template>
+    </template>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-nested-if-individual',
+    properties: {
+      prop1: {
+        value: 'prop1',
+      },
+      prop2: {
+        value: 'prop2',
+      },
+      prop3: {
+        value: 'prop3',
+      },
+      item: {
+        value: function() { return {prop: 'outerItem'}; }
+      }
+    },
+    render: function() {
+      this.$['if-1'].render();
+    }
+  });
+</script>

test/unit/dom-if.html

@@ -20,6 +20,8 @@
 
   <x-nested-if-configured id="configured"></x-nested-if-configured>
 
+  <x-nested-if-individual id="individual"></x-nested-if-individual>
+
   <template is="dom-bind" id="unconfigured">
     <x-nested-if id="unconfigured1"></x-nested-if>
     <x-nested-if id="unconfigured2"></x-nested-if>
@@ -84,6 +86,108 @@
 
     });
 
+    suite('nested individually-controlled dom-if', function() {
+
+      test('nothing stamped', function() {
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 0, 'total stamped count incorrect');
+      });
+
+      test('show 1', function() {
+        individual.shouldStamp1 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 1, 'total stamped count incorrect');
+        assert.equal(stamped[0].prop, 'prop1');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+      });
+
+      test('show 2', function() {
+        individual.shouldStamp2 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 2, 'total stamped count incorrect');
+        assert.equal(stamped[0].prop, 'prop1');
+        assert.equal(stamped[1].prop, 'prop2');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
+      });
+
+      test('show 3', function() {
+        individual.shouldStamp3 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(stamped[0].prop, 'prop1');
+        assert.equal(stamped[1].prop, 'prop2');
+        assert.equal(stamped[2].prop, 'prop3');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'inline', 'stamped 3 display wrong');
+      });
+
+      test('hide 3', function() {
+        individual.shouldStamp3 = false;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong');
+      });
+
+      test('hide 2', function() {
+        individual.shouldStamp2 = false;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong');
+      });
+
+      test('hide 1', function() {
+        individual.shouldStamp1 = false;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'none', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong');
+      });
+
+      test('show 1', function() {
+        individual.shouldStamp1 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'none', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong');
+      });
+
+      test('show 2', function() {
+        individual.shouldStamp2 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong');
+      });
+
+      test('show 3', function() {
+        individual.shouldStamp3 = true;
+        individual.render();
+        var stamped = Polymer.dom(individual.root).querySelectorAll('*:not(template):not(span)');
+        assert.equal(stamped.length, 3, 'total stamped count incorrect');
+        assert.equal(getComputedStyle(stamped[0]).display, 'inline', 'stamped 1 display wrong');
+        assert.equal(getComputedStyle(stamped[1]).display, 'inline', 'stamped 2 display wrong');
+        assert.equal(getComputedStyle(stamped[2]).display, 'inline', 'stamped 3 display wrong');
+      });
+
+    });
+
     suite('nested un-configured dom-if in document', function() {
 
       test('if=false: nothing rendered', function() {