clip-path-path-interpolation-002.html (1017B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Masking: Test clip-path evenodd path interpolation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> 6 <link rel="match" href="clip-path-path-interpolation-002-ref.html"> 7 <meta name="assert" content="The clip-path property takes the basic shape 8 'path()' for clipping. Test the interpolation of evenodd 9 path function."> 10 <style> 11 @keyframes anim { 12 from { 13 clip-path: path(evenodd, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z'); 14 } 15 to { 16 clip-path: path(evenodd, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z'); 17 } 18 } 19 #rect { 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 animation: anim 10s -5s paused linear; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="rect" class="path-evenodd-animation"></div> 29 </body> 30 <script> 31 requestAnimationFrame(() => { 32 document.documentElement.classList.remove('reftest-wait'); 33 }); 34 </script> 35 </html>