clip-path-shape-interpolation-003.html (1126B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Masking: Test clip-path interpolation from shape() to path()</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> 6 <link rel="match" href="clip-path-path-interpolation-001-ref.html"> 7 <meta name="assert" content="The clip-path property takes the basic shape 8 'shape()' for clipping. Test the interpolation of nonzero 9 shape and path function."> 10 <style> 11 @keyframes anim { 12 from { 13 clip-path: shape(nonzero from 20px 20px, 14 hline by 60px, vline by 60px, hline by -60%, close, 15 move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close); 16 } 17 to { 18 clip-path: path(nonzero, "M50 50 h50 v50 h-50 z M20 20 h50 v50 h-50 z"); 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>