fill-forwards.html (2181B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO update link --> 6 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Scoped view transition with fill forwards</title> 9 </head> 10 <style> 11 #target { 12 background-color: blue; 13 height: 100px; 14 width: 100px; 15 view-transition-name: target; 16 z-index: 1; 17 } 18 ::view-transition-group(*), 19 ::view-transition-old(*), 20 ::view-transition-new(*) { 21 animation-fill-mode: forwards; 22 } 23 </style> 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script src="/css/css-view-transitions/support/common.js"></script> 27 <body> 28 <div id="target"> 29 </div> 30 </body> 31 <script> 32 promise_test(async () => { 33 const target = document.getElementById('target'); 34 const vt = target.startViewTransition(() => { 35 target.style = 'background-color: teal'; 36 }); 37 await vt.ready; 38 39 assert_animation_pseudos( 40 target, 41 [ 42 '::view-transition-group(target)', 43 '::view-transition-new(target)', 44 '::view-transition-old(target)' 45 ]); 46 assert_animation_names( 47 '::view-transition-old(target)', 48 [ 49 '-ua-mix-blend-mode-plus-lighter', 50 '-ua-view-transition-fade-out' 51 ], 52 'fade out on old target'); 53 assert_animation_names( 54 '::view-transition-new(target)', 55 [ 56 '-ua-mix-blend-mode-plus-lighter', 57 '-ua-view-transition-fade-in' 58 ], 59 'fade in on new target'); 60 61 const tally = document.getAnimations().length; 62 assert_greater_than(tally, 0); 63 document.getAnimations().forEach(a => { 64 a.finish(); 65 }); 66 assert_equals(document.getAnimations().length, tally); 67 await vt.finished; 68 // Need to wait one more frame for effect of VT to be finished. 69 await new Promise(requestAnimationFrame); 70 assert_equals(document.getAnimations().length, 0); 71 }, 'View transition animations do not persist once the transition is ' + 72 'finished even if animation-fill-mode is forwards'); 73 </script> 74 </html>