mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
697 lines
29 KiB
HTML
697 lines
29 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="../../../web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
<link rel="import" href="dom-if-elements.html">
|
|
</head>
|
|
<body>
|
|
|
|
<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>
|
|
</template>
|
|
|
|
<div id="inDocumentContainer">
|
|
<template id="inDocumentIf" is="dom-if">
|
|
<x-foo
|
|
prop="{{prop}}"
|
|
item-prop="{{item.prop}}">
|
|
</x-foo>
|
|
<template is="dom-if">
|
|
<x-foo
|
|
prop="{{prop}}"
|
|
item-prop="{{item.prop}}">
|
|
</x-foo>
|
|
<template is="dom-if">
|
|
<x-foo
|
|
prop="{{prop}}"
|
|
item-prop="{{item.prop}}">
|
|
</x-foo>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
<div id="structuredContainer">
|
|
<template is="dom-bind" id="structuredDomBind">
|
|
<template is="dom-if" id="structuredDomIf" if="{{item.show}}">
|
|
<div class="showing"></div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
<div id="outerContainer">
|
|
<template is="dom-if" id="simple">
|
|
<x-client></x-client>
|
|
<x-client></x-client>
|
|
<x-client></x-client>
|
|
</template>
|
|
|
|
<div id="innerContainer">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="removalContainer">
|
|
<template is="dom-if" if id="toBeRemoved"><div id="shouldBeRemoved"></div></template>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
suite('nested pre-configured dom-if', function() {
|
|
|
|
test('parent scope binding', function() {
|
|
var stamped = Polymer.dom(configured.root).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
assert.equal(stamped[0].prop, 'outer');
|
|
assert.equal(stamped[0].itemProp, 'outerItem');
|
|
assert.equal(stamped[1].prop, 'outer');
|
|
assert.equal(stamped[1].itemProp, 'outerItem');
|
|
assert.equal(stamped[2].prop, 'outer');
|
|
assert.equal(stamped[2].itemProp, 'outerItem');
|
|
});
|
|
|
|
test('parent scope downward notification', function() {
|
|
var stamped = Polymer.dom(configured.root).querySelectorAll('*:not(template):not(span)');
|
|
configured.prop = 'yes';
|
|
assert.equal(stamped[0].prop, 'yes');
|
|
assert.equal(stamped[1].prop, 'yes');
|
|
assert.equal(stamped[2].prop, 'yes');
|
|
configured.set('item.prop', 'yay');
|
|
assert.equal(stamped[0].itemProp, 'yay');
|
|
assert.equal(stamped[1].itemProp, 'yay');
|
|
assert.equal(stamped[2].itemProp, 'yay');
|
|
});
|
|
|
|
test('parent upward upward notification', function() {
|
|
var stamped = Polymer.dom(configured.root).querySelectorAll('*:not(template):not(span)');
|
|
stamped[2].prop = 'nice';
|
|
assert.equal(configured.prop, 'nice');
|
|
assert.equal(stamped[0].prop, 'nice');
|
|
assert.equal(stamped[1].prop, 'nice');
|
|
assert.equal(stamped[2].prop, 'nice');
|
|
});
|
|
|
|
});
|
|
|
|
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() {
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
assert.equal(stamped.length, 0, 'total stamped count incorrect');
|
|
});
|
|
|
|
test('if=true: everything rendered and visible', function() {
|
|
// first dom-if
|
|
inDocumentIf.if = true;
|
|
inDocumentIf.render();
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 1, 'total stamped count incorrect');
|
|
|
|
// second dom-if
|
|
var xif = inDocumentContainer.querySelector('template[is=dom-if]');
|
|
xif.if = true;
|
|
xif.render();
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 2, 'total stamped count incorrect');
|
|
|
|
// third dom-if
|
|
xif = inDocumentContainer.querySelector('template[is=dom-if]');
|
|
xif.if = true;
|
|
xif.render();
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
|
|
});
|
|
});
|
|
|
|
test('if=false, restamp=false: everything hidden', function() {
|
|
inDocumentIf.if = false;
|
|
inDocumentIf.render();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'none', 'node was not hidden but should have been');
|
|
});
|
|
});
|
|
|
|
test('if=true, restamp=true, everything rendered and visible', function() {
|
|
inDocumentIf.restamp = true;
|
|
inDocumentIf.if = true;
|
|
inDocumentIf.render();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
|
|
});
|
|
});
|
|
|
|
test('if=false, restamp=true, everything gone', function() {
|
|
inDocumentIf.restamp = true;
|
|
inDocumentIf.if = false;
|
|
inDocumentIf.render();
|
|
CustomElements.takeRecords();
|
|
// 2nd one needed to force nested if to detach
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
assert.equal(stamped.length, 0, 'total stamped count incorrect');
|
|
});
|
|
|
|
// repeat, just to get everything rendered again...
|
|
test('if=true: everything rendered and visible', function() {
|
|
// first dom-if
|
|
inDocumentIf.if = true;
|
|
inDocumentIf.render();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 1, 'total stamped count incorrect');
|
|
|
|
// second dom-if
|
|
var xif = inDocumentContainer.querySelector('template[is=dom-if]');
|
|
xif.if = true;
|
|
xif.render();
|
|
CustomElements.takeRecords();
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 2, 'total stamped count incorrect');
|
|
|
|
// third dom-if
|
|
xif = inDocumentContainer.querySelector('template[is=dom-if]');
|
|
xif.if = true;
|
|
xif.render();
|
|
CustomElements.takeRecords();
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
|
|
stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
|
|
});
|
|
});
|
|
|
|
test('parent scope binding', function() {
|
|
var stamped = Polymer.dom(inDocumentContainer).querySelectorAll('*:not(template):not(span)');
|
|
stamped[0].prop = 'outer';
|
|
assert.equal(stamped[1].prop, 'outer');
|
|
assert.equal(stamped[2].prop, 'outer');
|
|
});
|
|
|
|
});
|
|
|
|
suite('nested un-configured dom-if', function() {
|
|
|
|
test('if=false: nothing rendered', function() {
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
|
|
assert.equal(stamped.length, 0, 'total stamped count incorrect');
|
|
});
|
|
|
|
test('if=true: everything rendered and visible', function() {
|
|
unconfigured1.domUpdateHandlerCount = 0;
|
|
unconfigured1.shouldStamp = true;
|
|
unconfigured2.shouldStamp = true;
|
|
unconfigured1.render();
|
|
CustomElements.takeRecords();
|
|
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, 1);
|
|
});
|
|
|
|
test('if=false, restamp=false: everything hidden', function() {
|
|
unconfigured1.domUpdateHandlerCount = 0;
|
|
unconfigured1.shouldStamp = false;
|
|
unconfigured1.render();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'none', 'node was not hidden but should have been');
|
|
});
|
|
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
|
|
});
|
|
|
|
test('if=true, restamp=true, everything rendered and visible', function() {
|
|
unconfigured1.domUpdateHandlerCount = 0;
|
|
unconfigured1.$['if-1'].restamp = true;
|
|
unconfigured1.shouldStamp = true;
|
|
unconfigured1.$['if-1'].render();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped.length, 3, 'total stamped count incorrect');
|
|
stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
|
|
stamped.forEach(function(n) {
|
|
assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
|
|
});
|
|
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
|
|
});
|
|
|
|
test('if=false, restamp=true, everything gone', function() {
|
|
unconfigured1.domUpdateHandlerCount = 0;
|
|
unconfigured1.$['if-1'].restamp = true;
|
|
unconfigured1.shouldStamp = false;
|
|
unconfigured1.$['if-1'].render();
|
|
CustomElements.takeRecords();
|
|
CustomElements.takeRecords();
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
|
|
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
|
|
assert.equal(stamped.length, 0, 'total stamped count incorrect');
|
|
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
|
|
});
|
|
|
|
// repeat, just to get everything rendered again...
|
|
test('if=true: everything rendered and visible', function() {
|
|
unconfigured1.domUpdateHandlerCount = 0;
|
|
unconfigured1.shouldStamp = true;
|
|
unconfigured2.shouldStamp = true;
|
|
unconfigured1.render();
|
|
unconfigured2.render();
|
|
CustomElements.takeRecords();
|
|
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, 1);
|
|
});
|
|
|
|
test('parent scope binding', function() {
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
assert.equal(stamped[1].prop, 'outer');
|
|
assert.equal(stamped[2].prop, 'outer');
|
|
});
|
|
|
|
test('parent upward upward notification', function() {
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
stamped[2].prop = 'nice';
|
|
assert.equal(stamped[0].prop, 'nice');
|
|
assert.equal(stamped[1].prop, 'nice');
|
|
});
|
|
|
|
test('event handlers', function() {
|
|
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
stamped[0].fire('test1');
|
|
assert.equal(unconfigured1.testHandler1Count, 1);
|
|
stamped[1].fire('test2');
|
|
assert.equal(unconfigured1.testHandler2Count, 1);
|
|
stamped[2].fire('test3');
|
|
assert.equal(unconfigured1.testHandler3Count, 1);
|
|
});
|
|
|
|
});
|
|
|
|
suite('notification between two dom-ifs', function() {
|
|
|
|
test('change to one scope doesn\'t affect other dom-if', function() {
|
|
var stamped1 = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
|
|
var stamped2 = Polymer.dom(unconfigured2.root).querySelectorAll('*:not(template):not(span)');
|
|
|
|
unconfigured1.prop = 'foo';
|
|
unconfigured2.prop = 'bar';
|
|
assert.equal(stamped1[0].prop, 'foo');
|
|
assert.equal(stamped1[1].prop, 'foo');
|
|
assert.equal(stamped1[2].prop, 'foo');
|
|
assert.equal(stamped2[0].prop, 'bar');
|
|
assert.equal(stamped2[1].prop, 'bar');
|
|
assert.equal(stamped2[2].prop, 'bar');
|
|
});
|
|
});
|
|
|
|
suite('structured data controlling if', function() {
|
|
|
|
test('item changed with no if field', function() {
|
|
var showing;
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.notOk(showing);
|
|
structuredDomBind.item = {show: true};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.ok(showing);
|
|
assert.equal(getComputedStyle(showing).display, 'block');
|
|
structuredDomBind.item = {};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.ok(showing);
|
|
assert.equal(getComputedStyle(showing).display, 'none');
|
|
structuredDomBind.item = {show: true};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.ok(showing);
|
|
assert.equal(getComputedStyle(showing).display, 'block');
|
|
});
|
|
|
|
test('item changed with no if field (restamp)', function() {
|
|
var showing;
|
|
structuredDomIf.restamp = true;
|
|
structuredDomIf.if = false;
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.notOk(showing);
|
|
structuredDomBind.item = {show: true};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.ok(showing);
|
|
structuredDomBind.item = {};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.notOk(showing);
|
|
structuredDomBind.item = {show: true};
|
|
structuredDomIf.render();
|
|
showing = structuredContainer.querySelector('.showing');
|
|
assert.ok(showing);
|
|
});
|
|
|
|
});
|
|
|
|
suite('text node handling', function() {
|
|
|
|
test('text nodes cleared on if=false', function() {
|
|
var x = document.createElement('x-textcontent');
|
|
document.body.appendChild(x);
|
|
x.$.domIf.render();
|
|
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();
|
|
stamped = Polymer.dom(x.root).childNodes;
|
|
assert.equal(stamped.length, 12);
|
|
assert.equal(stamped[7].textContent.trim(), '');
|
|
x.$.domIf.if = true;
|
|
x.$.domIf.render();
|
|
stamped = Polymer.dom(x.root).childNodes;
|
|
assert.equal(stamped.length, 12);
|
|
assert.equal(stamped[7].textContent.trim(), 'Stuff');
|
|
document.body.removeChild(x);
|
|
});
|
|
|
|
test('binding to text nodes changed while if=false', function() {
|
|
var x = document.createElement('x-textcontent');
|
|
document.body.appendChild(x);
|
|
x.$.domIf.render();
|
|
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();
|
|
x.text = 'Hollaaaaa!';
|
|
stamped = Polymer.dom(x.root).childNodes;
|
|
assert.equal(stamped.length, 12);
|
|
assert.equal(stamped[7].textContent.trim(), '');
|
|
x.$.domIf.if = true;
|
|
x.$.domIf.render();
|
|
stamped = Polymer.dom(x.root).childNodes;
|
|
assert.equal(stamped.length, 12);
|
|
assert.equal(stamped[7].textContent.trim(), 'Hollaaaaa!');
|
|
document.body.removeChild(x);
|
|
});
|
|
|
|
});
|
|
|
|
suite('attach/detach tests', function() {
|
|
|
|
test('remove, append domif', function(done) {
|
|
var domif = document.querySelector('#simple');
|
|
domif.if = true;
|
|
outerContainer.removeChild(domif);
|
|
setTimeout(function() {
|
|
var clients = outerContainer.querySelectorAll('x-client');
|
|
assert.equal(clients.length, 0);
|
|
outerContainer.appendChild(domif);
|
|
setTimeout(function() {
|
|
var clients = outerContainer.querySelectorAll('x-client');
|
|
assert.equal(clients[0].uid, 0);
|
|
assert.equal(clients[1].uid, 1);
|
|
assert.equal(clients[2].uid, 2);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(domif.previousElementSibling, clients[2]);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
test('move domif (clients persist)', function(done) {
|
|
var domif = document.querySelector('#simple');
|
|
domif.if = true;
|
|
Polymer.dom(innerContainer).appendChild(domif);
|
|
setTimeout(function() {
|
|
var clients = innerContainer.querySelectorAll('x-client');
|
|
// Same clients as before since move happened in one turn
|
|
assert.equal(clients[0].uid, 0);
|
|
assert.equal(clients[1].uid, 1);
|
|
assert.equal(clients[2].uid, 2);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(domif.previousElementSibling, clients[2]);
|
|
done();
|
|
});
|
|
});
|
|
|
|
test('remove, wait, append domif (clients recreated)', function(done) {
|
|
var domif = document.querySelector('#simple');
|
|
domif.if = true;
|
|
Polymer.dom(innerContainer).removeChild(domif);
|
|
setTimeout(function() {
|
|
var clients = innerContainer.querySelectorAll('x-client');
|
|
assert.equal(clients.length, 0);
|
|
Polymer.dom(innerContainer).appendChild(domif);
|
|
setTimeout(function() {
|
|
var clients = outerContainer.querySelectorAll('x-client');
|
|
// New clients since removed for a turn
|
|
assert.equal(clients[0].uid, 3);
|
|
assert.equal(clients[1].uid, 4);
|
|
assert.equal(clients[2].uid, 5);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(domif.previousElementSibling, clients[2]);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
test('move host with domif (clients persist)', function(done) {
|
|
var host = document.createElement('x-host');
|
|
Polymer.dom(outerContainer).appendChild(host);
|
|
setTimeout(function() {
|
|
var clients = Polymer.dom(host.root).querySelectorAll('x-client');
|
|
// New clients created in host instance
|
|
assert.equal(clients[0].uid, 6);
|
|
assert.equal(clients[1].uid, 7);
|
|
assert.equal(clients[2].uid, 8);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(host.$.domif.previousElementSibling, clients[2]);
|
|
Polymer.dom(innerContainer).appendChild(host);
|
|
setTimeout(function() {
|
|
var clients = Polymer.dom(host.root).querySelectorAll('x-client');
|
|
// Clients in removed host persist
|
|
assert.equal(clients[0].uid, 6);
|
|
assert.equal(clients[1].uid, 7);
|
|
assert.equal(clients[2].uid, 8);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(host.$.domif.previousElementSibling, clients[2]);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
test('remove, wait, append host with domif (clients persist)', function(done) {
|
|
var host = document.createElement('x-host');
|
|
Polymer.dom(outerContainer).appendChild(host);
|
|
setTimeout(function() {
|
|
var clients = Polymer.dom(host.root).querySelectorAll('x-client');
|
|
// New clients created in host instance
|
|
assert.equal(clients[0].uid, 9);
|
|
assert.equal(clients[1].uid, 10);
|
|
assert.equal(clients[2].uid, 11);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(host.$.domif.previousElementSibling, clients[2]);
|
|
Polymer.dom(outerContainer).removeChild(host);
|
|
setTimeout(function() {
|
|
// Clients in removed host persist
|
|
assert.equal(clients[0].uid, 9);
|
|
assert.equal(clients[1].uid, 10);
|
|
assert.equal(clients[2].uid, 11);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(host.$.domif.previousElementSibling, clients[2]);
|
|
Polymer.dom(innerContainer).appendChild(host);
|
|
setTimeout(function() {
|
|
// Clients in removed host persist
|
|
var clients = Polymer.dom(host.root).querySelectorAll('x-client');
|
|
assert.equal(clients[0].uid, 9);
|
|
assert.equal(clients[1].uid, 10);
|
|
assert.equal(clients[2].uid, 11);
|
|
assert.equal(clients[1].previousElementSibling, clients[0]);
|
|
assert.equal(clients[2].previousElementSibling, clients[1]);
|
|
assert.equal(host.$.domif.previousElementSibling, clients[2]);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
test('move into doc fragment', function(done) {
|
|
var el = shouldBeRemoved;
|
|
assert.equal(el.parentNode, removalContainer);
|
|
var frag = document.createDocumentFragment();
|
|
Polymer.dom(frag).appendChild(toBeRemoved);
|
|
setTimeout(function() {
|
|
assert.equal(el.parentNode, null);
|
|
Polymer.dom(removalContainer).appendChild(frag);
|
|
setTimeout(function() {
|
|
assert.equal(shouldBeRemoved.parentNode, removalContainer);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
test('move into shadow root', function(done) {
|
|
if (Polymer.Settings.hasShadow) {
|
|
var el = shouldBeRemoved;
|
|
assert.equal(el.parentNode, removalContainer);
|
|
var div = document.createElement('div');
|
|
document.body.appendChild(div);
|
|
var frag = div.createShadowRoot();
|
|
Polymer.dom(frag).appendChild(toBeRemoved);
|
|
setTimeout(function() {
|
|
assert.equal(el.parentNode, frag);
|
|
done();
|
|
});
|
|
} else {
|
|
done();
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|