@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
282 lines (221 loc) • 10 kB
HTML
<html>
<head>
<title>Node#appendChild</title>
<script>
(window.customElements = window.customElements || {}).forcePolyfill = true;
</script>
<script src="../../../../es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../custom-elements.min.js"></script>
<script>
function generateLocalName() {
return 'test-element-' + Math.random().toString(32).substring(2);
}
function defineWithLocalName(localName) {
customElements.define(localName, class extends HTMLElement {
constructor() {
super();
this.constructed = true;
this.connectedCallbackCount = 0;
this.disconnectedCallbackCount = 0;
}
connectedCallback() {
this.connectedCallbackCount++;
}
disconnectedCallback() {
this.disconnectedCallbackCount++;
}
});
}
suite('Appending to a connected Node.', function() {
let connectedNode;
setup(function() {
connectedNode = document.createElement('div');
document.body.appendChild(connectedNode);
});
teardown(function() {
document.body.removeChild(connectedNode);
});
test('Appending an uncustomized element with a definition upgrades the ' +
'element and calls `connectedCallback`.', function() {
const localName = generateLocalName();
const element = document.createElement(localName);
// Define after creating to prevent upgrade.
defineWithLocalName(localName);
assert(!element.constructed);
connectedNode.appendChild(element);
assert(element.constructed);
assert.equal(element.connectedCallbackCount, 1);
assert.equal(element.disconnectedCallbackCount, 0);
});
test('Appending a disconnected customized element calls `connectedCallback`.',
function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const element = document.createElement(localName);
assert(element.constructed);
assert.equal(element.connectedCallbackCount, 0);
assert.equal(element.disconnectedCallbackCount, 0);
connectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 1);
assert.equal(element.disconnectedCallbackCount, 0);
});
test('Appending a connected customized element calls `disconnectedCallback` ' +
'and `connectedCallback`.', function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const element = document.createElement(localName);
assert(element.constructed);
assert.equal(element.connectedCallbackCount, 0);
assert.equal(element.disconnectedCallbackCount, 0);
connectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 1);
assert.equal(element.disconnectedCallbackCount, 0);
connectedNode.appendChild(document.createElement('hr'));
connectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 2);
assert.equal(element.disconnectedCallbackCount, 1);
});
test('Appending a DocumentFragment containing uncustomized custom elements ' +
'with definitions upgrades the elements and calls `connectedCallback`.',
function() {
const localName = generateLocalName();
const fragment = document.createDocumentFragment();
const element1 = document.createElement(localName);
fragment.appendChild(element1);
fragment.appendChild(document.createTextNode('text'));
const element2 = document.createElement(localName);
fragment.appendChild(element2);
// Define after creating to prevent upgrade.
defineWithLocalName(localName);
assert(!element1.constructed);
assert(!element2.constructed);
connectedNode.appendChild(fragment);
assert(element1.constructed);
assert.equal(element1.connectedCallbackCount, 1);
assert.equal(element1.disconnectedCallbackCount, 0);
assert(element2.constructed);
assert.equal(element2.connectedCallbackCount, 1);
assert.equal(element2.disconnectedCallbackCount, 0);
});
test('Appending a DocumentFragment containing customized elements calls ' +
'`connectedCallback`.', function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const fragment = document.createDocumentFragment();
const element1 = document.createElement(localName);
fragment.appendChild(element1);
fragment.appendChild(document.createTextNode('text'));
const element2 = document.createElement(localName);
fragment.appendChild(element2);
assert(element1.constructed);
assert.equal(element1.connectedCallbackCount, 0);
assert.equal(element1.disconnectedCallbackCount, 0);
assert(element2.constructed);
assert.equal(element2.connectedCallbackCount, 0);
assert.equal(element2.disconnectedCallbackCount, 0);
connectedNode.appendChild(fragment);
assert.equal(element1.connectedCallbackCount, 1);
assert.equal(element1.disconnectedCallbackCount, 0);
assert.equal(element2.connectedCallbackCount, 1);
assert.equal(element2.disconnectedCallbackCount, 0);
});
});
suite('Appending to a disconnected Node.', function() {
let connectedNode;
let disconnectedNode;
setup(function() {
connectedNode = document.createElement('div');
document.body.appendChild(connectedNode);
disconnectedNode = document.createElement('div');
});
teardown(function() {
document.body.removeChild(connectedNode);
});
test('Appending an uncustomized element with a definition does nothing.',
function() {
const localName = generateLocalName();
const element = document.createElement(localName);
// Define after creating to prevent upgrade.
defineWithLocalName(localName);
assert(!element.constructed);
disconnectedNode.appendChild(element);
assert(!element.constructed);
});
test('Appending a disconnected customized element does nothing.', function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const element = document.createElement(localName);
assert(element.constructed);
assert.equal(element.connectedCallbackCount, 0);
assert.equal(element.disconnectedCallbackCount, 0);
disconnectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 0);
assert.equal(element.disconnectedCallbackCount, 0);
});
test('Appending a connected customized element calls `disconnectedCallback`.',
function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const element = document.createElement(localName);
assert(element.constructed);
assert.equal(element.connectedCallbackCount, 0);
assert.equal(element.disconnectedCallbackCount, 0);
connectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 1);
assert.equal(element.disconnectedCallbackCount, 0);
disconnectedNode.appendChild(element);
assert.equal(element.connectedCallbackCount, 1);
assert.equal(element.disconnectedCallbackCount, 1);
});
test('Appending a DocumentFragment containing uncustomized custom elements' +
'with definitions does nothing.', function() {
const localName = generateLocalName();
const fragment = document.createDocumentFragment();
const element1 = document.createElement(localName);
fragment.appendChild(element1);
fragment.appendChild(document.createTextNode('text'));
const element2 = document.createElement(localName);
fragment.appendChild(element2);
// Define after creating to prevent upgrade.
defineWithLocalName(localName);
assert(!element1.constructed);
assert(!element2.constructed);
disconnectedNode.appendChild(fragment);
assert(!element1.constructed);
assert(!element2.constructed);
});
test('Appending a DocumentFragment containing customized elements does ' +
'nothing.', function() {
const localName = generateLocalName();
// Define before creating to cause the element to be constructed.
defineWithLocalName(localName);
const fragment = document.createDocumentFragment();
const element1 = document.createElement(localName);
fragment.appendChild(element1);
fragment.appendChild(document.createTextNode('text'));
const element2 = document.createElement(localName);
fragment.appendChild(element2);
assert(element1.constructed);
assert.equal(element1.connectedCallbackCount, 0);
assert.equal(element1.disconnectedCallbackCount, 0);
assert(element2.constructed);
assert.equal(element2.connectedCallbackCount, 0);
assert.equal(element2.disconnectedCallbackCount, 0);
disconnectedNode.appendChild(fragment);
assert.equal(element1.connectedCallbackCount, 0);
assert.equal(element1.disconnectedCallbackCount, 0);
assert.equal(element2.connectedCallbackCount, 0);
assert.equal(element2.disconnectedCallbackCount, 0);
});
});
</script>
</head>
<body></body>
</html>