preload-connect-to-doc.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /preload/preload-connect-to-doc.html - WPT Dashboard Interop Dashboard

<!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>