Bug 1555165 - Part 2: Update backdrop-filter WPT tests and expectations r=boris
authorConnor Brewster <cbrewster@mozilla.com>
Wed, 26 Jun 2019 19:53:24 +0000
changeset 543098 cba1f1b068da9484ca8dbd8748397b2fe0d7b048
parent 543097 e4fecbe399e1824f5e06fb6229506879dab49dcc
child 543099 5c589c8bb56297ed41750aafed46acae6da80c20
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersboris
bugs1555165
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1555165 - Part 2: Update backdrop-filter WPT tests and expectations r=boris Differential Revision: https://phabricator.services.mozilla.com/D36062
testing/web-platform/meta/css/css-typed-om/the-stylepropertymap/properties/backdrop-filter.html.ini
testing/web-platform/meta/css/filter-effects/__dir__.ini
testing/web-platform/meta/css/filter-effects/parsing/backdrop-filter-computed.html.ini
testing/web-platform/meta/css/filter-effects/parsing/backdrop-filter-parsing-valid.html.ini
testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html
testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html
testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html
testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html
--- a/testing/web-platform/meta/css/css-typed-om/the-stylepropertymap/properties/backdrop-filter.html.ini
+++ b/testing/web-platform/meta/css/css-typed-om/the-stylepropertymap/properties/backdrop-filter.html.ini
@@ -1,4 +1,4 @@
 [backdrop-filter.html]
+  prefs: [layout.css.backdrop-filter.enabled:true]
   ['backdrop-filter' property]
     expected: FAIL
