<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="./resizeTestHelper.js"></script>

<h1>frame4</h1>

<script>
'use strict';

function test() {
    let target1 = parent.frames[0].document.querySelector('#target1');
    let target2 = parent.frames[0].document.querySelector('#target2');

    if (!target1 || !target2) {
        setTimeout("test()", 10);
        return;
    }

    let timeoutId = window.setTimeout( () => {
        parent.parent.postMessage('fail', '*');
    }, ResizeTestHelper.TIMEOUT);
    let helper = new ResizeTestHelper(
        "test: observe elements from sibling frames",
    [
        {
            setup: observer => {
                observer.observe(target1);
                observer.observe(target2);
                target1.style.width = "50px";
                target2.style.width = "50px";
            },
            notify: (entries, observer) => {
                assert_equals(entries.length, 2, "1 resizes");
                assert_equals(entries[0].target, target1, "element from sibling frame");
                assert_equals(entries[1].target, target2, "element from sibling frame");
            }
        },
        {
            setup: observer => {
                target2.style.width = "25px";
            },
            notify: (entries, observer) => {
                assert_equals(entries.length, 1, "1 resizes");
                assert_equals(entries[0].target, target2, "element from sibling frame");
                window.clearTimeout(timeoutId);
                parent.parent.postMessage('success', '*');
            }
        }
    ]);
    add_result_callback(function(testobj) {
        if (testobj.FAIL == testobj.status)
            parent.parent.postMessage('fail', '*');
    });
    return helper.start();
}

test();
</script>