at-rule-in-layer-cascade.html (1240B)
1 <!DOCTYPE html> 2 <title>View Transitions: @view-transition cascaldes correclty with layers.</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 @layer inertA, inertB, active; 9 10 @layer inertA { 11 @view-transition { 12 navigation: none; 13 } 14 } 15 @layer active { 16 @view-transition { 17 navigation: auto; 18 } 19 } 20 @layer inertB { 21 @view-transition { 22 navigation: none; 23 } 24 } 25 </style> 26 <script> 27 const params = new URLSearchParams(location.search); 28 29 switch (params.get("mode") || "test") { 30 case "test": 31 promise_test(async t => { 32 const event = await new Promise(resolve => { 33 window.did_reveal = e => { resolve(e) }; 34 const popup = window.open("?mode=old"); 35 t.add_cleanup(() => popup.close()); 36 }); 37 38 assert_not_equals(event.viewTransition, null, "ViewTransition must be triggered."); 39 }); 40 break; 41 case "old": 42 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 43 location.replace('?mode=new'); 44 })); 45 break; 46 case "new": 47 onpagereveal = e => window.opener.did_reveal(e); 48 break; 49 } 50 </script>