clip-path-transition-custom-timing-function.html (964B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> 4 <link rel="match" href="clip-path-animation-custom-timing-function-ref.html"> 5 <meta name="fuzzy" content="maxDifference=0-4; totalPixels=0-628"> 6 <style> 7 .green { 8 background-color: green; 9 width: 200px; 10 height: 200px; 11 12 clip-path: inset(45%); 13 transition-property: clip-path; 14 transition-duration: 10000000s; 15 transition-timing-function: cubic-bezier(0, 9, 1, 9); 16 transition-delay: -5220715s; 17 } 18 19 </style> 20 <script src="/common/reftest-wait.js"></script> 21 22 <body> 23 <div class="green" id="target"></div> 24 25 <script> 26 function update() { 27 document.getElementById('target').style.clipPath = "inset(40%)"; 28 requestAnimationFrame(() => { 29 takeScreenshot(); 30 }); 31 } 32 requestAnimationFrame(function () { 33 requestAnimationFrame(update); 34 }); 35 </script> 36 </body> 37 38 </html>