pseudo-element-animations-rerun.html (1554B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSS Animations on view transition pseudos run more than once</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../css-animations/support/testcommon.js"></script> 8 <style> 9 :root::view-transition, 10 :root::view-transition-group(root), 11 :root::view-transition-image-pair(root), 12 :root::view-transition-old(root), 13 :root::view-transition-new(root) { 14 animation: view-transition-animation 1ms; 15 } 16 @keyframes view-transition-animation { 17 to { opacity: 0 } 18 } 19 </style> 20 <div id="log"></div> 21 <script> 22 "use strict"; 23 promise_test(async t => { 24 let viewTransition = document.startViewTransition(() => {}); 25 await viewTransition.ready; 26 assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Starting a view transition should start related animations."); 27 28 await viewTransition.finished; 29 assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 0, "Stopping a view transition should stop related animations."); 30 31 await waitForNextFrame(); 32 viewTransition = document.startViewTransition(() => {}); 33 await viewTransition.ready; 34 assert_equals(document.documentElement.getAnimations({ subtree: true }).length, 5, "Re-starting a view-transition should restart related animations."); 35 }, "CSS Animations on view transitions are canceled and restarted when the view transition starts and ends."); 36 </script>