active-pseudo.html (1525B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="content-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 body { margin: 20px } 11 #scope { 12 position: relative; z-index: 0; background: pink; 13 border: 5px dashed purple; padding: 5px; 14 width: 180px; height: 120px; view-transition-name: none; 15 } 16 #part { 17 position: relative; z-index: 0; background: lightgrey; 18 border: 5px solid blue; padding: 5px; 19 width: 120px; height: 60px; 20 left: 20px; top: 20px; 21 } 22 23 body:has(> #scope:active-view-transition-type(baz)) #part { 24 view-transition-name: foo; 25 } 26 #scope:active-view-transition::view-transition { background: yellow; } 27 #scope:active-view-transition-type(notme)::view-transition { background: red; } 28 29 #scope::view-transition-group(foo) { animation-play-state: paused; } 30 #scope::view-transition-new(foo) { animation: unset; opacity: 0; } 31 #scope::view-transition-old(foo) { animation: unset; opacity: 1; } 32 33 </style> 34 </head> 35 <body> 36 <div id=scope> 37 <div id=part> 38 PARTICIPANT 39 </div> 40 </div> 41 <script> 42 43 const scope = document.querySelector("#scope"); 44 failIfNot(scope.startViewTransition, "Missing element.startViewTransition"); 45 46 async function runTest() { 47 await waitForCompositorReady(); 48 scope.startViewTransition({ 49 update: () => requestAnimationFrame(takeScreenshot), 50 types: ["baz"] 51 }); 52 } 53 onload = () => runTest(); 54 55 </script> 56 </body> 57 </html>