clip-path-animation-three-keyframes1.html (1608B)
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-keyframes1-ref.html"> 5 <style> 6 .container { 7 width: 100px; 8 height: 100px; 9 background-color: green; 10 /* Use a long animation that start at 5% progress where the slope of the 11 selected timing function is zero. By setting up the animation in this way, 12 we accommodate lengthy delays in running the test without a potential drift 13 in the animated property value. This is important for avoiding flakes, 14 especially on debug builds. The screenshots are taken as soon as the 15 animation is ready, thus the long animation duration has no bearing on 16 the actual duration of the test. */ 17 animation: clippath 1000000s cubic-bezier(0,1,1,0) -50000s; 18 } 19 @keyframes clippath { 20 0% { clip-path: ellipse(10% 20% at 50% 50%) } 21 10% { 22 clip-path: ellipse(20% 30% at 70% 70%); 23 animation-timing-function: cubic-bezier(0,1,1,0); 24 } 25 100% { 26 clip-path: ellipse(10% 20% at 50% 50%); 27 animation-timing-function: cubic-bezier(0,1,1,0); 28 } 29 } 30 </style> 31 <script src="/common/reftest-wait.js"></script> 32 <body> 33 <div class="container"></div> 34 35 <script> 36 // This test ensures that we select the correct start and end keyframes for 37 // interpolation. In this test, the start delay of the animation makes it 38 // jump to 5% right away. So for this test, we would choose the keyframes at 39 // 0% and 10% for interpolation. 40 document.getAnimations()[0].ready.then(() => { 41 takeScreenshot(); 42 }); 43 </script> 44 </body> 45 </html>