102 lines
4 KiB
HTML
102 lines
4 KiB
HTML
<!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>
|