@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
118 lines (111 loc) • 5.23 kB
HTML
<title>Custom Elements: upgrade element</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>
// 6. If C non-conformantly uses an API decorated with the [CEReactions] extended attribute,
// then the reactions enqueued at the beginning of upgrade will execute during this step,
// before C finishes and control returns to this algorithm.
test_with_window((w) => {
let invocations = [];
let changedCallbackArgs = [];
let a = w.document.createElement('a-a');
w.document.body.appendChild(a);
a.setAttribute('x', '1');
class X extends w.HTMLElement {
constructor() {
super();
this.setAttribute('y', '2');
invocations.push(['constructor', this]);
}
connectedCallback() { invocations.push(['connected', this]); }
static get observedAttributes() { return ['x', 'y']; }
attributeChangedCallback() {
invocations.push(['attributeChanged', this]);
changedCallbackArgs.push(arguments);
}
}
w.customElements.define('a-a', X);
// Unlike calling new, upgrading element with createElement does not set element's state
// to "custom" during HTMLConstructor. Thus, appending attribute after super()
// does not enqueue a callback reaction.
assert_equals(invocations.length, 3);
assert_equals(changedCallbackArgs.length, 1, 'attributeChangedCallback should only be invoked once');
assert_array_equals(invocations[0], ['constructor', a], 'constructor should execute first');
assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChangedCallback should execute after constructor');
assert_array_equals(changedCallbackArgs[0], ['x', null, '1', null], 'attributeChangedCallback should execute for setAttribute outside of the constructor');
assert_array_equals(invocations[2], ['connected', a], 'connectedCallback should execute after the constrcutor');
}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constuctor is invoked during upgrade');
// Step 6 case when constructor is invoked with new
test_with_window((w) => {
let invocations = [];
let changedCallbackArgs = [];
class X extends w.HTMLElement {
constructor() {
super();
this.setAttribute('y', '2');
invocations.push(['constructor', this]);
}
connectedCallback() { invocations.push(['connected', this]); }
static get observedAttributes() { return ['x', 'y']; }
attributeChangedCallback() {
invocations.push(['attributeChanged', this]);
changedCallbackArgs.push(arguments);
}
}
w.customElements.define('a-a', X);
let a = new X();
a.setAttribute('x','1');
assert_equals(invocations.length, 3);
assert_equals(changedCallbackArgs.length, 2, 'attributeChangedCallback should be invoked twice');
assert_array_equals(invocations[0], ['attributeChanged', a], 'attributeChangedCallback for "a" should execute before the constructor is finished');
assert_array_equals(invocations[1], ['constructor', a], 'constructor executes second');
assert_array_equals(invocations[2], ['attributeChanged', a], 'setAttribute outside of the constructorshould be invoked');
assert_array_equals(changedCallbackArgs[0], ['y', null, '2', null]);
assert_array_equals(changedCallbackArgs[1], ['x', null, '1', null]);
}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constructor is invoked with new');
// 8. If constructResult is an abrupt completion, then return constructResult
// (i.e., rethrow the exception).
test_with_window((w) => {
let error_log = [];
let doc = w.document;
doc.body.appendChild(doc.createElement('a-a'));
w.onerror = function (msg, url, lineNo, columnNo, error) {
error_log.push(error.name);
return true;
};
class X extends w.HTMLElement {
constructor() {
super();
assert_false(this.matches(':defined'), 'calling super() with non-empty construction stack should not define the element');
throw { name: 'constructor throws' };
}
}
w.customElements.define('a-a', X);
assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor');
}, 'Upgrading an element with a throwing constructor should rethrow that exception');
// 9. If SameValue(constructResult.[[value]], element) is false, then throw an
// "InvalidStateError" DOMException and terminate these steps.
test_with_window((w) => {
let error_log = [];
w.onerror = function (msg, url, lineNo, columnNo, error) {
error_log.push(error.name);
return true;
};
let a = w.document.createElement('a-a');
w.document.body.appendChild(a);
class X extends w.HTMLElement {
constructor() {
super();
return ['aaaa'];
}
}
w.customElements.define('a-a', X);
assert_array_equals(error_log, ['InvalidStateError'], 'returning object that is different from element should throw "InvalidStateError"');
}, 'Upgrading an element with constructor that returns different object');
</script>
</body>