testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-interpolation-002.html

   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-shape">
   6   <link rel="match" href="reference/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 function.">
  10   <style>
  11     @keyframes anim {
  12       from {
  13         clip-path: shape(evenodd 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: shape(evenodd from 50px 50px,
  19           hline by 50px, vline by 50px, hline by -50%, close,
  20           move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close);
  21       }
  22     }
  23     #rect {
  24       width: 100px;
  25       height: 100px;
  26       background-color: green;
  27       animation: anim 10s -5s paused linear;
  28     }
  29   </style>
  30 </head>
  31 <body>
  32   <div id="rect"></div>
  33 </body>
  34 <script>
  35   requestAnimationFrame(() => {
  36     document.documentElement.classList.remove('reftest-wait');
  37   });
  38 </script>
  39 </html>