clip-path-animation-three-keyframes2.html (1724B)
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-three-keyframes2-ref.html"> 5 <meta name=fuzzy content="0-255;0-1000"> 6 <style> 7 .container { 8 width: 300px; 9 height: 300px; 10 background-color: green; 11 /* Use a long animation that start at 50% progress where the slope of the 12 selected timing function is zero. By setting up the animation in this way, 13 we accommodate lengthy delays in running the test without a potential drift 14 in the animated property value. This is important for avoiding flakes, 15 especially on debug builds. The screenshots are taken as soon as the 16 animation is ready, thus the long animation duration has no bearing on 17 the actual duration of the test. */ 18 animation: clippath 1000000s cubic-bezier(0,1,1,0) -500000s; 19 } 20 @keyframes clippath { 21 0% { 22 clip-path: path('M 300 300 L 500 0 L 500 500 L 0 300 z'); 23 } 24 10% { 25 clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z'); 26 animation-timing-function: cubic-bezier(0,1,1,0); 27 } 28 100% { 29 clip-path: path('M 200 200 L 300 0 L 300 300 L 0 200 z'); 30 animation-timing-function: cubic-bezier(0,1,1,0); 31 } 32 } 33 34 </style> 35 <script src="/common/reftest-wait.js"></script> 36 <body> 37 <div class="container"></div> 38 39 <script> 40 // The start delay of the animation makes it jump 50% of the animation, which 41 // means we would select the keyframes at 10% and 100% for animation. The 42 // progress would be (0.5-0.1) / (1-0.1) = 0.44. So a timing function input of 43 // 0.44 results in an output of 0.5. 44 document.getAnimations()[0].ready.then(() => { 45 takeScreenshot(); 46 }); 47 </script> 48 </body> 49 </html>