<!doctype html>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/utils.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<body>
<script>

['attached', 'detacted'].forEach(state =>
    promise_test(async t => {
        const href = '/common/square.png';
        const sequence = [];
        const name = `with-preload-${state}`;
        const loaded = new Promise(resolveLoad => {
            customElements.define(name, class extends HTMLElement {
                constructor() {
                    super();
                    const shadow = this.attachShadow({ mode: "closed" });
                    const link = document.createElement('link');
                    link.rel = 'preload';
                    link.as = 'image';
                    link.href = href;
                    if (state === 'attached')
                        shadow.appendChild(link);
                    sequence.push('constructed');
                    link.addEventListener('load', () => {
                        sequence.push('loaded');
                        resolveLoad();
                    });
                }

                connectedCallback() {
                    sequence.push('connected');
                }
            });
        });

        const wrapper = document.createElement(name);
        const timeout = 500;
        await new Promise(resolve => t.step_timeout(resolve, timeout));
        document.body.appendChild(wrapper);
        await Promise.any([loaded, new Promise(resolve => t.step_timeout(() => {
            sequence.push('timeout');
            resolve();
        }, timeout))]);
        assert_array_equals(sequence, ['constructed', 'connected', state === 'attached' ? 'loaded' : 'timeout']);
    }, `preload link should ${state === 'attached' ? 'be fetched when attached' : 'note fetched when detached from'} a shadow DOM`));

promise_test(async t => {
    const href = '/common/square.png';
    const doc = document.implementation.createHTMLDocument();
    const link = doc.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = href;
    const loaded = new Promise(resolve => link.addEventListener('load', () => resolve('loaded')));
    const timeoutMillis = 1000;
    const timeout = new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis));
    doc.head.appendChild(link);
    const result = await Promise.any([loaded, timeout]);
    assert_equals(result, 'timeout');
}, 'preload links only work for documents within browsing contexts');

promise_test(async t => {
    const href = '/common/square.png';
    const fragment = document.createDocumentFragment();
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = href;
    fragment.appendChild(link);
    const timeoutMillis = 1000;
    let didLoad = false;
    const loaded = new Promise(resolve => link.addEventListener('load', () => {
        resolve('loaded');
        didLoad = true;
    }));

    const timeout = () => new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis));
    await timeout();
    assert_false(didLoad, 'Loaded prematurely, fragment not connected to document yet');
    document.head.appendChild(link);
    await Promise.any([loaded, timeout()]);
    assert_true(didLoad);
}, 'preload links from DocumentFragment only work when attached');

promise_test(async t => {
    const href = '/common/square.png';
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = href;
    const loaded = new Promise(resolve => link.addEventListener('load', () => resolve('loaded')));
    const timeoutMillis = 1000;
    const timeout = new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis));
    const result = await Promise.any([loaded, timeout]);
    assert_equals(result, 'timeout');
}, 'preload links only work when attached to the document');

</script>
</body>