<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script>
description("Make sure that event targets do not get cleared after dispatching an event at the node that was not in a shadow tree but gets moved into a shadow tree by an event listener.");

host = document.createElement("div");
shadow = host.attachShadow({ mode: "open" });
child = document.createElement("trala");
host.appendChild(child);
counter = 0;

child.addEventListener("hi",(_e) => {
    e = _e;
    shouldBe("window.event", "e");
    shouldBe("counter++", "0");
});
child.addEventListener("hi", (_e) => {
    e = _e;
    // Move the node into the shadow tree.
    shadow.appendChild(child);
    shouldBe("window.event", "e");
    shouldBe("counter++", "1");
});
child.addEventListener("hi", (_e) => {
    e = _e;
    shouldBe("window.event", "e");
    shouldBe("counter++", "2");
});

let event = new MouseEvent("hi", { composed: false, relatedTarget: document.body });
child.dispatchEvent(event);
shouldBe("counter", "3");
shouldBe("event.target", "child");
shouldBe("event.relatedTarget", "document.body");
</script>
</body>
</html>