<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: Custom element reactions must be invoked before returning to author scripts</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Custom element reactions must be invoked before returning to author scripts">
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#invoke-custom-element-reactions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
class MyCustomElement extends HTMLElement {
attributeChangedCallback(...args) {
this.handler(...args);
}
handler() { }
}
MyCustomElement.observedAttributes = ['data-title', 'title'];
customElements.define('my-custom-element', MyCustomElement);
test(function () {
var instance = document.createElement('my-custom-element');
var anotherInstance = document.createElement('my-custom-element');
var callbackOrder = [];
instance.handler = function () {
callbackOrder.push([this, 'begin']);
anotherInstance.setAttribute('data-title', 'baz');
callbackOrder.push([this, 'end']);
}
anotherInstance.handler = function () {
callbackOrder.push([this, 'begin']);
callbackOrder.push([this, 'end']);
}
instance.setAttribute('title', 'foo');
assert_equals(callbackOrder.length, 4);
assert_array_equals(callbackOrder[0], [instance, 'begin']);
assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']);
assert_array_equals(callbackOrder[2], [anotherInstance, 'end']);
assert_array_equals(callbackOrder[3], [instance, 'end']);
}, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
test(function () {
var shouldCloneAnotherInstance = false;
var anotherInstanceClone;
var log = [];
class SelfCloningElement extends HTMLElement {
constructor() {
super();
log.push([this, 'begin']);
if (shouldCloneAnotherInstance) {
shouldCloneAnotherInstance = false;
anotherInstanceClone = anotherInstance.cloneNode(false);
}
log.push([this, 'end']);
}
}
customElements.define('self-cloning-element', SelfCloningElement);
var instance = document.createElement('self-cloning-element');
var anotherInstance = document.createElement('self-cloning-element');
shouldCloneAnotherInstance = true;
assert_equals(log.length, 4);
var instanceClone = instance.cloneNode(false);
assert_equals(log.length, 8);
assert_array_equals(log[0], [instance, 'begin']);
assert_array_equals(log[1], [instance, 'end']);
assert_array_equals(log[2], [anotherInstance, 'begin']);
assert_array_equals(log[3], [anotherInstance, 'end']);
assert_array_equals(log[4], [instanceClone, 'begin']);
assert_array_equals(log[5], [anotherInstanceClone, 'begin']);
assert_array_equals(log[6], [anotherInstanceClone, 'end']);
assert_array_equals(log[7], [instanceClone, 'end']);
}, 'Calling Node.prototype.cloneNode(false) must push a new element queue to the processing stack');
</script>
</body>
</html>