clip-path-animation-custom-timing-function-reverse.html (1372B)
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-reverse-ref.html"> 5 <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-692" /> 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.a. 9 10 This is the reverse of clip-path-animation-custom-timing-fumction.html, 11 and tests extrapolation in the negative direction 12 --> 13 <style> 14 @keyframes clippath { 15 0% { 16 clip-path: inset(45% 45%); 17 } 18 19 25% { 20 clip-path: inset(49% 49%); 21 } 22 23 50% { 24 clip-path: inset(45% 45%); 25 } 26 27 75% { 28 clip-path: inset(40% 40%); 29 animation-timing-function: cubic-bezier(0, -9, 1, -9); 30 /* Test that the correct keyframe's timing function is being used. */ 31 } 32 33 100% { 34 clip-path: inset(45% 45%); 35 } 36 } 37 38 .green { 39 background-color: green; 40 width: 200px; 41 height: 200px; 42 43 animation: clippath 10000000s -8717082s 44 /* halfway between the second to last and last keyframes.*/ 45 ; 46 } 47 48 </style> 49 <script src="/common/reftest-wait.js"></script> 50 51 <body> 52 <div class="green anim"></div> 53 54 <script> 55 document.getAnimations()[0].ready.then(takeScreenshot); 56 </script> 57 </body> 58 59 </html>