testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-incompatible-shapes1.html
author Sandor Molnar <smolnar@mozilla.com>
Fri, 11 Jul 2025 19:57:29 +0300 (15 hours ago)
changeset 796221 8ba6984a5604ac7dcf50325b1a0ebadf9e305d22
parent 592696 ea0a09491a013a04869debd573f7a0c69b664faa
permissions -rw-r--r--
Revert "Bug 1972411 - give gnome-shell and pipewire more time to start, and retry the task if we time out. r=jmaher" for causing linux perma failures This reverts commit 2b905fe7199c9210434f7c7f8326b57025c91c55. Revert "Bug 1972411 - make /builds/worker/fetches a volume in the test docker image. r=releng-reviewers,Eijebong" This reverts commit 9d15aecaf6a08b98d3c47f2d0e644e35341b2520.
<!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-incompatible-shapes1-ref.html">
<meta name=fuzzy content="0-255;0-2">
<style>
.container {
  width: 100px;
  height: 100px;
  background-color: green;
  /* Use a long animation that start at 30% 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) -300000s;
}
@keyframes clippath {
  0%   { clip-path: circle(50% at 50% 50%); }
  100% { clip-path: ellipse(10% 20% at 50% 50%); }
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>

<script>
// This test ensures that when selected keyframe shapes are incompatible
// and progress is less than 0.5, "from" keyframe is selected as a result.
document.getAnimations()[0].ready.then(() => {
  takeScreenshot();
});
</script>
</body>
</html>