summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-masking/clip-path
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:27 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:27 +0000
commit40a355a42d4a9444dc753c04c6608dade2f06a23 (patch)
tree871fc667d2de662f171103ce5ec067014ef85e61 /testing/web-platform/tests/css/css-masking/clip-path
parentAdding upstream version 124.0.1. (diff)
downloadfirefox-upstream/125.0.1.tar.xz
firefox-upstream/125.0.1.zip
Adding upstream version 125.0.1.upstream/125.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path')
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html15
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html38
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html53
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html53
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html53
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html53
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html124
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html27
8 files changed, 400 insertions, 16 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html
new file mode 100644
index 0000000000..5b1cf39729
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ clip-path: circle(35px at 10px 10px);
+ }
+</style>
+
+<body>
+ <div class="container"></div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html
new file mode 100644
index 0000000000..50f314da34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-inherit.html
@@ -0,0 +1,38 @@
+<!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-inherit-ref.html">
+<style>
+ .container {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ animation: clippath 20s steps(2, jump-end) -9.999s;
+ }
+
+ body {
+ clip-path: circle(50% at 0 0);
+ }
+
+ @keyframes clippath {
+ 0% {
+ clip-path: circle(20px at 20px 20px);
+ }
+
+ 100% {
+ clip-path: inherit;
+ }
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+ <div class="container"></div>
+
+ <script>
+ waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot);
+ </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html
new file mode 100644
index 0000000000..45e7714328
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-initial.html
@@ -0,0 +1,53 @@
+<!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-none-ref.html">
+<!--
+ This test verifies that
+ 1) clip-path: initial in an animation does not cause a crash
+ 2) that clip-path: initial displays correctly for an animation
+-->
+<style>
+ @keyframes clippath {
+ 0% {
+ clip-path: inset(25% 25%);
+ }
+
+ 100% {
+ clip-path: initial;
+ }
+ }
+
+ .target {
+ animation: clippath 20s steps(2, jump-end) -9.999s;
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+ }
+
+ /*
+ * Ensure that clip-path is truly none, and not a rectangle that
+ * encompasses area of the parent
+ */
+ .outofbounds {
+ position: absolute;
+ top: 200px;
+ left: 200px;
+ height: 10px;
+ width: 10px;
+ background-color: blue
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+ <div class="target">
+ <div class="outofbounds"></div>
+ </div>
+ <script>
+ waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot);
+ </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html
new file mode 100644
index 0000000000..cc23c96e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert-layer.html
@@ -0,0 +1,53 @@
+<!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-none-ref.html">
+<!--
+ This test verifies that
+ 1) clip-path: revert-layer in an animation does not cause a crash
+ 2) that clip-path: revert-layer displays correctly for an animation
+-->
+<style>
+ @keyframes clippath {
+ 0% {
+ clip-path: inset(25% 25%);
+ }
+
+ 100% {
+ clip-path: revert-layer;
+ }
+ }
+
+ .target {
+ animation: clippath 20s steps(2, jump-end) -9.999s;
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+ }
+
+ /*
+ * Ensure that clip path is truly none, and not a rectangle that
+ * encompasses area of the parent
+ */
+ .outofbounds {
+ position: absolute;
+ top: 200px;
+ left: 200px;
+ height: 10px;
+ width: 10px;
+ background-color: blue
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+ <div class="target">
+ <div class="outofbounds"></div>
+ </div>
+ <script>
+ waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot);
+ </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html
new file mode 100644
index 0000000000..8599755d33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-revert.html
@@ -0,0 +1,53 @@
+<!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-none-ref.html">
+<!--
+ This test verifies that
+ 1) clip-path: revert in an animation does not cause a crash
+ 2) that clip-path: revert displays correctly for an animation
+-->
+<style>
+ @keyframes clippath {
+ 0% {
+ clip-path: inset(25% 25%);
+ }
+
+ 100% {
+ clip-path: revert;
+ }
+ }
+
+ .target {
+ animation: clippath 20s steps(2, jump-end) -9.999s;
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+ }
+
+ /*
+ * Ensure that clip path is truly none, and not a rectangle that
+ * encompasses area of the parent
+ */
+ .outofbounds {
+ position: absolute;
+ top: 200px;
+ left: 200px;
+ height: 10px;
+ width: 10px;
+ background-color: blue
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+ <div class="target">
+ <div class="outofbounds"></div>
+ </div>
+ <script>
+ waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot);
+ </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html
new file mode 100644
index 0000000000..655215dc7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-unset.html
@@ -0,0 +1,53 @@
+<!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-none-ref.html">
+<!--
+ This test verifies that
+ 1) clip-path: unset in an animation does not cause a crash
+ 2) that clip-path: unset displays correctly for an animation
+-->
+<style>
+ @keyframes clippath {
+ 0% {
+ clip-path: inset(25% 25%);
+ }
+
+ 100% {
+ clip-path: unset;
+ }
+ }
+
+ .target {
+ animation: clippath 20s steps(2, jump-end) -9.999s;
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+ }
+
+ /*
+ * Ensure that clip-path: none is truly none, and not a rectangle that
+ * encompasses area of the parent
+ */
+ .outofbounds {
+ position: absolute;
+ top: 200px;
+ left: 200px;
+ height: 10px;
+ width: 10px;
+ background-color: blue
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+ <div class="target">
+ <div class="outofbounds"></div>
+ </div>
+ <script>
+ waitForAnimationTime(document.getAnimations()[0], 1).then(takeScreenshot);
+ </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html
new file mode 100644
index 0000000000..9c14372006
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-interpolation-discrete.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>clip-path interpolation with allow-discrete</title>
+ <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+ <meta name="assert" content="clip-path supports animation with allow-discrete.">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+ <style>
+ .parent {
+ clip-path: circle(farthest-side);
+ }
+ .target {
+ clip-path: circle(10px);
+ }
+ </style>
+ <body>
+ <script>
+ 'use strict';
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'circle(10px)',
+ to: 'inset(20px)',
+ }, [
+ {at: -1, expect: 'circle(10px)'},
+ {at: 0, expect: 'circle(10px)'},
+ {at: 0.4, expect: 'circle(10px)'},
+ {at: 0.5, expect: 'inset(20px)'},
+ {at: 1, expect: 'inset(20px)'},
+ {at: 1.5, expect: 'inset(20px)'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'ellipse()',
+ to: 'padding-box',
+ }, [
+ {at: -1, expect: 'ellipse()'},
+ {at: 0, expect: 'ellipse()'},
+ {at: 0.4, expect: 'ellipse()'},
+ {at: 0.5, expect: 'padding-box'},
+ {at: 1, expect: 'padding-box'},
+ {at: 1.5, expect: 'padding-box'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: neutralKeyframe,
+ to: 'none',
+ }, [
+ {at: -1, expect: 'circle(10px)'},
+ {at: 0, expect: 'circle(10px)'},
+ {at: 0.4, expect: 'circle(10px)'},
+ {at: 0.5, expect: 'none'},
+ {at: 1, expect: 'none'},
+ {at: 1.5, expect: 'none'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'initial',
+ to: 'circle()',
+ }, [
+ {at: -1, expect: 'none'},
+ {at: 0, expect: 'none'},
+ {at: 0.4, expect: 'none'},
+ {at: 0.5, expect: 'circle()'},
+ {at: 1, expect: 'circle()'},
+ {at: 1.5, expect: 'circle()'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'inherit',
+ to: 'circle()',
+ }, [
+ {at: -0.1, expect: 'circle(farthest-side)'},
+ {at: 0, expect: 'circle(farthest-side)'},
+ {at: 0.4, expect: 'circle(farthest-side)'},
+ {at: 0.5, expect: 'circle()'},
+ {at: 1, expect: 'circle()'},
+ {at: 1.5, expect: 'circle()'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'unset',
+ to: 'inset(10%)',
+ }, [
+ {at: -0.1, expect: 'none'},
+ {at: 0, expect: 'none'},
+ {at: 0.4, expect: 'none'},
+ {at: 0.5, expect: 'inset(10%)'},
+ {at: 1, expect: 'inset(10%)'},
+ {at: 1.5, expect: 'inset(10%)'},
+ ]);
+
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'stroke-box',
+ to: 'url("abc")',
+ }, [
+ {at: -0.1, expect: 'stroke-box'},
+ {at: 0, expect: 'stroke-box'},
+ {at: 0.4, expect: 'stroke-box'},
+ {at: 0.5, expect: 'url("abc")'},
+ {at: 1, expect: 'url("abc")'},
+ {at: 1.5, expect: 'url("abc")'},
+ ]);
+
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html
index f647c1af59..5f6bb7299f 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html
@@ -3,21 +3,11 @@
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
<link rel="match" href="two-clip-path-animation-diff-length1-ref.html">
<style>
- .container {
+ #container {
width: 100px;
height: 100px;
background-color: green;
- animation: clippath2 10s step-end, clippath1 0.001s;
- }
-
- @keyframes clippath1 {
- 0% {
- clip-path: circle(10% at 50% 50%);
- }
-
- 100% {
- clip-path: circle(50% at 50% 50%);
- }
+ animation: clippath2 10s step-end;
}
@keyframes clippath2 {
@@ -34,15 +24,20 @@
<script src="../../../../web-animations/testcommon.js"></script>
<body>
- <div class="container"></div>
+ <div id="container"></div>
<script>
// This test ensures that if we have two different-length animations, when
// the one with higher compositing order finishes, the other one would still
// run normally.
- const animations = document.getAnimations();
- animations[1].finished.then(() => {
- takeScreenshot();
+ document.getAnimations()[0].ready.then(() => {
+ document.getElementById("container").animate(
+ [
+ { clipPath: "circle(10% at 50% 50%)" },
+ { clipPath: "circle(50% at 50% 50%)" },
+ ],
+ 100,
+ ).finished.then(takeScreenshot);
});
</script>
</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-09 15:37:44 +0000