at-rule-in-layer-cascade-external-stylesheet.html (1294B)
1 <!DOCTYPE html> 2 <title>View Transitions: @view-transition cascaldes correclty with layers in separate external stylesheets.</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 </style> 10 <style> 11 @import "resources/opt-out-style.css" layer(inertA); 12 </style> 13 <style> 14 @import "resources/opt-in-style.css" layer(active); 15 </style> 16 <style> 17 @import "resources/opt-out-style.css" layer(inertB); 18 </style> 19 <script> 20 const params = new URLSearchParams(location.search); 21 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 break; 42 } 43 </script>