<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<div id="editor" contenteditable></div>
<script>

description('This tests the existence of the backup element queue. To manually test, press the delete key once the page is loaded.');

var jsTestIsAsync = true;

var constructed = false;
var disconnected = false;
class TestElement extends HTMLElement {
    constructor() {
        super();
        constructed = true;
    }
    disconnectedCallback() {
        disconnected = true;
    }
}
customElements.define('test-element', TestElement);

var editor = document.getElementById('editor');
shouldBe('constructed', 'false');
shouldBe('editor.innerHTML = "a<test-element>b</test-element>c"; constructed', 'true');
shouldBe('editor.focus(); getSelection().selectAllChildren(editor); disconnected', 'false');

function checkDisconnectedAtEndOfMictotask()
{
    shouldBe('"Before the end of the micro task"; disconnected', 'false');
    Promise.resolve().then(function () {
        shouldBe('"At the end of the micro task"; disconnected', 'true');
        finishJSTest();
    });
}

if (window.testRunner) {
    testRunner.execCommand('delete', false, null);
    checkDisconnectedAtEndOfMictotask();
} else {
    editor.oninput = function () {
        checkDisconnectedAtEndOfMictotask();
    }
}


</script>
</body>
</html>