pseudo-with-classes-entry.html (1239B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transition classes: entry animation should consider view-transition-class from new state</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 div { 12 width: 100px; 13 height: 100px; 14 position: absolute; 15 } 16 17 #target { 18 background: green; 19 } 20 21 #target.new-state { 22 view-transition-class: cls; 23 view-transition-name: target; 24 } 25 26 @keyframes jump { 27 from { opacity: 1;} 28 to { opacity: 1;} 29 } 30 31 ::view-transition-group(*), 32 ::view-transition-image-pair(*), 33 ::view-transition-new(*) { 34 animation-name: jump; 35 animation-timing-function: step-start; 36 animation-play-state: paused; 37 } 38 39 ::view-transition-new(*.cls) { 40 left: 100px; 41 } 42 43 </style> 44 <div id=target></div> 45 46 <script> 47 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 48 49 window.addEventListener("load", () => { 50 document.startViewTransition(() => { 51 document.getElementById("target").classList.add("new-state"); 52 }).ready.then(takeScreenshot); 53 }); 54 </script>