diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html')
-rw-r--r-- | testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html new file mode 100644 index 0000000000..61e24e6208 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-three-keyframes1.html @@ -0,0 +1,45 @@ +<!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> |