clip-path-shape-interpolation-004.html (1126B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Masking: Test clip-path interpolation from path() to shape()</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> 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 'shape()' for clipping. Test the interpolation of evenodd 9 path and shape function."> 10 <style> 11 @keyframes anim { 12 from { 13 clip-path: path(evenodd, "M20 20 h60 v60 h-60 z M30 30 h40 v40 h-40 z"); 14 } 15 to { 16 clip-path: shape(evenodd from 50px 50px, 17 hline by 50px, vline by 50px, hline by -50%, close, 18 move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close); 19 } 20 } 21 #rect { 22 width: 100px; 23 height: 100px; 24 background-color: green; 25 animation: anim 10s -5s paused linear; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="rect"></div> 31 </body> 32 <script> 33 requestAnimationFrame(() => { 34 document.documentElement.classList.remove('reftest-wait'); 35 }); 36 </script> 37 </html>