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