-
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/css/filter-effects/__dir__.ini
@@ -0,0 +1,1 @@
+prefs: [layout.css.backdrop-filter.enabled:true]
deleted file mode 100644
--- a/testing/web-platform/meta/css/filter-effects/parsing/backdrop-filter-computed.html.ini
+++ /dev/null
@@ -1,88 +0,0 @@
-[backdrop-filter-computed.html]
-  [Filter Effects Module Level 2: getComputedValue().backdropFilter]
-    expected: FAIL
-
-  [Property backdrop-filter value 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)' computes to 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'contrast()' computes to 'contrast(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'grayscale(50%)' computes to 'grayscale(0.5)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'opacity(100%)' computes to 'opacity(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'saturate(0)' computes to 'saturate(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'invert(0)' computes to 'invert(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'invert()' computes to 'invert(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'drop-shadow(1px 2px)' computes to 'drop-shadow(rgb(0, 255, 0) 1px 2px 0px)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'hue-rotate()' computes to 'hue-rotate(0deg)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'brightness(0)' computes to 'brightness(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'opacity()' computes to 'opacity(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'brightness(300%)' computes to 'brightness(3)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'blur()' computes to 'blur(0px)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'sepia()' computes to 'sepia(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'grayscale()' computes to 'grayscale(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'sepia(100%)' computes to 'sepia(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'sepia(0)' computes to 'sepia(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'invert(100%)' computes to 'invert(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'saturate(300%)' computes to 'saturate(3)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'hue-rotate(90deg)' computes to 'hue-rotate(90deg)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'contrast(0)' computes to 'contrast(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'none' computes to 'none']
-    expected: FAIL
-
-  [Property backdrop-filter value 'contrast(300%)' computes to 'contrast(3)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'drop-shadow(rgb(4, 5, 6) 1px 2px 0px)' computes to 'drop-shadow(rgb(4, 5, 6) 1px 2px 0px)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'opacity(0)' computes to 'opacity(0)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'saturate()' computes to 'saturate(1)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'blur(100px)' computes to 'blur(100px)']
-    expected: FAIL
-
-  [Property backdrop-filter value 'brightness()' computes to 'brightness(1)']
-    expected: FAIL
-
deleted file mode 100644
--- a/testing/web-platform/meta/css/filter-effects/parsing/backdrop-filter-parsing-valid.html.ini
+++ /dev/null
@@ -1,112 +0,0 @@
-[backdrop-filter-parsing-valid.html]
-  [e.style['backdrop-filter'\] = "sepia()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "hue-rotate(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "brightness(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "grayscale()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "saturate()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "invert(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "opacity(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "sepia(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "url(\\"picture.svg#f\\")" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "opacity()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "opacity(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "none" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(0 0 0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "blur()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "contrast(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "blur(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "invert(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "brightness(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(1px 2px 3px)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "hue-rotate(90deg)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(1px 2px rgb(4, 5, 6))" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "sepia(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "grayscale(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(rgb(4, 5, 6) 1px 2px)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "blur(10px) url(\\"picture.svg#f\\") contrast(20) brightness(30)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "drop-shadow(1px 2px)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "url(\\"https://www.example.com/picture.svg#f\\")" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "saturate(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "grayscale(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "saturate(300%)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "invert()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "brightness()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "contrast()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "hue-rotate()" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "contrast(0)" should set the property value]
-    expected: FAIL
-
-  [e.style['backdrop-filter'\] = "blur(100px)" should set the property value]
-    expected: FAIL
-
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
@@ -0,0 +1,49 @@
+<!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>
+      body {
+        color: blue;
+      }
+    </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)'}
+      ]);
+    </script>
+  </body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html
+++ b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html
@@ -11,56 +11,56 @@
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_valid_value("backdrop-filter", "none");
 
 test_valid_value("backdrop-filter", "blur(100px)");
 test_valid_value("backdrop-filter", "blur(0)", "blur(0px)");
-test_valid_value("backdrop-filter", "blur()");
+test_valid_value("backdrop-filter", "blur()", ["blur()", "blur(0px)"]);
 
 test_valid_value("backdrop-filter", "brightness(0)");
 test_valid_value("backdrop-filter", "brightness(300%)");
-test_valid_value("backdrop-filter", "brightness()");
+test_valid_value("backdrop-filter", "brightness()", ["brightness()", "brightness(1)"]);
 
 test_valid_value("backdrop-filter", "contrast(0)");
 test_valid_value("backdrop-filter", "contrast(300%)");
-test_valid_value("backdrop-filter", "contrast()");
+test_valid_value("backdrop-filter", "contrast()", ["contrast()", "contrast(1)"]);
 
 test_valid_value("backdrop-filter", "drop-shadow(1px 2px)");
 test_valid_value("backdrop-filter", "drop-shadow(1px 2px 3px)");
 test_valid_value("backdrop-filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)");
 test_valid_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
 test_valid_value("backdrop-filter", "drop-shadow(1px 2px rgb(4, 5, 6))", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
 test_valid_value("backdrop-filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)");
 
 test_valid_value("backdrop-filter", "grayscale(0)");
 test_valid_value("backdrop-filter", "grayscale(300%)", "grayscale(100%)");
-test_valid_value("backdrop-filter", "grayscale()");
+test_valid_value("backdrop-filter", "grayscale()", ["grayscale()", "grayscale(1)"]);
 
 test_valid_value("backdrop-filter", "hue-rotate(90deg)");
 test_valid_value("backdrop-filter", "hue-rotate(0)", "hue-rotate(0deg)");
-test_valid_value("backdrop-filter", "hue-rotate()");
+test_valid_value("backdrop-filter", "hue-rotate()", ["hue-rotate()", "hue-rotate(0deg)"]);
 
 test_valid_value("backdrop-filter", "invert(0)");
 test_valid_value("backdrop-filter", "invert(300%)", "invert(100%)");
-test_valid_value("backdrop-filter", "invert()");
+test_valid_value("backdrop-filter", "invert()", ["invert()", "invert(1)"]);
 
 test_valid_value("backdrop-filter", "opacity(0)");
 test_valid_value("backdrop-filter", "opacity(300%)", "opacity(100%)");
-test_valid_value("backdrop-filter", "opacity()");
+test_valid_value("backdrop-filter", "opacity()", ["opacity()", "opacity(1)"]);
 
 test_valid_value("backdrop-filter", "saturate(0)");
 test_valid_value("backdrop-filter", "saturate(300%)");
-test_valid_value("backdrop-filter", "saturate()");
+test_valid_value("backdrop-filter", "saturate()", ["saturate()", "saturate(1)"]);
 
 test_valid_value("backdrop-filter", "sepia(0)");
 test_valid_value("backdrop-filter", "sepia(300%)", "sepia(100%)");
-test_valid_value("backdrop-filter", "sepia()");
+test_valid_value("backdrop-filter", "sepia()", ["sepia()", "sepia(1)"]);
 
 test_valid_value("backdrop-filter", 'url("picture.svg#f")');
 
 test_valid_value("backdrop-filter", 'url("https://www.example.com/picture.svg#f")');
 
 test_valid_value("backdrop-filter", 'blur(10px) url("picture.svg#f") contrast(20) brightness(30)');
 </script>
 </body>