<!DOCTYPE html>
<html class="reftest-wait">
<title>View transitions: prerender navigation</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
<link rel="author" href="mailto:[email protected]">
<!-- TODO(crbug.com/1418681). This test should work automatically,
but doesn't due to the referenced bug.
<link rel="match" href="transition-to-prerender-ref.html">
-->
<script src="/common/utils.js"></script>
<script src="/speculation-rules/prerender/resources/utils.js"></script>
<script src="/common/reftest-wait.js"></script>
<style>
@view-transition { navigation: auto; }
html { background: red; }
#target {
width: 200px;
height: 200px;
background: black;
color: white;
position: absolute;
top: 40px;
view-transition-name: target;
}
</style>
<div id="target"></div>
<script>
const uid = token();
function startTest() {
const old_url = "/transition-to-prerender-manual.html";
const new_url = `/resources/transition-to-prerender.html?uid=${uid}`;
window.location.href = window.location.href.replace(old_url, new_url);
}
async function waitForPrerender() {
const channel = new PrerenderChannel('prerender-channel', uid);
const gotMessage = new Promise(resolve => {
channel.addEventListener('message', resolve)
}, {
once: true
});
startPrerendering(`resources/transition-to-prerender.html?uid=${uid}`);
await gotMessage;
startTest();
}
onload = waitForPrerender;
</script>
</html>