diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js index 2e2cddb150..c8d2003e72 100644 --- a/lib/mixins/property-effects.js +++ b/lib/mixins/property-effects.js @@ -2756,6 +2756,7 @@ export const PropertyEffects = dedupingMixin(superClass => { // once). const parent = template._parentTemplateInfo || this.__templateInfo; const previous = parent.lastChild; + templateInfo.parent = parent; parent.lastChild = templateInfo; templateInfo.previousSibling = previous; if (previous) { diff --git a/test/unit/dom-if-elements.js b/test/unit/dom-if-elements.js index 2cebd4e6e4..0d892fe936 100644 --- a/test/unit/dom-if-elements.js +++ b/test/unit/dom-if-elements.js @@ -126,9 +126,15 @@ Polymer({ `, @@ -145,6 +151,12 @@ Polymer({ prop3: { value: 'prop3' }, + prop4: { + value: 'prop4' + }, + prop5: { + value: 'prop5' + }, item: { value: function() { return {prop: 'outerItem'}; } } diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html index d32c08933c..d16c654dc1 100644 --- a/test/unit/dom-if.html +++ b/test/unit/dom-if.html @@ -191,54 +191,117 @@ assert.equal(getComputedStyle(stamped[2]).display, 'inline', 'stamped 3 display wrong'); }); - test('hide 3', function() { - individual.shouldStamp3 = false; + test('show 4', function() { + individual.shouldStamp4 = true; + individual.render(); + let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); + assert.equal(stamped.length, 4, 'total stamped count incorrect'); + assert.equal(stamped[0].prop, 'prop1'); + assert.equal(stamped[1].prop, 'prop2'); + assert.equal(stamped[2].prop, 'prop3'); + assert.equal(stamped[3].prop, 'prop4'); + 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'); + assert.equal(getComputedStyle(stamped[3]).display, 'inline', 'stamped 4 display wrong'); + }); + + test('remove 4', function() { + individual.shouldStamp4 = false; + individual.render(); + let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):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('show 5', function() { + individual.shouldStamp5 = true; + individual.render(); + let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); + assert.equal(stamped.length, 4, 'total stamped count incorrect'); + assert.equal(stamped[0].prop, 'prop1'); + assert.equal(stamped[1].prop, 'prop2'); + assert.equal(stamped[2].prop, 'prop3'); + assert.equal(stamped[3].prop, 'prop5'); + 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'); + assert.equal(getComputedStyle(stamped[3]).display, 'inline', 'stamped 5 display wrong'); + }); + + test('update 5', function() { + individual.prop5 = 'prop5*'; + let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); + assert.equal(stamped.length, 4, 'total stamped count incorrect'); + assert.equal(stamped[0].prop, 'prop1'); + assert.equal(stamped[1].prop, 'prop2'); + assert.equal(stamped[2].prop, 'prop3'); + assert.equal(stamped[3].prop, 'prop5*'); + }); + + test('remove 5', function() { + individual.shouldStamp5 = false; individual.render(); let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):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('remove 3', function() { + individual.shouldStamp3 = false; + individual.render(); + let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):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'); - assert.equal(getComputedStyle(stamped[2]).display, 'none', 'stamped 3 display wrong'); }); test('hide 2', function() { individual.shouldStamp2 = false; individual.render(); let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); - assert.equal(stamped.length, 3, 'total stamped count incorrect'); + assert.equal(stamped.length, 2, '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(); let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); - assert.equal(stamped.length, 3, 'total stamped count incorrect'); + assert.equal(stamped.length, 2, '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(); let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); - assert.equal(stamped.length, 3, 'total stamped count incorrect'); + assert.equal(stamped.length, 2, '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(); let stamped = individual.shadowRoot.querySelectorAll('*:not(template):not(dom-if):not(span)'); - assert.equal(stamped.length, 3, 'total stamped count incorrect'); + assert.equal(stamped.length, 2, '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() {