<script src="include.js"></script>
<style>
    .input {
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>
<input class="input" id="a" />
<input class="input" id="b" />
<script>
    function elementToString(e) {
        let element_string = `<${e.nodeName} `;
        if (e.id) element_string += `id="${e.id}"`;
        element_string += ">";
        return element_string;
    }

    function printFocusEvent(e) {
        const target = elementToString(e.target);
        println(`${e.type} target=${target} bubbles=${e.bubbles} composed=${e.composed}`);
    }

    document.addEventListener('focusin', printFocusEvent);
    document.addEventListener('focusout', printFocusEvent);

    const a = document.getElementById("a");
    const b = document.getElementById("b");

    a.addEventListener('focus', printFocusEvent);
    a.addEventListener('blur', printFocusEvent);
    b.addEventListener('focus', printFocusEvent);
    b.addEventListener('blur', printFocusEvent);

    asyncTest(async done => {
        a.focus();
        await new Promise(resolve => setTimeout(resolve, 0));
        b.focus();
        await new Promise(resolve => setTimeout(resolve, 0));

        done();
    });
</script>