reaction-timing.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /custom-elements/reaction-timing.html - WPT Dashboard Interop Dashboard

<!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 instance = document.createElement('my-custom-element');

    var anotherInstance = document.createElement('my-custom-element');

    var callbackOrder = [];

    instance.handler = function () {

        callbackOrder.push([this, 'begin']);

        anotherInstance.toggleAttribute('data-title');

        callbackOrder.push([this, 'end']);

    anotherInstance.handler = function () {

        callbackOrder.push([this, 'begin']);

        callbackOrder.push([this, 'end']);

    instance.toggleAttribute('title');

    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']);

}, 'toggleAttribute 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>