summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-masking/clip
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
commitd8bbc7858622b6d9c278469aab701ca0b609cddf (patch)
treeeff41dc61d9f714852212739e6b3738b82a2af87 /testing/web-platform/tests/css/css-masking/clip
parentReleasing progress-linux version 125.0.3-1~progress7.99u1. (diff)
downloadfirefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.tar.xz
firefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.zip
Merging upstream version 126.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html37
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html37
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html2
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html2
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html12
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html11
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html11
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html29
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html29
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html2
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html8
-rw-r--r--testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html8
12 files changed, 145 insertions, 43 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html
new file mode 100644
index 0000000000..1324aad97f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Masking: Test clip-path interpolation from shape() to path()</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+ <link rel="match" href="clip-path-path-interpolation-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'shape()' for clipping. Test the interpolation of nonzero
+ shape and path function.">
+ <style>
+ @keyframes anim {
+ from {
+ clip-path: shape(nonzero from 20px 20px,
+ hline by 60px, vline by 60px, hline by -60%, close,
+ move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close);
+ }
+ to {
+ clip-path: path(nonzero, "M50 50 h50 v50 h-50 z M20 20 h50 v50 h-50 z");
+ }
+ }
+ #rect {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ animation: anim 10s -5s paused linear;
+ }
+ </style>
+</head>
+<body>
+ <div id="rect"></div>
+</body>
+<script>
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html
new file mode 100644
index 0000000000..69bec3c097
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Masking: Test clip-path interpolation from path() to shape()</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+ <link rel="match" href="clip-path-path-interpolation-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'shape()' for clipping. Test the interpolation of evenodd
+ path and shape function.">
+ <style>
+ @keyframes anim {
+ from {
+ clip-path: path(evenodd, "M20 20 h60 v60 h-60 z M30 30 h40 v40 h-40 z");
+ }
+ to {
+ clip-path: shape(evenodd from 50px 50px,
+ hline by 50px, vline by 50px, hline by -50%, close,
+ move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close);
+ }
+ }
+ #rect {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ animation: anim 10s -5s paused linear;
+ }
+ </style>
+</head>
+<body>
+ <div id="rect"></div>
+</body>
+<script>
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html
index 30ceefcbc0..ff85e8ff80 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html
@@ -10,7 +10,7 @@
width: 100px;
height: 100px;
background-color: green;
- clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');
+ clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0');
zoom: 2;
}
</style>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html
index 5879917f36..981519d22b 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html
@@ -15,7 +15,7 @@
width: 100px;
height: 100px;
background-color: green;
- clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');
+ clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0');
zoom: 2;
}
</style>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html
index c92702d8e7..03e1b21d17 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html
@@ -14,32 +14,32 @@
</clipPath>
<g clip-path="url(#clip)" transform="scale(0.112)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" autoplay loop></video>
+ <video src="/media/test.webm" autoplay loop></video>
</foreignObject>
</g>
<g clip-path="url(#clip)" transform="scale(0.345)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" autoplay loop></video>
+ <video src="/media/test.webm" autoplay loop></video>
</foreignObject>
</g>
<g clip-path="url(#clip)" transform="scale(0.778)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" autoplay loop></video>
+ <video src="/media/test.webm" autoplay loop></video>
</foreignObject>
</g>
<g clip-path="url(#clip)" transform="scale(0.912)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" autoplay loop></video>
+ <video src="/media/test.webm" autoplay loop></video>
</foreignObject>
</g>
<g clip-path="url(#clip)" transform="scale(1.678)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" autoplay loop></video>
+ <video src="/media/test.webm" autoplay loop></video>
</foreignObject>
</g>
<g clip-path="url(#clip)" transform="scale(3.333)">
<foreignObject width="320" height="240">
- <video src="/media/test.ogv" oncanplaythrough="takeScreenshot()" autoplay loop></video>
+ <video src="/media/test.webm" oncanplaythrough="takeScreenshot()" autoplay loop></video>
</foreignObject>
</g>
</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html
index 22e7d9aaf5..ef03f85b28 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html
@@ -8,15 +8,6 @@
'shape()' for clipping. Test curves.">
</head>
<style>
- div {
- width: 100px;
- height: 100px;
- }
- #ref {
- clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10");
- background-color: red;
- position: absolute;
- }
#rect {
width: 100px;
height: 100px;
@@ -29,8 +20,6 @@
}
</style>
<body>
- <p>You should see no red.</p>
- <div id="ref"></div>
<div id="rect"></div>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html
index 14e3ba6329..1da9177de5 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html
@@ -8,15 +8,6 @@
'shape()' for clipping. Test arcs.">
</head>
<style>
- div {
- width: 100px;
- height: 100px;
- }
- #ref {
- clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20");
- background-color: red;
- position: absolute;
- }
#rect {
width: 100px;
height: 100px;
@@ -28,8 +19,6 @@
}
</style>
<body>
- <p>You should see no red.</p>
- <div id="ref"></div>
<div id="rect"></div>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html
new file mode 100644
index 0000000000..44e358bb59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and shape function with padding-box</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+ <link rel="match" href="reference/clip-path-path-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'shape()' for clipping. Test the usage of the reference box. On pass you
+ should see a green square.">
+</head>
+<style>
+ #rect {
+ /* The size of the padding-box is 100x100. */
+ width: 120px;
+ height: 120px;
+ padding: 10px;
+ border: 10px solid red;
+ box-sizing: border-box;
+ background-color: green;
+ clip-path: shape(from 0px 0px,
+ hline by 80px, vline by 80%, hline by -80%, close)
+ padding-box;
+ }
+</style>
+<body>
+ <p>The test passes if there are a green filled rect.</p>
+ <div id="rect"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html
new file mode 100644
index 0000000000..7f6db73ebd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and shape function with content-box</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+ <link rel="match" href="reference/clip-path-path-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'shape()' for clipping. Test the usage of the reference box. On pass you
+ should see a green square.">
+</head>
+<style>
+ #rect {
+ width: 140px;
+ height: 140px;
+ padding: 10px;
+ border: 10px solid red;
+ box-sizing: border-box;
+ background-color: green;
+ /* The size of the content-box is 100x100. */
+ clip-path: shape(from -10px -10%,
+ hline by 80px, vline by 80%, hline by -80%, close)
+ content-box;
+ }
+</style>
+<body>
+ <p>The test passes if there are a green filled rect.</p>
+ <div id="rect"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html
index ef91c619c4..76b6e473f0 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html
@@ -6,7 +6,7 @@
width: 200px;
height: 200px;
background: green;
- clip-path: path(nonzero, 'M0 0, L200 0, L0 200');
+ clip-path: path(nonzero, 'M0,0 L200,0 L0,200');
}
</style>
<div id="rect"></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html
index 46e098c4eb..8d6173464c 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html
@@ -5,18 +5,14 @@
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
</head>
<style>
- div {
+ #ref {
width: 100px;
height: 100px;
- }
- #ref {
background-color: green;
- clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10");
- position: absolute;
+ clip-path: path(nonzero, "M 10 10 Q 40 0 60 20 T 90 0 c 10 40 20 20 -20 60 s -10 70 -40 -10");
}
</style>
<body>
- <p>You should see no red.</p>
<div id="ref"></div>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html
index ec8f941079..b74e6abdd9 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html
@@ -5,18 +5,14 @@
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
</head>
<style>
- div {
+ #ref {
width: 100px;
height: 100px;
- }
- #ref {
background-color: green;
- clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20");
- position: absolute;
+ clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20 a 33 33 120 1 1 -40 50 A 20 25 0 0 0 20 20");
}
</style>
<body>
- <p>You should see no red.</p>
<div id="ref"></div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-21 14:38:43 +0000