clip-path-with-view-timeline.html (1473B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="help" href="https://crbug.com/391632970"> 7 <title>clip path animation with a view timeline doesn't crash</title> 8 </head> 9 <style type="text/css"> 10 .spacer { 11 height: 200vh; 12 } 13 @keyframes clip { 14 0% { clip-path: circle(50% at 50% 50%); } 15 50% { clip-path: circle(5% at 50% 50%); } 16 100% { clip-path: circle(50% at 50% 50%); } 17 } 18 #target { 19 height: 100px; 20 width: 100px; 21 clip-path: circle(50% at 50% 50%); 22 background-color: blue; 23 animation: clip auto linear; 24 animation-timeline: --t1; 25 view-timeline: --t1; 26 animation-range-start: cover 20%; 27 animation-range-end: cover 80%; 28 } 29 </style> 30 <body> 31 <div class="spacer"></div> 32 <div id="target"></div> 33 <div class="spacer"></div> 34 </body> 35 <script> 36 function raf() { 37 return new Promise(resolve => { 38 requestAnimationFrame(resolve); 39 }); 40 } 41 window.onload = async () => { 42 await raf(); 43 await raf(); 44 const scroller = document.scrollingElement; 45 const spacer = document.querySelector('.spacer'); 46 scroller.scrollTop = spacer.clientHeight; 47 const anim = document.getAnimations()[0]; 48 anim.ready.then(async () => { 49 await raf(); 50 await raf(); 51 // Remove test-wait to indicate that the test is complete. 52 document.documentElement.className = ""; 53 }); 54 }; 55 </script>