summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-transforms
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:13:33 +0000
commit086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch)
treea4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /testing/web-platform/tests/css/css-transforms
parentAdding debian version 124.0.1-1. (diff)
downloadfirefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz
firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms')
-rw-r--r--testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation-math-functions-tentative.html46
-rw-r--r--testing/web-platform/tests/css/css-transforms/animation/scale-animation-math-functions-tentative.html46
-rw-r--r--testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js16
-rw-r--r--testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-005.html24
4 files changed, 127 insertions, 5 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation-math-functions-tentative.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation-math-functions-tentative.html
new file mode 100644
index 0000000000..eccb554fd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation-math-functions-tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>rotate interpolation with css math functions</title>
+ <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+
+ <style>
+ :root {
+ font-size: 10px;
+ }
+ </style>
+ <body>
+ <script>
+ test_interpolation({
+ property: 'rotate',
+ from: '100deg',
+ to: 'calc(sign(20rem - 20px) * 180deg)',
+ }, [
+ {at: -1, expect: '20deg'},
+ {at: 0, expect: '100deg'},
+ {at: 0.125, expect: '110deg'},
+ {at: 0.875, expect: '170deg'},
+ {at: 1, expect: '180deg'},
+ {at: 2, expect: '260deg'}
+ ]);
+
+ test_interpolation({
+ property: 'rotate',
+ from: 'calc(sign(20rem - 20px) * 100deg)',
+ to: 'calc(progress(10rem from 20px to 100px) * 180deg)',
+ }, [
+ {at: -1, expect: '20deg'},
+ {at: 0, expect: '100deg'},
+ {at: 0.125, expect: '110deg'},
+ {at: 0.875, expect: '170deg'},
+ {at: 1, expect: '180deg'},
+ {at: 2, expect: '260deg'}
+ ]);
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-animation-math-functions-tentative.html b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-math-functions-tentative.html
new file mode 100644
index 0000000000..2ad177469a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-math-functions-tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>scale interpolation with css math functions</title>
+ <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/css/support/interpolation-testcommon.js"></script>
+ </head>
+
+ <style>
+ :root {
+ font-size: 10px;
+ }
+ </style>
+ <body>
+ <script>
+ test_interpolation({
+ property: 'scale',
+ from: '100',
+ to: 'calc(sign(20rem - 20px) * 180)',
+ }, [
+ {at: -1, expect: '20'},
+ {at: 0, expect: '100'},
+ {at: 0.125, expect: '110'},
+ {at: 0.875, expect: '170'},
+ {at: 1, expect: '180'},
+ {at: 2, expect: '260'}
+ ]);
+
+ test_interpolation({
+ property: 'scale',
+ from: 'calc(sign(20rem - 20px) * 100)',
+ to: 'calc(progress(10rem from 20px to 100px) * 180)',
+ }, [
+ {at: -1, expect: '20'},
+ {at: 0, expect: '100'},
+ {at: 0.125, expect: '110'},
+ {at: 0.875, expect: '170'},
+ {at: 1, expect: '180'},
+ {at: 2, expect: '260'}
+ ]);
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js b/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
index d79cbedefe..4070aec84a 100644
--- a/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
+++ b/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
@@ -127,6 +127,13 @@ const midpointOptions = {
delay: -duration/2
};
+// Constant-valued animation using the ending keyframe's value.
+const referenceOptions = {
+ easing: 'steps(1, jump-start)',
+ duration: duration,
+ delay: -duration/2
+}
+
// Similar to midpointOptions, but to produce the interpolation result
// at -1 instead of the interpolation result at 0.5. This easing curve
// has zero slope at its midpoint of -100% (though does have curvature).
@@ -169,9 +176,8 @@ async function createTests(tests) {
takeScreenshot();
}
-// Create references using an animation with identical keyframes for start
-// and end so as to avoid rounding and anti-aliasing differences between
-// animated and non-animated pathways.
+// Create references using a constant-valued animation to avoid rounding and
+// anti-aliasing differences between animated and non-animated pathways.
async function createRefs(tests) {
styleBody();
for (const obj of tests) {
@@ -181,8 +187,8 @@ async function createRefs(tests) {
initialStyle(div);
finalStyle(div);
var anim = div.animate(
- {transform: [test[midIndex], test[midIndex]]},
- midpointOptions);
+ {transform: ['none', test[midIndex]]},
+ referenceOptions);
await anim.ready;
}
diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-005.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-005.html
new file mode 100644
index 0000000000..c1a741b741
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>transform-box: border-box, stroke with vector-effect: non-scaling-stroke</title>
+<link rel="match" href="reference/svgbox-rect-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box">
+<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#VectorEffects">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9640">
+<meta name="assert" content="The used value of transform-box is fill-box on SVG with non-scaling-stroke"/>
+<style>
+#container {
+ fill: green;
+ stroke: black;
+ stroke-width: 20;
+ transform-box: border-box;
+ transform: scale(0.5) translateY(-100%);
+}
+#inner {
+ vector-effect: non-scaling-stroke;
+}
+</style>
+<svg width="400" height="300">
+ <a id="container">
+ <rect id="inner" width="100" height="200" x="50" y="180"/>
+ </a>
+</svg>