pseudo-with-classes-view-transition-image-pair.html (1134B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transition classes: group selectors should respect classes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/"> 5 <link rel="author" href="mailto:nrosenthal@chromium.org"> 6 <link rel="match" href="pseudo-with-classes-ref.html"> 7 <script src="/common/rendering-utils.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 #target { 12 width: 100px; 13 height: 100px; 14 position: absolute; 15 background: green; 16 view-transition-name: target; 17 view-transition-class: cls; 18 } 19 20 ::view-transition-group(*) { 21 animation-play-state: paused; 22 } 23 24 ::view-transition-image-pair(target.cls) { 25 transform: translateX(100px); 26 animation-play-state: paused; 27 } 28 29 ::view-transition-old(*) { 30 animation: unset; 31 opacity: 1; 32 } 33 34 ::view-transition-new(*) { 35 animation: unset; 36 opacity: 0; 37 } 38 39 40 </style> 41 <div id=target></div> 42 43 <script> 44 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 45 46 window.addEventListener("load", () => { 47 document.startViewTransition().ready.then(requestAnimationFrame(() => takeScreenshot())); 48 }); 49 </script>