Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/filter-effects/animation
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
9 files changed, 1069 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
new file mode 100644
index 0000000000..d539a36c5a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        backdrop-filter: hue-rotate(30deg);
+      }
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        backdrop-filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(0deg) blur(6px)',
+        to: 'hue-rotate(180deg) blur(10px)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg) blur(4px)'},
+        {at: 0, expect: 'hue-rotate(0deg) blur(6px)'},
+        {at: 0.25, expect: 'hue-rotate(45deg) blur(7px)'},
+        {at: 0.5, expect: 'hue-rotate(90deg) blur(8px)'},
+        {at: 1, expect: 'hue-rotate(180deg) blur(10px)'},
+        {at: 1.5, expect: 'hue-rotate(270deg) blur(12px)'}
+      ]);
+
+      // Matching lists with differing units:
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(80deg) blur(6mm)',
+        to: 'hue-rotate(100grad) blur(1cm)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(75deg) blur(4mm)'},
+        {at: 0, expect: 'hue-rotate(80deg) blur(6mm)'},
+        {at: 0.25, expect: 'hue-rotate(82.5deg) blur(7mm)'},
+        {at: 0.5, expect: 'hue-rotate(85deg) blur(8mm)'},
+        {at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
+        {at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: neutralKeyframe,
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(5deg)'},
+        {at: 0, expect: 'hue-rotate(10deg)'},
+        {at: 0.3, expect: 'hue-rotate(13deg)'},
+        {at: 0.6, expect: 'hue-rotate(16deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(25deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'initial',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'inherit',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(35deg)'},
+        {at: 0, expect: 'hue-rotate(30deg)'},
+        {at: 0.3, expect: 'hue-rotate(27deg)'},
+        {at: 0.6, expect: 'hue-rotate(24deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(15deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'unset',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none',
+        to: 'hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.25, expect: 'hue-rotate(45deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(180deg)'},
+        {at: 1.5, expect: 'hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(180deg)',
+        to: 'none'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(270deg)'},
+        {at: 0, expect: 'hue-rotate(180deg)'},
+        {at: 0.25, expect: 'hue-rotate(135deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(0deg)'},
+        {at: 1.5, expect: 'hue-rotate(-90deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'drop-shadow(0px 0px 0px currentcolor)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px white)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'}
+      ]);
+
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'url("#svgfilter")',
+        to: 'blur(5px)',
+      });
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'initial', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html
new file mode 100644
index 0000000000..84a9b565b8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Partially matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none',
+        to: 'opacity(0.5) hue-rotate(180deg)',
+      }, [
+        {at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'},
+        {at: 0.25, expect: 'opacity(0.875) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'opacity(0.75) hue-rotate(90deg)'},
+        {at: 1, expect: 'opacity(0.5) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'opacity(0.25) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'blur(6px)',
+        to: 'blur(10px) hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'},
+        {at: 0.25, expect: 'blur(7px) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'blur(8px) hue-rotate(90deg)'},
+        {at: 1, expect: 'blur(10px) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'blur(12px) hue-rotate(270deg)'},
+      ]);
+
+      // Mismatched lists:
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'grayscale(0) blur(0px)',
+        to: 'blur(10px)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html
new file mode 100644
index 0000000000..a8508bb445
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="lacuna matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0px
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'brightness(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'contrast(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px transparent)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #00C000)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'grayscale(1)'
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale(1)'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0deg
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'invert(1)'
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert(1)'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'opacity(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'saturate(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'url("#svgfilter")',
+        to: 'none', // lacuna is not defined
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html
new file mode 100644
index 0000000000..12389ae3f6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Default value when omitted matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'blur()', // Default value when omitted is 0px.
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur()'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'brightness(0)',
+        to: 'brightness()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness()'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'contrast(0)',
+        to: 'contrast()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast()'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'drop-shadow(0px 0px)', // The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
+        to: 'drop-shadow(20px 10px 30px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px blue)'},
+        {at: 0, expect: 'drop-shadow(0px 0px blue)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px 15px rgb(0, 64, 128))'},
+        {at: 1, expect: 'drop-shadow(20px 10px 30px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px 45px rgb(0, 192, 0))'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'grayscale(0)',
+        to: 'grayscale()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale()'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate()', // Default value when omitted is 0deg.
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate()'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'invert(0)',
+        to: 'invert()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert()'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'opacity(0)',
+        to: 'opacity()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity()'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'saturate(0)',
+        to: 'saturate()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate()'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'sepia(0)',
+        to: 'sepia()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia()'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html
new file mode 100644
index 0000000000..d256ef3e73
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'color-interpolation-filters',
+  from: 'initial',
+  to: 'auto'
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html
new file mode 100644
index 0000000000..62fcbf0a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        filter: hue-rotate(30deg);
+      }
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(0deg) blur(6px)',
+        to: 'hue-rotate(180deg) blur(10px)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg) blur(4px)'},
+        {at: 0, expect: 'hue-rotate(0deg) blur(6px)'},
+        {at: 0.25, expect: 'hue-rotate(45deg) blur(7px)'},
+        {at: 0.5, expect: 'hue-rotate(90deg) blur(8px)'},
+        {at: 1, expect: 'hue-rotate(180deg) blur(10px)'},
+        {at: 1.5, expect: 'hue-rotate(270deg) blur(12px)'}
+      ]);
+
+      // Matching lists with differing units:
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(80deg) blur(6mm)',
+        to: 'hue-rotate(100grad) blur(1cm)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(75deg) blur(4mm)'},
+        {at: 0, expect: 'hue-rotate(80deg) blur(6mm)'},
+        {at: 0.25, expect: 'hue-rotate(82.5deg) blur(7mm)'},
+        {at: 0.5, expect: 'hue-rotate(85deg) blur(8mm)'},
+        {at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
+        {at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: neutralKeyframe,
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(5deg)'},
+        {at: 0, expect: 'hue-rotate(10deg)'},
+        {at: 0.3, expect: 'hue-rotate(13deg)'},
+        {at: 0.6, expect: 'hue-rotate(16deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(25deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'initial',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'inherit',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(35deg)'},
+        {at: 0, expect: 'hue-rotate(30deg)'},
+        {at: 0.3, expect: 'hue-rotate(27deg)'},
+        {at: 0.6, expect: 'hue-rotate(24deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(15deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'unset',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html
new file mode 100644
index 0000000000..6ef25a7daf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Partially matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none',
+        to: 'opacity(0.5) hue-rotate(180deg)',
+      }, [
+        {at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'},
+        {at: 0, expect: 'opacity(1) hue-rotate(0deg)'},
+        {at: 0.25, expect: 'opacity(0.875) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'opacity(0.75) hue-rotate(90deg)'},
+        {at: 1, expect: 'opacity(0.5) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'opacity(0.25) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'blur(6px)',
+        to: 'blur(10px) hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'},
+        {at: 0, expect: 'blur(6px) hue-rotate(0deg)'},
+        {at: 0.25, expect: 'blur(7px) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'blur(8px) hue-rotate(90deg)'},
+        {at: 1, expect: 'blur(10px) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'blur(12px) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none',
+        to: 'hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.25, expect: 'hue-rotate(45deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(180deg)'},
+        {at: 1.5, expect: 'hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(180deg)',
+        to: 'none'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(270deg)'},
+        {at: 0, expect: 'hue-rotate(180deg)'},
+        {at: 0.25, expect: 'hue-rotate(135deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(0deg)'},
+        {at: 1.5, expect: 'hue-rotate(-90deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(0px 0px 0px currentcolor)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px white)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'}
+      ]);
+
+      // crbug.com/904333: Test that ResolveInterpolableColor doesn't overflow.
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(20px 10px blue)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: 2147483648, expect: 'drop-shadow(20px 10px #00FF00'}
+      ]);
+
+      // Mismatched lists:
+      test_no_interpolation({
+        property: 'filter',
+        from: 'grayscale(0) blur(0px)',
+        to: 'blur(10px)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html
new file mode 100644
index 0000000000..1d512487de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="lacuna matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0px
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur(0px)'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'brightness(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness(1)'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'contrast(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast(1)'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px transparent)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px transparent)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #00C000)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'grayscale(1)'
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale(1)'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0deg
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'invert(1)'
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert(1)'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'opacity(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity(1)'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'saturate(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate(1)'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+
+      test_no_interpolation({
+        property: 'filter',
+        from: 'url("#svgfilter")',
+        to: 'none', // lacuna is not defined
+      });
+
+      test_no_interpolation({
+        property: 'filter',
+        from: 'url("#svgfilter")',
+        to: 'blur(5px)',
+      });
+
+      test_interpolation({
+        property: 'filter',
+        from: 'initial', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'}, // Equivalent to sepia(0)
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html
new file mode 100644
index 0000000000..63dd17361a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Default value when omitted matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'blur()', // Default value when omitted is 0px.
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur()'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'brightness(0)',
+        to: 'brightness()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness()'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'contrast(0)',
+        to: 'contrast()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast()'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(0px 0px)', // The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
+        to: 'drop-shadow(20px 10px 30px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px blue)'},
+        {at: 0, expect: 'drop-shadow(0px 0px blue)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px 15px rgb(0, 64, 128))'},
+        {at: 1, expect: 'drop-shadow(20px 10px 30px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px 45px rgb(0, 192, 0))'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'grayscale(0)',
+        to: 'grayscale()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale()'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate()', // Default value when omitted is 0deg.
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate()'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'invert(0)',
+        to: 'invert()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert()'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'opacity(0)',
+        to: 'opacity()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity()'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'saturate(0)',
+        to: 'saturate()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate()'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'sepia(0)',
+        to: 'sepia()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia()'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/filter-effects/animation
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip