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