blink: Add backdrop-filter support

LayoutTests/animations/interpolation/backdrop-filter-interpolation.html

Index: LayoutTests/animations/interpolation/backdrop-filter-interpolation.html
diff --git a/LayoutTests/animations/interpolation/filter-interpolation.html b/LayoutTests/animations/interpolation/backdrop-filter-interpolation.html
similarity index 90%
copy from LayoutTests/animations/interpolation/filter-interpolation.html
copy to LayoutTests/animations/interpolation/backdrop-filter-interpolation.html
index ee2885901d7b729f1ffe3036d915ef95b04732a1..b9502d3833f4777e4ced2d82c5c51fbe15ad1b49 100644
--- a/LayoutTests/animations/interpolation/filter-interpolation.html
+++ b/LayoutTests/animations/interpolation/backdrop-filter-interpolation.html
@@ -2,7 +2,7 @@
 <meta charset="UTF-8">
 <style>
 .parent {
-  -webkit-filter: hue-rotate(30deg);
+  backdrop-filter: hue-rotate(30deg);
 }
 .target {
   display: inline-block;
@@ -11,7 +11,7 @@
   background-color: green;
   color: white;
   margin-right: 2px;
-  -webkit-filter: hue-rotate(10deg);
+  backdrop-filter: hue-rotate(10deg);
 }
 .expected {
   margin-right: 20px;
@@ -29,7 +29,7 @@
 <script src="resources/interpolation-test.js"></script>
 <script>
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: '',
   to: 'hue-rotate(20deg)',
 }, [
@@ -42,7 +42,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'initial',
   to: 'hue-rotate(20deg)',
 }, [
@@ -55,7 +55,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'inherit',
   to: 'hue-rotate(20deg)',
 }, [
@@ -68,7 +68,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'unset',
   to: 'hue-rotate(20deg)',
 }, [
@@ -82,7 +82,7 @@ assertInterpolation({
 
 // Matching lists:
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'hue-rotate(0deg) blur(6px)',
   to: 'hue-rotate(180deg) blur(10px)'
 }, [
@@ -96,7 +96,7 @@ assertInterpolation({
 
 // Matching lists with differing units:
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'hue-rotate(80deg) blur(6mm)',
   to: 'hue-rotate(100grad) blur(1cm)'
 }, [
@@ -110,14 +110,14 @@ assertInterpolation({
 
 // Mismatched lists:
 assertNoInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'grayscale(0) blur(0px)',
   to: 'blur(10px)'
 });
 
 // Partially matching lists:
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'blur(6px)',
   to: 'blur(10px) hue-rotate(180deg)'
 }, [
@@ -130,7 +130,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none',
   to: 'hue-rotate(180deg)'
 }, [
@@ -143,7 +143,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'hue-rotate(180deg)',
   to: 'none'
 }, [
@@ -157,7 +157,7 @@ assertInterpolation({
 
 // Filter functions (tests lacuna and clamping):
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is 0px
   to: 'blur(10px)'
 }, [
@@ -169,7 +169,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'brightness(0)',
   to: 'none' // lacuna is 1
 }, [
@@ -181,7 +181,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'contrast(0)',
   to: 'none' // lacuna is 1
 }, [
@@ -193,7 +193,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
   to: 'drop-shadow(20px 10px green)'
 }, [
@@ -205,7 +205,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'drop-shadow(0px 0px 0px currentcolor)',
   to: 'drop-shadow(20px 10px green)'
 }, [
@@ -217,7 +217,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is 0
   to: 'grayscale(1)'
 }, [
@@ -229,7 +229,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is 0deg
   to: 'hue-rotate(360deg)'
 }, [
@@ -241,7 +241,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is 0
   to: 'invert(1)'
 }, [
@@ -253,7 +253,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'opacity(0)',
   to: 'none' // lacuna is 1
 }, [
@@ -265,7 +265,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'saturate(0)',
   to: 'none' // lacuna is 1
 }, [
@@ -277,7 +277,7 @@ assertInterpolation({
 ]);
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'none', // lacuna is 0
   to: 'sepia(1)'
 }, [
@@ -289,19 +289,19 @@ assertInterpolation({
 ]);
 
 assertNoInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'url(#svgfilter)',
   to: 'none', // lacuna is not defined
 });
 
 assertNoInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'url(#svgfilter)',
   to: 'blur(5px)',
 });
 
 assertInterpolation({
-  property: '-webkit-filter',
+  property: 'backdrop-filter',
   from: 'initial', // lacuna is 0
   to: 'sepia(1)'
 }, [