@webcomponents/webcomponentsjs
Version:
Web Components Polyfills
173 lines (156 loc) • 6.74 kB
HTML
<!--
@license
Copyright (c) 2015 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>
<title>Template with HTMLImports Test</title>
<script src="../webcomponents-loader.js"></script>
<script src="./wct-config.js"></script>
<script src="../node_modules/wct-browser-legacy/browser.js"></script>
</head>
<body>
<template>
<x-child></x-child>
</template>
<template id="before"></template>
<x-after></x-after>
<script>
var created = [];
var attached = [];
var childCreated = false;
var foundTemplate = false;
class XChild extends HTMLElement {
constructor() {
super();
this.custom = true;
childCreated = true;
}
}
class XAfter extends HTMLElement {
constructor() {
super();
this.custom = true;
var template = document.querySelector('#before');
if (template && template.content) {
foundTemplate = true;
}
}
}
window.customElements.define('x-child', XChild);
window.customElements.define('x-after', XAfter);
suite('template and custom elements', function() {
test('elements within templates not upgraded', function() {
assert(!childCreated);
});
test('templates before elements are bootstrapped before createdCallback', function() {
assert.equal(foundTemplate, true);
});
});
suite('Template', function() {
var template;
suiteSetup(function() {
template = document.querySelector('template');
});
var canInnerHTML = (function() {
var el = document.createElement('div');
try {
Object.defineProperty(el, 'innerHTML', {
get: function(){},
set: function(){}
});
return true;
} catch(e) {
return false;
}
})();
function setupTemplate(template, string) {
if (canInnerHTML) {
template.innerHTML = string;
} else {
var el = document.createElement('div');
el.innerHTML = string;
var nodes = Array.prototype.slice.call(el.childNodes, 0);
for (var i = 0; i < nodes.length; i++) {
template.content.appendChild(nodes[i]);
}
}
}
test('clone', function() {
var imp = document.createElement('template');
var s = '<div>Hi</div>';
setupTemplate(imp, s);
var clone = imp.cloneNode();
assert.notEqual(clone, imp, 'element is not cloned');
assert.isDefined(clone.content, 'cloned template content dne');
assert.equal(clone.content.childNodes.length, 0,
'non-deep cloned template.content is not empty');
var deepClone = imp.cloneNode(true);
assert.equal(deepClone.content.childNodes.length, 1,
'deep cloned template.content is empty');
assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
'cloned content is not different from source');
});
test('clone nested', function() {
var imp = document.createElement('template');
var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
setupTemplate(imp, s);
var clone = imp.cloneNode(false);
assert.notEqual(clone, imp, 'element is not cloned');
assert.isDefined(clone.content, 'cloned template content dne');
assert.equal(clone.content.childNodes.length, 0,
'non-deep cloned template.content is not empty');
var deepClone = imp.cloneNode(true);
assert.equal(deepClone.content.childNodes.length, 2,
'deep cloned template.content is empty');
assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
'cloned content is not different from source');
var nested = deepClone.content.lastChild;
assert.isDefined(nested.content, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 2,
'deep cloned template.content is empty');
nested = nested.content.lastChild;
assert.isDefined(nested, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 2,
'deep cloned template.content is empty');
nested = nested.content.lastChild;
assert.isDefined(nested, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 1,
'deep cloned template.content is empty');
});
test('clone node containing templates', function() {
var imp = document.createElement('div');
var t = document.createElement('template');
var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
setupTemplate(t, s);
imp.appendChild(t);
var impClone = imp.cloneNode(true);
imp = imp.firstChild;
var deepClone = impClone.firstChild;
assert.equal(deepClone.content.childNodes.length, 2,
'deep cloned template.content is empty');
assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
'cloned content is not different from source');
var nested = deepClone.content.lastChild;
assert.isDefined(nested.content, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 2,
'deep cloned template.content is empty');
nested = nested.content.lastChild;
assert.isDefined(nested, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 2,
'deep cloned template.content is empty');
nested = nested.content.lastChild;
assert.isDefined(nested, 'nested cloned template content dne');
assert.equal(nested.content.childNodes.length, 1,
'deep cloned template.content is empty');
});
});
</script>
</body>
</html>