no-css-animation-while-render-blocked.html (1340B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html> 4 <title>View transitions: CSS Animations are paused while render-blocked</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:khushalsagar@chromium.org"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 @keyframes fade { 13 from { 14 opacity: 0; 15 } 16 } 17 18 div { 19 width: 100px; 20 height: 100px; 21 background: blue; 22 contain: paint; 23 view-transition-name: target; 24 } 25 26 .animated { 27 animation: fade 0.5s; 28 } 29 </style> 30 31 <div id=target></div> 32 33 <script> 34 let renderBlocked = true; 35 36 promise_test(() => { 37 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 38 return new Promise(async (resolve, reject) => { 39 requestAnimationFrame(() => { 40 document.startViewTransition(() => { 41 return new Promise(async (inner_resolve) => { 42 step_timeout(() => { 43 renderBlocked = false; 44 inner_resolve(); 45 }, 1000); 46 }); 47 }); 48 49 target.classList.toggle("animated"); 50 target.onanimationend = () => { 51 if (renderBlocked) 52 reject(); 53 else 54 resolve(); 55 }; 56 }); 57 }); 58 }, "CSS animation is blocked until prepare callback"); 59 </script>