clip-path-transition-crash.html (800B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <style> 4 .container { 5 width: 100px; 6 height: 100px; 7 clip-path: circle(30% at 30% 30%); 8 background-color: green; 9 transition-property: clip-path; 10 transition-duration: 0.5s; 11 } 12 </style> 13 <script src="/web-animations/testcommon.js"></script> 14 <script src="/web-animations/resources/timing-utils.js"></script> 15 16 <body> 17 <div class="container" id="target"></div> 18 19 <script> 20 window.onload = async () => { 21 await waitForNextFrame(); 22 document.getElementById('target').style.clipPath = "circle(40% at 40% 40%)"; 23 await waitForNextFrame(); 24 await document.getAnimations()[0].finished; 25 await waitForAnimationFrames(3); 26 document.documentElement.classList.remove('test-wait'); 27 } 28 </script> 29 </body> 30 31 </html>