<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/callback-function-detached-frame-common.js"></script>

<body>

<div id="resizeObserverTestRoot" style="width: 100px; height: 100px;"></div>

<script>
const IFRAME_SRC = "resources/callback-function-detached-frame-resize-observer-iframe.html";

promise_test(async t => {
    const iframe = await createIframe(t, IFRAME_SRC);
    const resizeObserver = iframe.contentWindow.createResizeObserver();

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 0);
    scheduleObservedResize();

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 1);
}, "Callback function, originated in an <iframe>, is invoked if <iframe> is connected");

promise_test(async t => {
    const iframe = await createIframe(t, IFRAME_SRC);
    const resizeObserver = iframe.contentWindow.createResizeObserver(Function);

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 0);

    iframe.remove();
    assert_equals(iframe.contentWindow, null);

    scheduleObservedResize();

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 1);
}, "Callback function, originated in an <iframe> via main window's Function constructor, is invoked even if <iframe> is disconnected");

promise_test(async t => {
    const iframe = await createIframe(t, IFRAME_SRC);
    const resizeObserver = iframe.contentWindow.createResizeObserver();

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 0);

    iframe.remove();
    assert_equals(iframe.contentWindow, null);

    scheduleObservedResize();

    await sleep(100);
    assert_equals(resizeObserver.callbackInvocations, 0);
}, "Callback function, originated in an <iframe>, is not invoked if <iframe> is disconnected");

function scheduleObservedResize() {
    resizeObserverTestRoot.style.width = `${parseInt(resizeObserverTestRoot.style.width) + 10}px`;
}
</script>