clip-path-animation-custom-timing-function.html (1120B)
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="0-2;0-320"> 6 <!-- 7 Test that ensures that the bounding rect for a clip path animation is not 8 limited to the size of the largest keyframe. 9 --> 10 <style> 11 @keyframes clippath { 12 0% { 13 clip-path: inset(45% 45%); 14 } 15 16 25% { 17 clip-path: inset(40% 40%); 18 } 19 20 50% { 21 clip-path: inset(45% 45%); 22 } 23 24 75% { 25 clip-path: inset(40% 40%); 26 } 27 28 100% { 29 clip-path: inset(45% 45%); 30 } 31 } 32 33 .green { 34 background-color: green; 35 width: 200px; 36 height: 200px; 37 animation: clippath 10000000s -1286796s 38 /* roughly where the derivative of the cubic-bezier is zero */ 39 ; 40 animation-timing-function: cubic-bezier(0, 9, 1, 9); 41 } 42 43 </style> 44 <script src="/common/reftest-wait.js"></script> 45 46 <body> 47 <div class="green"></div> 48 49 <script> 50 document.getAnimations()[0].ready.then(takeScreenshot); 51 </script> 52 </body> 53 54 </html>