<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Long Animation Frame Timing: basic</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>

<body>
<h1>Long Animation Frame: event handlers</h1>
<div id="log"></div>
<script>

test_self_event_listener(t => {
    const img = document.createElement("img");
    img.src = "/images/green.png";
    img.addEventListener("load", () => {
        busy_wait();
    });
    img.id = "image";
    document.body.appendChild(img);
    t.add_cleanup(() => img.remove());
}, "IMG#image.onload");

test_self_event_listener(t => {
    const img = document.createElement("img");
    img.src = "/images/green.png";
    img.addEventListener("load", () => {
        busy_wait();
    });
    document.body.appendChild(img);
    t.add_cleanup(() => img.remove());
}, "IMG[src=/images/green.png].onload");

test_self_event_listener(t => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/common/dummy.xml");
    xhr.addEventListener("load", () => {
        busy_wait();
    });
    xhr.send();
}, "XMLHttpRequest.onload");
</script>
</body>
