testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html
author Lando <lando@lando.test>
Thu, 10 Jul 2025 16:11:40 +0000 (11 hours ago)
changeset 795966 8f464d9c468ba1a7c1b0338deaa8bc8023f8ae3d
parent 592696 ea0a09491a013a04869debd573f7a0c69b664faa
permissions -rw-r--r--
Merge autoland to mozilla-central
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
<link rel="match" href="clip-path-animation-three-keyframes1-ref.html">
<style>
.container {
  width: 100px;
  height: 100px;
  background-color: green;
  /* Use a long animation that start at 5% progress where the slope of the
     selected timing function is zero. By setting up the animation in this way,
     we accommodate lengthy delays in running the test without a potential drift
     in the animated property value. This is important for avoiding flakes,
     especially on debug builds. The screenshots are taken as soon as the
     animation is ready, thus the long animation duration has no bearing on
     the actual duration of the test. */
  animation: clippath 1000000s cubic-bezier(0,1,1,0) -50000s;
}
@keyframes clippath {
  0% { clip-path: ellipse(10% 20% at 50% 50%) }
  10% {
    clip-path: ellipse(20% 30% at 70% 70%);
    animation-timing-function: cubic-bezier(0,1,1,0);
  }
  100% {
    clip-path: ellipse(10% 20% at 50% 50%);
    animation-timing-function: cubic-bezier(0,1,1,0);
  }
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>

<script>
// This test ensures that we select the correct start and end keyframes for
// interpolation. In this test, the start delay of the animation makes it
// jump to 5% right away. So for this test, we would choose the keyframes at
// 0% and 10% for interpolation.
document.getAnimations()[0].ready.then(() => {
  takeScreenshot();
});
</script>
</body>
</html>