clip-path-animation-svg.html (898B)
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-svg-ref.html"> 5 <style> 6 .clipped { 7 background-color: green; 8 stroke: black; 9 stroke-width: 3; 10 fill: red; 11 animation: clippath 20s steps(2, jump-end) -9.999s; 12 } 13 14 .svg { 15 width: 100px; 16 height: 100px; 17 } 18 19 @keyframes clippath { 20 0% { 21 clip-path: circle(50% at 50% 50%); 22 } 23 24 100% { 25 clip-path: circle(20% at 50% 50%); 26 } 27 } 28 </style> 29 <script src="/common/reftest-wait.js"></script> 30 <script src="../../../../web-animations/resources/timing-utils.js"></script> 31 32 <body> 33 <svg class="svg"> 34 <circle class="clipped" cx="50" cy="50" r="40" /> 35 </svg> 36 37 <script> 38 waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot); 39 </script> 40 </body> 41 42 </html>