@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
118 lines (95 loc) • 4.07 kB
HTML
<!--
@license
Copyright (c) 2016 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
-->
<title>Custom Elements Tests</title>
<meta charset="utf-8">
<script src="../../../es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="../../src/native-shim.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<script>
suite('Native Shim', () => {
// Do nothing if the browser does not natively support custom elements.
if (!window.customElements) {
test.skip('The native shim does not apply to this browser.', () => {});
return;
}
test('works with createElement()', () => {
function ES5Element1() {
return HTMLElement.apply(this);
}
ES5Element1.prototype = Object.create(HTMLElement.prototype);
ES5Element1.prototype.constructor = ES5Element1;
customElements.define('es5-element-1', ES5Element1);
const el = document.createElement('es5-element-1');
assert.instanceOf(el, ES5Element1);
assert.instanceOf(el, HTMLElement);
assert.equal(el.tagName, 'ES5-ELEMENT-1');
});
test('works with user-called constructors', () => {
function ES5Element2() {
return HTMLElement.apply(this);
}
ES5Element2.prototype = Object.create(HTMLElement.prototype);
ES5Element2.prototype.constructor = ES5Element2;
customElements.define('es5-element-2', ES5Element2);
const el = new ES5Element2();
assert.instanceOf(el, ES5Element2);
assert.instanceOf(el, HTMLElement);
assert.equal(el.tagName, 'ES5-ELEMENT-2');
});
test('works with parser created elements', () => {
function ES5Element3() {
return HTMLElement.apply(this);
}
ES5Element3.prototype = Object.create(HTMLElement.prototype);
ES5Element3.prototype.constructor = ES5Element3;
customElements.define('es5-element-3', ES5Element3);
const container = document.createElement('div');
container.innerHTML = '<es5-element-3></es5-element-3>';
const el = container.querySelector('es5-element-3');
assert.instanceOf(el, ES5Element3);
assert.instanceOf(el, HTMLElement);
assert.equal(el.tagName, 'ES5-ELEMENT-3');
});
test('reactions', () => {
function ES5Element4() {
return HTMLElement.apply(this);
}
ES5Element4.prototype = Object.create(HTMLElement.prototype);
ES5Element4.prototype.constructor = ES5Element4;
ES5Element4.observedAttributes = ['test'];
ES5Element4.prototype.connectedCallback = function() {
this.connectedCalled = true;
};
ES5Element4.prototype.disconnectedCallback = function() {
this.disconnectedCalled = true;
};
ES5Element4.prototype.attributeChangedCallback = function(name, oldValue, newValue) {
this.attributeChangedCalled = `${name}, ${oldValue}, ${newValue}`;
};
ES5Element4.prototype.adoptedCallback = function() {
this.adoptedCalled = true;
};
customElements.define('es5-element-4', ES5Element4);
const container = document.createElement('div');
document.body.appendChild(container);
const el = new ES5Element4();
container.appendChild(el);
assert(el.connectedCalled);
container.removeChild(el);
assert(el.disconnectedCalled);
el.setAttribute('test', 'good');
assert.equal(el.attributeChangedCalled, 'test, null, good');
const doc = document.implementation.createHTMLDocument();
doc.adoptNode(el);
assert(el.adoptedCalled);
});
});
</script>