@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
213 lines (200 loc) • 8.74 kB
HTML
<title>Custom Elements: Create an element when definition is non-null and synchronous flag not set</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>;
(() => {
// "Upgrade an element"
// https://html.spec.whatwg.org/multipage/scripting.html#upgrades
// 1. For each attribute in element's attribute list, in order, enqueue a
// custom element callback reaction with element, callback name
// "attributeChangedCallback", and an argument list containing attribute's
// local name, null, attribute's value, and attribute's namespace.
// 2. If element is currently in a shadow-including document, then enqueue a
// custom element callback reaction with element, callback name
// "connectedCallback", and an empty argument list.
const constructor = 'constructor';
const connected = 'connected';
const disconnected = 'disconnected';
const attributeChanged = 'attributeChanged';
function define_logger(w, observedAttributes) {
let logs = [];
w.customElements.define('a-a', class extends w.HTMLElement {
constructor() { super(); logs.push([constructor, this, arguments]); }
connectedCallback() { logs.push([connected, this, arguments]); }
disconnectedCallback() { logs.push([disconnected, this, arguments]); }
static get observedAttributes() { return observedAttributes; }
attributeChangedCallback() { logs.push([attributeChanged, this, arguments]); }
});
return logs;
}
function assert_log_is_type(logs, i, type, element, argv) {
assert_equals(logs[i][0], type, `[${i}] should be ${type}`);
assert_equals(logs[i][1], element, `this in ${type} should be the element`);
if (argv) {
assert_array_equals(logs[i][2], argv, `${type} should have arguments ${argv}`);
} else {
assert_equals(logs[i][2].length, 0, `${type} should have no arguments`);
}
}
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w);
// assert_log_is_type(logs, 0, constructor, element);
// assert_log_is_type(logs, 1, connected, element);
// assert_equals(logs.length, 2);
// }, 'upgrade should enqueue connectedCallback');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// element.setAttribute('x', '1');
// element.setAttribute('y', '2');
// element.setAttribute('z', '3');
// document.body.appendChild(element);
// let logs = define_logger(w, ['x', 'y']);
// assert_log_is_type(logs, 0, constructor, element);
// assert_log_is_type(logs, 1, attributeChanged, element, ['x', null, '1', null]);
// assert_log_is_type(logs, 2, attributeChanged, element, ['y', null, '2', null]);
// assert_log_is_type(logs, 3, connected, element);
// assert_equals(logs.length, 4);
// }, 'upgrade should enqueue attributeChangedCallback and connectedCallback');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// element.setAttribute('x', '1');
// document.body.appendChild(element);
// w.customElements.flush();
// let logs = define_logger(w, ['x', 'y']);
// logs.length = 0;
// element.setAttribute('z', '0');
// element.setAttribute('y', '2');
// element.setAttribute('x', '9');
// assert_log_is_type(logs, 0, attributeChanged, element, ['y', null, '2', null]);
// assert_log_is_type(logs, 1, attributeChanged, element, ['x', '1', '9', null]);
// assert_equals(logs.length, 2);
// }, 'setAttribute should enqueue attributeChangedCallback');
test_with_window(w => {
let document = w.document;
let element = document.createElement('a-a');
document.body.appendChild(element);
w.customElements.flush();
let logs = define_logger(w, ['style']);
logs.length = 0;
w.customElements.flush();
element.style.color = 'red';
w.customElements.flush();
assert_equals(logs.length, 1, 'A');
assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', null]);
element.style.color = 'green';
w.customElements.flush();
assert_equals(logs.length, 2, 'B');
assert_log_is_type(logs, 1, attributeChanged, element, ['style', 'color: red;', 'color: green;', null]);
element.style.color = '';
w.customElements.flush();
assert_equals(logs.length, 3, 'C');
assert_log_is_type(logs, 2, attributeChanged, element, ['style', 'color: green;', null, null]);
}, 'style.color should enqueue attributeChangedCallback for style attribute');
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w, ['style']);
//
// logs.length = 0;
// element.style.cssText = 'color: red';
// assert_equals(logs.length, 1);
// assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', null]);
// }, 'style.cssText should enqueue attributeChangedCallback for style attribute');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w, ['style']);
//
// logs.length = 0;
// element.style.setProperty('color', 'red');
// assert_equals(logs.length, 1);
// assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', null]);
//
// element.style.removeProperty('color', 'red');
// assert_equals(logs.length, 2);
// assert_log_is_type(logs, 1, attributeChanged, element, ['style', 'color: red;', null, null]);
// }, 'style.setProperty/removeProperty should enqueue attributeChangedCallback for style attribute');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w, ['style']);
//
// logs.length = 0;
// element.style.cssFloat = 'left';
// assert_equals(logs.length, 1);
// assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'float: left;', null]);
// }, 'style.cssFloat should enqueue attributeChangedCallback for style attribute');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w, ['lang']);
//
// logs.length = 0;
// element.lang = 'ja-jp';
// assert_equals(logs.length, 1);
// assert_log_is_type(logs, 0, attributeChanged, element, ['lang', null, 'ja-jp', null]);
// }, 'lang property setter should enqueue attributeChangedCallback for lang attribute');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// element.setAttribute('x', '1');
// document.body.appendChild(element);
// let logs = define_logger(w, ['x']);
//
// logs.length = 0;
// element.removeAttribute('x');
// w.customElements.flush();
// assert_log_is_type(logs, 0, attributeChanged, element, ['x', '1', null, null]);
// assert_equals(logs.length, 1);
// }, 'removeAttribute should enqueue attributeChangedCallback');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w, ['x']);
// logs.length = 0;
//
// element.setAttributeNS('urn:foo', 'x', '1');
// assert_log_is_type(logs, 0, attributeChanged, element, ['x', null, '1', 'urn:foo']);
// assert_equals(logs.length, 1);
//
// element.removeAttributeNS('urn:foo', 'x');
// assert_log_is_type(logs, 1, attributeChanged, element, ['x', '1', null, 'urn:foo']);
// assert_equals(logs.length, 2);
// }, 'attributeChangedCallback should transmit namespaces');
//
// test_with_window(w => {
// let document = w.document;
// let element = document.createElement('a-a');
// document.body.appendChild(element);
// let logs = define_logger(w);
//
// logs.length = 0;
// element.remove();
// w.customElements.flush();
// assert_log_is_type(logs, 0, disconnected, element);
// assert_equals(logs.length, 1);
// }, 'remove should enqueue disconnectedCallback');
})();
</script>
</body>