46 lines
No EOL
1.5 KiB
HTML
46 lines
No EOL
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>View Transitions: @view-transition opt-in programmatically.</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
|
|
<link rel="author" href="mailto:bokan@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style id="vt-style">
|
|
@view-transition {
|
|
navigation: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
function optIn() {
|
|
document.querySelector("#vt-style").innerHTML = `@view-transition { navigation: auto }`;
|
|
}
|
|
const params = new URLSearchParams(location.search);
|
|
|
|
optIn();
|
|
|
|
// This file includes 3 modes: test, old, new.
|
|
// "test" is where testharness runs. "old" -> "new" is where the view transition takes place.
|
|
switch (params.get("mode") || "test") {
|
|
case "test":
|
|
promise_test(async t => {
|
|
const event = await new Promise(resolve => {
|
|
window.did_reveal = e => { resolve(e) };
|
|
const popup = window.open("?mode=old");
|
|
t.add_cleanup(() => popup.close());
|
|
});
|
|
|
|
assert_not_equals(event.viewTransition, null, "ViewTransition must be triggered.");
|
|
});
|
|
break;
|
|
case "old":
|
|
onload = () => requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
location.replace('?mode=new');
|
|
}));
|
|
break;
|
|
case "new":
|
|
onpagereveal = e => window.opener.did_reveal(e);
|
|
}
|
|
</script>
|
|
|
|
<body>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias quis assumenda doloremque, repellat quidem quia blanditiis harum animi corrupti totam sunt provident sapiente at eius sequi labore repellendus velit fugit!
|
|
</body> |