firefox-main/testing/web-platform/tests/css/css-view-transitions/navigation/transition-to-prerender.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<title>View transitions: basic cross-document navigation to a prerender</title>
<link rel="author" href="mailto:bokan@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/utils.js"></script>
<script src="/speculation-rules/resources/utils.js"></script>
<script src="/speculation-rules/prerender/resources/utils.js"></script>
<style>
@view-transition {
navigation: auto;
}
html {
background-color: red;
}
html.outgoing {
background-color: cornflowerblue;
}
html.incoming {
background-color: hotpink;
}
::view-transition {
background-color: limegreen;
}
</style>
<script>
const params = new URLSearchParams(location.search);
const uid = params.has('uid') ? params.get('uid') : token();
const mode = params.get('mode') || 'test';
if (mode === 'test') {
promise_test(async t => {
if (!implementsSpeculationRules())
return;
const result = await new Promise(resolve => {
const channel = new PrerenderChannel('result', uid);
channel.addEventListener('message', e => resolve(e.data), {once: true});
const url = `?mode=runner&uid=${uid}`;
const popup = window.open(url);
t.add_cleanup(() => popup.close());
});
assert_equals(result, "pass");
});
} else if (mode === 'runner') {
// This is the "old" page running in the popup
const ready_channel = new PrerenderChannel('ready-to-activate', uid);
onload = async () => {
document.documentElement.classList.add('outgoing');
const next_url =
new URL(`?mode=next&uid=${uid}`, window.location).href;
const ready_to_activate = new Promise(resolve => {
ready_channel.addEventListener('message', resolve, {once: true});
});
startPrerendering(next_url);
await ready_to_activate;
window.location.replace(new URL(next_url, window.location));
};
} else if (mode === 'next') {
// This is the "new" page (prerendered -> activated)
const ready_channel = new PrerenderChannel('ready-to-activate', uid);
const result_channel = new PrerenderChannel('result', uid);
if (document.prerendering) {
ready_channel.postMessage('readyToActivateMessage');
ready_channel.close();
} else {
document.documentElement.classList.add('incoming');
// We expect a view transition
addEventListener('pagereveal', e => {
result_channel.postMessage(e.viewTransition ? "pass" : "fail: no transition");
result_channel.close();
});
}
}
function implementsSpeculationRules() {
return ('supports' in HTMLScriptElement) &&
HTMLScriptElement.supports('speculationrules');
}
</script>