at-rule-in-shadow-dom.html (1485B)
1 <!DOCTYPE html> 2 <title>View Transitions: @view-transition not applied from shadow tree.</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 <script> 8 const params = new URLSearchParams(location.search); 9 10 switch (params.get("mode") || "test") { 11 case "test": 12 promise_test(async t => { 13 const event = await new Promise(resolve => { 14 window.did_reveal = e => { resolve(e) }; 15 const popup = window.open("?mode=old"); 16 t.add_cleanup(() => popup.close()); 17 }); 18 19 assert_equals(event.viewTransition, null, "ViewTransition must not be triggered."); 20 }); 21 break; 22 case "old": 23 onload = () => { 24 const host = document.querySelector("#host"); 25 const shadow = host.attachShadow({ mode: "open" }); 26 // Can't use the opt-in from shadow DOM on the new page since the opt-in must 27 // be effective by the time the <body> element is parsed and only elements in 28 // <body> can be a shadow root. 29 const style = document.createElement("style"); 30 style.textContent = `@view-transition { 31 navigation: auto; 32 }`; 33 shadow.appendChild(style); 34 requestAnimationFrame(() => requestAnimationFrame(() => { 35 location.replace('?mode=new'); 36 })); 37 }; 38 case "new": 39 onpagereveal = e => window.opener.did_reveal(e); 40 break; 41 } 42 </script> 43 <div id="host"></div>