<!DOCTYPE html><htmlclass="reftest-wait"><head><title>CSS Masking: Test clip-path interpolation from shape() to path()</title><linkrel="help"href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"><linkrel="match"href="clip-path-path-interpolation-001-ref.html"><metaname="assert"content="The clip-path property takes the basic shape 'shape()' for clipping. Test the interpolation of nonzero shape and path function."><style>@keyframesanim{from{clip-path:shape(nonzerofrom20px20px,hlineby60px,vlineby60px,hlineby-60%,close,moveto30%30px,hlineby40px,vlineby40px,hlineby-40px,close);}to{clip-path:path(nonzero,"M50 50 h50 v50 h-50 z M20 20 h50 v50 h-50 z");}}#rect{width:100px;height:100px;background-color:green;animation:anim10s-5spausedlinear;}</style></head><body><divid="rect"></div></body><script>requestAnimationFrame(()=>{document.documentElement.classList.remove('reftest-wait');});</script></html>