Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/navigation/two-phase/swap-continues-when-skipping-preview.tentative.https.html - WPT Dashboard Interop Dashboard
<!doctype html>
<head>
<title>View transitions: aborting a preview triggers pageswap</title>
<link
rel="help"
/>
<meta name="timeout" content="long" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const params = new URLSearchParams(location.search);
window.events = [];
switch (params.get("mode") || "test") {
case "test":
promise_test(async (t) => {
window.done = Promise.withResolvers();
const popup = window.open("?mode=old");
t.add_cleanup(() => popup.close());
await window.done.promise;
assert_array_equals(window.events, [
"navigate-event",
"frame-after-navigate-event",
"preview-vt",
"preview-skipped",
"pageswap",
"cross-doc-vt",
]);
});
break;
case "old":
onload = async () => {
await new Promise((resolve) => requestAnimationFrame(resolve));
const navigate_event = Promise.withResolvers();
navigation.addEventListener("navigate", async (e) => {
opener.events.push("navigate-event");
await new Promise((resolve) => requestAnimationFrame(resolve));
opener.events.push("frame-after-navigate-event");
if (!document.activeViewTransition) {
opener.events.push("no-view-transition");
return;
}
opener.events.push(
Array.from(document.activeViewTransition.types).join(","),
);
await document.activeViewTransition.ready;
for (let i = 0; i < 4; ++i) {
await new Promise((resolve) => requestAnimationFrame(resolve));
}
document.activeViewTransition.skipTransition();
opener.events.push("preview-skipped");
});
navigation.navigate("?mode=new");
};
onpageswap = (e) => {
window.opener.events.push("pageswap");
};
break;
case "new":
onpagereveal = (e) => {
opener.events.push(
e.viewTransition
? Array.from(e.viewTransition.types).join(",")
: "null",
);
window.opener.done.resolve(e);
};
break;
}
</script>
<style>
::view-transition-group(root) {
animation-duration: 10s;
}
@view-transition {
navigation: auto;
types: cross-doc-vt;
}
@view-transition {
navigation: preview;
types: preview-vt;
}
</style>
</head>