at-rule-in-non-matching-media.html (1082B)
1 <!DOCTYPE html> 2 <title>View Transitions: @view-transition nested in a non-matching @media rule.</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> 8 @media print { 9 @view-transition { 10 navigation: auto; 11 } 12 } 13 </style> 14 <script> 15 const params = new URLSearchParams(location.search); 16 17 switch (params.get("mode") || "test") { 18 case "test": 19 promise_test(async t => { 20 const event = await new Promise(resolve => { 21 window.did_reveal = e => { resolve(e) }; 22 const popup = window.open("?mode=old"); 23 t.add_cleanup(() => popup.close()); 24 }); 25 26 assert_equals(event.viewTransition, null, "ViewTransition must not be triggered."); 27 }); 28 break; 29 case "old": 30 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 31 location.replace('?mode=new'); 32 })); 33 break; 34 case "new": 35 onpagereveal = e => window.opener.did_reveal(e); 36 break; 37 } 38 </script>