at-rule-opt-in-change-with-script.html (1553B)
1 <!DOCTYPE html> 2 <title>View Transitions: @view-transition opt-in programmatically.</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="author" href="mailto:bokan@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id="vt-style"> 8 @view-transition { 9 navigation: none; 10 } 11 </style> 12 <script> 13 function optIn() { 14 document.querySelector("#vt-style").innerHTML = `@view-transition { navigation: auto }`; 15 } 16 const params = new URLSearchParams(location.search); 17 18 optIn(); 19 20 // This file includes 3 modes: test, old, new. 21 // "test" is where testharness runs. "old" -> "new" is where the view transition takes place. 22 switch (params.get("mode") || "test") { 23 case "test": 24 promise_test(async t => { 25 const event = await new Promise(resolve => { 26 window.did_reveal = e => { resolve(e) }; 27 const popup = window.open("?mode=old"); 28 t.add_cleanup(() => popup.close()); 29 }); 30 31 assert_not_equals(event.viewTransition, null, "ViewTransition must be triggered."); 32 }); 33 break; 34 case "old": 35 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 36 location.replace('?mode=new'); 37 })); 38 break; 39 case "new": 40 onpagereveal = e => window.opener.did_reveal(e); 41 } 42 </script> 43 44 <body> 45 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! 46 </body>