chromium/src/third_party/blink/web_tests/animations/composition/backdrop-filter-composition.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset="UTF-8">
 <body>
 <script src="../interpolation/resources/interpolation-test.js"></script>
 <script>
 // Basic additive composition; the lists should be concatenated.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   addFrom: 'blur(40px)',
   addTo: 'blur(90px)',
 }, [
   {at: -0.5, is: 'blur(10px) blur(15px)'},
   {at: 0, is: 'blur(10px) blur(40px)'},
   {at: 0.25, is: 'blur(10px) blur(52.5px)'},
   {at: 0.5, is: 'blur(10px) blur(65px)'},
   {at: 0.75, is: 'blur(10px) blur(77.5px)'},
   {at: 1, is: 'blur(10px) blur(90px)'},
   {at: 1.5, is: 'blur(10px) blur(115px)'},
 ]);

 // Here we have add-from and replace-to, so the list will be have mismatched
 // lengths and the replace-to list will have to be extended to interpolate as
 // per https://drafts.fxtf.org/filter-effects-1/#interpolation-of-filters
 //
 // That is, this becomes an interpolation of the form:
 //   sepia(0.5) sepia(0.5) --> sepia(1) sepia(0)
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'sepia(0.5)',
   addFrom: 'sepia(0.5)',
   replaceTo: 'sepia(1)',
 }, [
   {at: -0.5, is: 'sepia(0.25) sepia(0.75)'},
   {at: 0, is: 'sepia(0.5) sepia(0.5)'},
   {at: 0.25, is: 'sepia(0.625) sepia(0.375)'},
   {at: 0.5, is: 'sepia(0.75) sepia(0.25)'},
   {at: 0.75, is: 'sepia(0.875) sepia(0.125)'},
   {at: 1, is: 'sepia(1) sepia(0)'},
   {at: 1.5, is: 'sepia(1) sepia(0)'},
 ]);

 // In this case we have replace-from and add-to, so similar extending behavior
 // takes place. Note that brightness has an initial value of 1.
 //
 // That is, this becomes an interpolation of the form:
 //   brightness(0.5) brightness(1) --> brightness(0) brightness(1.5)
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'brightness(0)',
   replaceFrom: 'brightness(0.5)',
   addTo: 'brightness(1.5)',
 }, [
   {at: -0.5, is: 'brightness(0.75) brightness(0.75)'},
   {at: 0, is: 'brightness(0.5) brightness(1)'},
   {at: 0.25, is: 'brightness(0.375) brightness(1.125)'},
   {at: 0.5, is: 'brightness(0.25) brightness(1.25)'},
   {at: 0.75, is: 'brightness(0.125) brightness(1.375)'},
   {at: 1, is: 'brightness(0) brightness(1.5)'},
   {at: 1.5, is: 'brightness(0) brightness(1.75)'},
 ]);

 // Test mixing properties.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'invert(0.5)',
   addFrom: 'saturate(2)',
   addTo: 'saturate(3)',
 }, [
   {at: -0.5, is: 'invert(0.5) saturate(1.5)'},
   {at: 0, is: 'invert(0.5) saturate(2)'},
   {at: 0.25, is: 'invert(0.5) saturate(2.25)'},
   {at: 0.5, is: 'invert(0.5) saturate(2.5)'},
   {at: 0.75, is: 'invert(0.5) saturate(2.75)'},
   {at: 1, is: 'invert(0.5) saturate(3)'},
   {at: 1.5, is: 'invert(0.5) saturate(3.5)'},
 ]);

 // Test the 'none' behavior; composition happens before interpolation, so this
 // is actually an interpolation of:
 //   invert(0.5) saturate(1) --> invert(1) saturate(3)
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'invert(0.5)',
   addFrom: 'none',
   replaceTo: 'invert(1) saturate(3)',
 }, [
   {at: -0.5, is: 'invert(0.25) saturate(0)'},
   {at: 0, is: 'invert(0.5) saturate(1)'},
   {at: 0.25, is: 'invert(0.625) saturate(1.5)'},
   {at: 0.5, is: 'invert(0.75) saturate(2)'},
   {at: 0.75, is: 'invert(0.875) saturate(2.5)'},
   {at: 1, is: 'invert(1) saturate(3)'},
   {at: 1.5, is: 'invert(1.25) saturate(4)'},
 ]);

 // Test having multiple underlying values
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'grayscale(25%) blur(10px)',
   addFrom: 'brightness(0)',
   addTo: 'brightness(1)',
 }, [
   {at: -0.5, is: 'grayscale(25%) blur(10px) brightness(0)'},
   {at: 0, is: 'grayscale(25%) blur(10px) brightness(0)'},
   {at: 0.25, is: 'grayscale(25%) blur(10px) brightness(0.25)'},
   {at: 0.5, is: 'grayscale(25%) blur(10px) brightness(0.5)'},
   {at: 0.75, is: 'grayscale(25%) blur(10px) brightness(0.75)'},
   {at: 1, is: 'grayscale(25%) blur(10px) brightness(1)'},
   {at: 1.5, is: 'grayscale(25%) blur(10px) brightness(1.5)'},
 ]);

 // Make sure that a matching underlying value is still prefixed.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   addFrom: 'grayscale(50%) blur(10px)',
   addTo: 'grayscale(25%) blur(10px)',
 }, [
   {at: -0.5, is: 'blur(10px) grayscale(0.625) blur(10px)'},
   {at: 0, is: 'blur(10px) grayscale(0.5) blur(10px)'},
   {at: 0.25, is: 'blur(10px) grayscale(0.4375) blur(10px)'},
   {at: 0.5, is: 'blur(10px) grayscale(0.375) blur(10px)'},
   {at: 0.75, is: 'blur(10px) grayscale(0.3125) blur(10px)'},
   {at: 1, is: 'blur(10px) grayscale(0.25) blur(10px)'},
   {at: 1.5, is: 'blur(10px) grayscale(0.125) blur(10px)'},
 ]);

 // Check the case where composition causes a url() to be included; the animation
 // should change to discrete.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'url(#a)',
   addFrom: 'grayscale(50%) blur(30px)',
   addTo: 'grayscale(25%) blur(40px)',
 }, [
   {at: -0.5, is: 'url("#a") grayscale(0.5) blur(30px)'},
   {at: 0, is: 'url("#a") grayscale(0.5) blur(30px)'},
   {at: 0.25, is: 'url("#a") grayscale(0.5) blur(30px)'},
   {at: 0.5, is: 'url("#a") grayscale(0.25) blur(40px)'},
   {at: 0.75, is: 'url("#a") grayscale(0.25) blur(40px)'},
   {at: 1, is: 'url("#a") grayscale(0.25) blur(40px)'},
   {at: 1.5, is: 'url("#a") grayscale(0.25) blur(40px)'},
 ]);

 // And check the inverse; nothing fancy here but it should be a discrete
 // animation with blur prepended.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   addFrom: 'url(#a) brightness(1)',
   addTo: 'url(#b) brightness(0)',
 }, [
   {at: -0.5, is: 'blur(10px) url(#a) brightness(1)'},
   {at: 0, is: 'blur(10px) url(#a) brightness(1)'},
   {at: 0.25, is: 'blur(10px) url(#a) brightness(1)'},
   {at: 0.5, is: 'blur(10px) url(#b) brightness(0)'},
   {at: 0.75, is: 'blur(10px) url(#b) brightness(0)'},
   {at: 1, is: 'blur(10px) url(#b) brightness(0)'},
   {at: 1.5, is: 'blur(10px) url(#b) brightness(0)'},
 ]);

 // --------------- Accumulation tests. ---------------------

 // blur; simple addition.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   accumulateFrom: 'blur(40px)',
   accumulateTo: 'blur(90px)',
 }, [
   {at: -0.5, is: 'blur(25px)'},
   {at: 0, is: 'blur(50px)'},
   {at: 0.25, is: 'blur(62.5px)'},
   {at: 0.5, is: 'blur(75px)'},
   {at: 0.75, is: 'blur(87.5px)'},
   {at: 1, is: 'blur(100px)'},
   {at: 1.5, is: 'blur(125px)'},
 ]);

 // brightness; 1-based addition.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'brightness(0.25)',
   accumulateFrom: 'brightness(0.5)',
   accumulateTo: 'brightness(1.5)',
 }, [
   {at: -0.5, is: 'brightness(0)'},
   {at: 0, is: 'brightness(0)'},
   {at: 0.25, is: 'brightness(0)'},
   {at: 0.5, is: 'brightness(0.25)'},
   {at: 0.75, is: 'brightness(0.5)'},
   {at: 1, is: 'brightness(0.75)'},
   {at: 1.5, is: 'brightness(1.25)'},
 ]);

 // contrast; 1-based addition.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'contrast(0.25)',
   accumulateFrom: 'contrast(0.5)',
   accumulateTo: 'contrast(1.5)',
 }, [
   {at: -0.5, is: 'contrast(0)'},
   {at: 0, is: 'contrast(0)'},
   {at: 0.25, is: 'contrast(0)'},
   {at: 0.5, is: 'contrast(0.25)'},
   {at: 0.75, is: 'contrast(0.5)'},
   {at: 1, is: 'contrast(0.75)'},
   {at: 1.5, is: 'contrast(1.25)'},
 ]);

 // drop-shadow; addition of lengths plus color addition
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'drop-shadow(10px 5px 0px rgb(255, 0, 0))',
   accumulateFrom: 'drop-shadow(0px 10px 10px rgb(0, 255, 0))',
   accumulateTo: 'drop-shadow(50px 30px 10px rgb(0, 0, 255))',
 }, [
   {at: -0.5, is: 'drop-shadow(-15px 5px 10px rgb(255, 255, 0))'},
   {at: 0, is: 'drop-shadow(10px 15px 10px rgb(255, 255, 0))'},
   {at: 0.25, is: 'drop-shadow(22.5px 20px 10px rgb(255, 191, 64))'},
   {at: 0.5, is: 'drop-shadow(35px 25px 10px rgb(255, 128, 128))'},
   {at: 0.75, is: 'drop-shadow(47.5px 30px 10px rgb(255, 64, 191))'},
   {at: 1, is: 'drop-shadow(60px 35px 10px rgb(255, 0, 255))'},
   {at: 1.5, is: 'drop-shadow(85px 45px 10px rgb(255, 0, 255))'},
 ]);

 // grayscale; 1-based addition.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'grayscale(0.25)',
   accumulateFrom: 'grayscale(0.5)',
   accumulateTo: 'grayscale(1.5)',  // clamped to 1
 }, [
   {at: -0.5, is: 'grayscale(0)'},
   {at: 0, is: 'grayscale(0)'},
   {at: 0.25, is: 'grayscale(0)'},
   {at: 0.5, is: 'grayscale(0)'},
   {at: 0.75, is: 'grayscale(0.125)'},
   {at: 1, is: 'grayscale(0.25)'},
   {at: 1.5, is: 'grayscale(0.5)'},
 ]);

 // hue-rotate; simple addition
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'hue-rotate(45deg)',
   accumulateFrom: 'hue-rotate(140deg)',
   accumulateTo: 'hue-rotate(400deg)',
 }, [
   {at: -0.5, is: 'hue-rotate(55deg)'},
   {at: 0, is: 'hue-rotate(185deg)'},
   {at: 0.25, is: 'hue-rotate(250deg)'},
   {at: 0.5, is: 'hue-rotate(315deg)'},
   {at: 0.75, is: 'hue-rotate(380deg)'},
   {at: 1, is: 'hue-rotate(445deg)'},
   {at: 1.5, is: 'hue-rotate(575deg)'},
 ]);

 // invert; 1-based addition.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'invert(0.25)',
   accumulateFrom: 'invert(0.5)',
   accumulateTo: 'invert(1.5)',  // clamped to 1
 }, [
   {at: -0.5, is: 'invert(0)'},
   {at: 0, is: 'invert(0)'},
   {at: 0.25, is: 'invert(0)'},
   {at: 0.5, is: 'invert(0)'},
   {at: 0.75, is: 'invert(0.125)'},
   {at: 1, is: 'invert(0.25)'},
   {at: 1.5, is: 'invert(0.5)'},
 ]);

 // opacity; 1-based addition
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'opacity(0.25)',
   accumulateFrom: 'opacity(0.5)',
   accumulateTo: 'opacity(1.5)',  // clamped to 1
 }, [
   {at: -0.5, is: 'opacity(0)'},
   {at: 0, is: 'opacity(0)'},
   {at: 0.25, is: 'opacity(0)'},
   {at: 0.5, is: 'opacity(0)'},
   {at: 0.75, is: 'opacity(0.125)'},
   {at: 1, is: 'opacity(0.25)'},
   {at: 1.5, is: 'opacity(0.5)'},
 ]);

 // saturate; 1-based addition
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'saturate(0.25)',
   accumulateFrom: 'saturate(0.5)',
   accumulateTo: 'saturate(1.5)',
 }, [
   {at: -0.5, is: 'saturate(0)'},
   {at: 0, is: 'saturate(0)'},
   {at: 0.25, is: 'saturate(0)'},
   {at: 0.5, is: 'saturate(0.25)'},
   {at: 0.75, is: 'saturate(0.5)'},
   {at: 1, is: 'saturate(0.75)'},
   {at: 1.5, is: 'saturate(1.25)'},
 ]);

 // sepia; 1-based addition
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'sepia(0.25)',
   accumulateFrom: 'sepia(0.5)',
   accumulateTo: 'sepia(1.5)',  // clamped to 1
 }, [
   {at: -0.5, is: 'sepia(0)'},
   {at: 0, is: 'sepia(0)'},
   {at: 0.25, is: 'sepia(0)'},
   {at: 0.5, is: 'sepia(0)'},
   {at: 0.75, is: 'sepia(0.125)'},
   {at: 1, is: 'sepia(0.25)'},
   {at: 1.5, is: 'sepia(0.5)'},
 ]);

 // url; cannot be accumulated
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'url(#a)',
   accumulateFrom: 'url(#b)',
   accumulateTo: 'url(#c)',
 }, [
   {at: -0.5, is: 'url(#b)'},
   {at: 0, is: 'url(#b)'},
   {at: 0.25, is: 'url(#b)'},
   {at: 0.5, is: 'url(#c)'},
   {at: 0.75, is: 'url(#c)'},
   {at: 1, is: 'url(#c)'},
   {at: 1.5, is: 'url(#c)'},
 ]);

 // Test auto-extension of the underlying list.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   accumulateFrom: 'blur(40px) saturate(1)',
   accumulateTo: 'blur(90px) saturate(0)',
 }, [
   {at: -0.5, is: 'blur(25px) saturate(1.5)'},
   {at: 0, is: 'blur(50px) saturate(1)'},
   {at: 0.25, is: 'blur(62.5px) saturate(0.75)'},
   {at: 0.5, is: 'blur(75px) saturate(0.5)'},
   {at: 0.75, is: 'blur(87.5px) saturate(0.25)'},
   {at: 1, is: 'blur(100px) saturate(0)'},
   {at: 1.5, is: 'blur(125px) saturate(0)'},
 ]);

 // Test auto-extension of the composited-onto list.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px) saturate(0.75)',
   accumulateFrom: 'blur(40px)',
   accumulateTo: 'blur(90px)',
 }, [
   {at: -0.5, is: 'blur(25px) saturate(0.75)'},
   {at: 0, is: 'blur(50px) saturate(0.75)'},
   {at: 0.25, is: 'blur(62.5px) saturate(0.75)'},
   {at: 0.5, is: 'blur(75px) saturate(0.75)'},
   {at: 0.75, is: 'blur(87.5px) saturate(0.75)'},
   {at: 1, is: 'blur(100px) saturate(0.75)'},
   {at: 1.5, is: 'blur(125px) saturate(0.75)'},
 ]);

 // Mismatching type for underlying; it just gets replaced.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'contrast(0.75)',
   accumulateFrom: 'blur(40px)',
   accumulateTo: 'blur(80px)',
 }, [
   {at: -0.5, is: 'blur(20px)'},
   {at: 0, is: 'blur(40px)'},
   {at: 0.25, is: 'blur(50px)'},
   {at: 0.5, is: 'blur(60px)'},
   {at: 0.75, is: 'blur(70px)'},
   {at: 1, is: 'blur(80px)'},
   {at: 1.5, is: 'blur(100px)'},
 ]);

 // Underlying only type-matches one side of the interpolation; it should be
 // accumulated onto that side, but the entire animation will be discrete due to
 // the mis-matching types.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   accumulateFrom: 'blur(40px)',
   accumulateTo: 'saturate(1)',
 }, [
   {at: -0.5, is: 'blur(50px)'},
   {at: 0, is: 'blur(50px)'},
   {at: 0.25, is: 'blur(50px)'},
   {at: 0.5, is: 'saturate(1)'},
   {at: 0.75, is: 'saturate(1)'},
   {at: 1, is: 'saturate(1)'},
   {at: 1.5, is: 'saturate(1)'},
 ]);

 // Test a case where only one side is accumulative and the other is replace.
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   accumulateFrom: 'blur(30px)',
   replaceTo: 'blur(100px)',
 }, [
   {at: -0.5, is: 'blur(10px)'},
   {at: 0, is: 'blur(40px)'},
   {at: 0.25, is: 'blur(55px)'},
   {at: 0.5, is: 'blur(70px)'},
   {at: 0.75, is: 'blur(85px)'},
   {at: 1, is: 'blur(100px)'},
   {at: 1.5, is: 'blur(130px)'},
 ]);

 // Test a case where only one side is accumulative and the other is add.
 // This basically looks like:
 //   accumulateSide = blur(Apx) neutral-blur
 //   addSide        = blur(10px) blur(Bpx)
 assertComposition({
   property: 'backdrop-filter',
   underlying: 'blur(10px)',
   accumulateFrom: 'blur(40px)',
   addTo: 'blur(100px)',
 }, [
   {at: -0.5, is: 'blur(70px) blur(0px)'},
   {at: 0, is: 'blur(50px) blur(0px)'},
   {at: 0.25, is: 'blur(40px) blur(25px)'},
   {at: 0.5, is: 'blur(30px) blur(50px)'},
   {at: 0.75, is: 'blur(20px) blur(75px)'},
   {at: 1, is: 'blur(10px) blur(100px)'},
   {at: 1.5, is: 'blur(0px) blur(150px)'},
 ]);
 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<body>
	<script src="../interpolation/resources/interpolation-test.js"></script>
	<script>
	// Basic additive composition; the lists should be concatenated.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	addFrom: 'blur(40px)',
	addTo: 'blur(90px)',
	}, [
	{at: -0.5, is: 'blur(10px) blur(15px)'},
	{at: 0, is: 'blur(10px) blur(40px)'},
	{at: 0.25, is: 'blur(10px) blur(52.5px)'},
	{at: 0.5, is: 'blur(10px) blur(65px)'},
	{at: 0.75, is: 'blur(10px) blur(77.5px)'},
	{at: 1, is: 'blur(10px) blur(90px)'},
	{at: 1.5, is: 'blur(10px) blur(115px)'},
	]);

	// Here we have add-from and replace-to, so the list will be have mismatched
	// lengths and the replace-to list will have to be extended to interpolate as
	// per https://drafts.fxtf.org/filter-effects-1/#interpolation-of-filters
	//
	// That is, this becomes an interpolation of the form:
	// sepia(0.5) sepia(0.5) --> sepia(1) sepia(0)
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'sepia(0.5)',
	addFrom: 'sepia(0.5)',
	replaceTo: 'sepia(1)',
	}, [
	{at: -0.5, is: 'sepia(0.25) sepia(0.75)'},
	{at: 0, is: 'sepia(0.5) sepia(0.5)'},
	{at: 0.25, is: 'sepia(0.625) sepia(0.375)'},
	{at: 0.5, is: 'sepia(0.75) sepia(0.25)'},
	{at: 0.75, is: 'sepia(0.875) sepia(0.125)'},
	{at: 1, is: 'sepia(1) sepia(0)'},
	{at: 1.5, is: 'sepia(1) sepia(0)'},
	]);

	// In this case we have replace-from and add-to, so similar extending behavior
	// takes place. Note that brightness has an initial value of 1.
	//
	// That is, this becomes an interpolation of the form:
	// brightness(0.5) brightness(1) --> brightness(0) brightness(1.5)
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'brightness(0)',
	replaceFrom: 'brightness(0.5)',
	addTo: 'brightness(1.5)',
	}, [
	{at: -0.5, is: 'brightness(0.75) brightness(0.75)'},
	{at: 0, is: 'brightness(0.5) brightness(1)'},
	{at: 0.25, is: 'brightness(0.375) brightness(1.125)'},
	{at: 0.5, is: 'brightness(0.25) brightness(1.25)'},
	{at: 0.75, is: 'brightness(0.125) brightness(1.375)'},
	{at: 1, is: 'brightness(0) brightness(1.5)'},
	{at: 1.5, is: 'brightness(0) brightness(1.75)'},
	]);

	// Test mixing properties.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'invert(0.5)',
	addFrom: 'saturate(2)',
	addTo: 'saturate(3)',
	}, [
	{at: -0.5, is: 'invert(0.5) saturate(1.5)'},
	{at: 0, is: 'invert(0.5) saturate(2)'},
	{at: 0.25, is: 'invert(0.5) saturate(2.25)'},
	{at: 0.5, is: 'invert(0.5) saturate(2.5)'},
	{at: 0.75, is: 'invert(0.5) saturate(2.75)'},
	{at: 1, is: 'invert(0.5) saturate(3)'},
	{at: 1.5, is: 'invert(0.5) saturate(3.5)'},
	]);

	// Test the 'none' behavior; composition happens before interpolation, so this
	// is actually an interpolation of:
	// invert(0.5) saturate(1) --> invert(1) saturate(3)
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'invert(0.5)',
	addFrom: 'none',
	replaceTo: 'invert(1) saturate(3)',
	}, [
	{at: -0.5, is: 'invert(0.25) saturate(0)'},
	{at: 0, is: 'invert(0.5) saturate(1)'},
	{at: 0.25, is: 'invert(0.625) saturate(1.5)'},
	{at: 0.5, is: 'invert(0.75) saturate(2)'},
	{at: 0.75, is: 'invert(0.875) saturate(2.5)'},
	{at: 1, is: 'invert(1) saturate(3)'},
	{at: 1.5, is: 'invert(1.25) saturate(4)'},
	]);

	// Test having multiple underlying values
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'grayscale(25%) blur(10px)',
	addFrom: 'brightness(0)',
	addTo: 'brightness(1)',
	}, [
	{at: -0.5, is: 'grayscale(25%) blur(10px) brightness(0)'},
	{at: 0, is: 'grayscale(25%) blur(10px) brightness(0)'},
	{at: 0.25, is: 'grayscale(25%) blur(10px) brightness(0.25)'},
	{at: 0.5, is: 'grayscale(25%) blur(10px) brightness(0.5)'},
	{at: 0.75, is: 'grayscale(25%) blur(10px) brightness(0.75)'},
	{at: 1, is: 'grayscale(25%) blur(10px) brightness(1)'},
	{at: 1.5, is: 'grayscale(25%) blur(10px) brightness(1.5)'},
	]);

	// Make sure that a matching underlying value is still prefixed.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	addFrom: 'grayscale(50%) blur(10px)',
	addTo: 'grayscale(25%) blur(10px)',
	}, [
	{at: -0.5, is: 'blur(10px) grayscale(0.625) blur(10px)'},
	{at: 0, is: 'blur(10px) grayscale(0.5) blur(10px)'},
	{at: 0.25, is: 'blur(10px) grayscale(0.4375) blur(10px)'},
	{at: 0.5, is: 'blur(10px) grayscale(0.375) blur(10px)'},
	{at: 0.75, is: 'blur(10px) grayscale(0.3125) blur(10px)'},
	{at: 1, is: 'blur(10px) grayscale(0.25) blur(10px)'},
	{at: 1.5, is: 'blur(10px) grayscale(0.125) blur(10px)'},
	]);

	// Check the case where composition causes a url() to be included; the animation
	// should change to discrete.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'url(#a)',
	addFrom: 'grayscale(50%) blur(30px)',
	addTo: 'grayscale(25%) blur(40px)',
	}, [
	{at: -0.5, is: 'url("#a") grayscale(0.5) blur(30px)'},
	{at: 0, is: 'url("#a") grayscale(0.5) blur(30px)'},
	{at: 0.25, is: 'url("#a") grayscale(0.5) blur(30px)'},
	{at: 0.5, is: 'url("#a") grayscale(0.25) blur(40px)'},
	{at: 0.75, is: 'url("#a") grayscale(0.25) blur(40px)'},
	{at: 1, is: 'url("#a") grayscale(0.25) blur(40px)'},
	{at: 1.5, is: 'url("#a") grayscale(0.25) blur(40px)'},
	]);

	// And check the inverse; nothing fancy here but it should be a discrete
	// animation with blur prepended.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	addFrom: 'url(#a) brightness(1)',
	addTo: 'url(#b) brightness(0)',
	}, [
	{at: -0.5, is: 'blur(10px) url(#a) brightness(1)'},
	{at: 0, is: 'blur(10px) url(#a) brightness(1)'},
	{at: 0.25, is: 'blur(10px) url(#a) brightness(1)'},
	{at: 0.5, is: 'blur(10px) url(#b) brightness(0)'},
	{at: 0.75, is: 'blur(10px) url(#b) brightness(0)'},
	{at: 1, is: 'blur(10px) url(#b) brightness(0)'},
	{at: 1.5, is: 'blur(10px) url(#b) brightness(0)'},
	]);

	// --------------- Accumulation tests. ---------------------

	// blur; simple addition.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	accumulateFrom: 'blur(40px)',
	accumulateTo: 'blur(90px)',
	}, [
	{at: -0.5, is: 'blur(25px)'},
	{at: 0, is: 'blur(50px)'},
	{at: 0.25, is: 'blur(62.5px)'},
	{at: 0.5, is: 'blur(75px)'},
	{at: 0.75, is: 'blur(87.5px)'},
	{at: 1, is: 'blur(100px)'},
	{at: 1.5, is: 'blur(125px)'},
	]);

	// brightness; 1-based addition.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'brightness(0.25)',
	accumulateFrom: 'brightness(0.5)',
	accumulateTo: 'brightness(1.5)',
	}, [
	{at: -0.5, is: 'brightness(0)'},
	{at: 0, is: 'brightness(0)'},
	{at: 0.25, is: 'brightness(0)'},
	{at: 0.5, is: 'brightness(0.25)'},
	{at: 0.75, is: 'brightness(0.5)'},
	{at: 1, is: 'brightness(0.75)'},
	{at: 1.5, is: 'brightness(1.25)'},
	]);

	// contrast; 1-based addition.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'contrast(0.25)',
	accumulateFrom: 'contrast(0.5)',
	accumulateTo: 'contrast(1.5)',
	}, [
	{at: -0.5, is: 'contrast(0)'},
	{at: 0, is: 'contrast(0)'},
	{at: 0.25, is: 'contrast(0)'},
	{at: 0.5, is: 'contrast(0.25)'},
	{at: 0.75, is: 'contrast(0.5)'},
	{at: 1, is: 'contrast(0.75)'},
	{at: 1.5, is: 'contrast(1.25)'},
	]);

	// drop-shadow; addition of lengths plus color addition
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'drop-shadow(10px 5px 0px rgb(255, 0, 0))',
	accumulateFrom: 'drop-shadow(0px 10px 10px rgb(0, 255, 0))',
	accumulateTo: 'drop-shadow(50px 30px 10px rgb(0, 0, 255))',
	}, [
	{at: -0.5, is: 'drop-shadow(-15px 5px 10px rgb(255, 255, 0))'},
	{at: 0, is: 'drop-shadow(10px 15px 10px rgb(255, 255, 0))'},
	{at: 0.25, is: 'drop-shadow(22.5px 20px 10px rgb(255, 191, 64))'},
	{at: 0.5, is: 'drop-shadow(35px 25px 10px rgb(255, 128, 128))'},
	{at: 0.75, is: 'drop-shadow(47.5px 30px 10px rgb(255, 64, 191))'},
	{at: 1, is: 'drop-shadow(60px 35px 10px rgb(255, 0, 255))'},
	{at: 1.5, is: 'drop-shadow(85px 45px 10px rgb(255, 0, 255))'},
	]);

	// grayscale; 1-based addition.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'grayscale(0.25)',
	accumulateFrom: 'grayscale(0.5)',
	accumulateTo: 'grayscale(1.5)', // clamped to 1
	}, [
	{at: -0.5, is: 'grayscale(0)'},
	{at: 0, is: 'grayscale(0)'},
	{at: 0.25, is: 'grayscale(0)'},
	{at: 0.5, is: 'grayscale(0)'},
	{at: 0.75, is: 'grayscale(0.125)'},
	{at: 1, is: 'grayscale(0.25)'},
	{at: 1.5, is: 'grayscale(0.5)'},
	]);

	// hue-rotate; simple addition
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'hue-rotate(45deg)',
	accumulateFrom: 'hue-rotate(140deg)',
	accumulateTo: 'hue-rotate(400deg)',
	}, [
	{at: -0.5, is: 'hue-rotate(55deg)'},
	{at: 0, is: 'hue-rotate(185deg)'},
	{at: 0.25, is: 'hue-rotate(250deg)'},
	{at: 0.5, is: 'hue-rotate(315deg)'},
	{at: 0.75, is: 'hue-rotate(380deg)'},
	{at: 1, is: 'hue-rotate(445deg)'},
	{at: 1.5, is: 'hue-rotate(575deg)'},
	]);

	// invert; 1-based addition.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'invert(0.25)',
	accumulateFrom: 'invert(0.5)',
	accumulateTo: 'invert(1.5)', // clamped to 1
	}, [
	{at: -0.5, is: 'invert(0)'},
	{at: 0, is: 'invert(0)'},
	{at: 0.25, is: 'invert(0)'},
	{at: 0.5, is: 'invert(0)'},
	{at: 0.75, is: 'invert(0.125)'},
	{at: 1, is: 'invert(0.25)'},
	{at: 1.5, is: 'invert(0.5)'},
	]);

	// opacity; 1-based addition
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'opacity(0.25)',
	accumulateFrom: 'opacity(0.5)',
	accumulateTo: 'opacity(1.5)', // clamped to 1
	}, [
	{at: -0.5, is: 'opacity(0)'},
	{at: 0, is: 'opacity(0)'},
	{at: 0.25, is: 'opacity(0)'},
	{at: 0.5, is: 'opacity(0)'},
	{at: 0.75, is: 'opacity(0.125)'},
	{at: 1, is: 'opacity(0.25)'},
	{at: 1.5, is: 'opacity(0.5)'},
	]);

	// saturate; 1-based addition
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'saturate(0.25)',
	accumulateFrom: 'saturate(0.5)',
	accumulateTo: 'saturate(1.5)',
	}, [
	{at: -0.5, is: 'saturate(0)'},
	{at: 0, is: 'saturate(0)'},
	{at: 0.25, is: 'saturate(0)'},
	{at: 0.5, is: 'saturate(0.25)'},
	{at: 0.75, is: 'saturate(0.5)'},
	{at: 1, is: 'saturate(0.75)'},
	{at: 1.5, is: 'saturate(1.25)'},
	]);

	// sepia; 1-based addition
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'sepia(0.25)',
	accumulateFrom: 'sepia(0.5)',
	accumulateTo: 'sepia(1.5)', // clamped to 1
	}, [
	{at: -0.5, is: 'sepia(0)'},
	{at: 0, is: 'sepia(0)'},
	{at: 0.25, is: 'sepia(0)'},
	{at: 0.5, is: 'sepia(0)'},
	{at: 0.75, is: 'sepia(0.125)'},
	{at: 1, is: 'sepia(0.25)'},
	{at: 1.5, is: 'sepia(0.5)'},
	]);

	// url; cannot be accumulated
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'url(#a)',
	accumulateFrom: 'url(#b)',
	accumulateTo: 'url(#c)',
	}, [
	{at: -0.5, is: 'url(#b)'},
	{at: 0, is: 'url(#b)'},
	{at: 0.25, is: 'url(#b)'},
	{at: 0.5, is: 'url(#c)'},
	{at: 0.75, is: 'url(#c)'},
	{at: 1, is: 'url(#c)'},
	{at: 1.5, is: 'url(#c)'},
	]);

	// Test auto-extension of the underlying list.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	accumulateFrom: 'blur(40px) saturate(1)',
	accumulateTo: 'blur(90px) saturate(0)',
	}, [
	{at: -0.5, is: 'blur(25px) saturate(1.5)'},
	{at: 0, is: 'blur(50px) saturate(1)'},
	{at: 0.25, is: 'blur(62.5px) saturate(0.75)'},
	{at: 0.5, is: 'blur(75px) saturate(0.5)'},
	{at: 0.75, is: 'blur(87.5px) saturate(0.25)'},
	{at: 1, is: 'blur(100px) saturate(0)'},
	{at: 1.5, is: 'blur(125px) saturate(0)'},
	]);

	// Test auto-extension of the composited-onto list.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px) saturate(0.75)',
	accumulateFrom: 'blur(40px)',
	accumulateTo: 'blur(90px)',
	}, [
	{at: -0.5, is: 'blur(25px) saturate(0.75)'},
	{at: 0, is: 'blur(50px) saturate(0.75)'},
	{at: 0.25, is: 'blur(62.5px) saturate(0.75)'},
	{at: 0.5, is: 'blur(75px) saturate(0.75)'},
	{at: 0.75, is: 'blur(87.5px) saturate(0.75)'},
	{at: 1, is: 'blur(100px) saturate(0.75)'},
	{at: 1.5, is: 'blur(125px) saturate(0.75)'},
	]);

	// Mismatching type for underlying; it just gets replaced.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'contrast(0.75)',
	accumulateFrom: 'blur(40px)',
	accumulateTo: 'blur(80px)',
	}, [
	{at: -0.5, is: 'blur(20px)'},
	{at: 0, is: 'blur(40px)'},
	{at: 0.25, is: 'blur(50px)'},
	{at: 0.5, is: 'blur(60px)'},
	{at: 0.75, is: 'blur(70px)'},
	{at: 1, is: 'blur(80px)'},
	{at: 1.5, is: 'blur(100px)'},
	]);

	// Underlying only type-matches one side of the interpolation; it should be
	// accumulated onto that side, but the entire animation will be discrete due to
	// the mis-matching types.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	accumulateFrom: 'blur(40px)',
	accumulateTo: 'saturate(1)',
	}, [
	{at: -0.5, is: 'blur(50px)'},
	{at: 0, is: 'blur(50px)'},
	{at: 0.25, is: 'blur(50px)'},
	{at: 0.5, is: 'saturate(1)'},
	{at: 0.75, is: 'saturate(1)'},
	{at: 1, is: 'saturate(1)'},
	{at: 1.5, is: 'saturate(1)'},
	]);

	// Test a case where only one side is accumulative and the other is replace.
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	accumulateFrom: 'blur(30px)',
	replaceTo: 'blur(100px)',
	}, [
	{at: -0.5, is: 'blur(10px)'},
	{at: 0, is: 'blur(40px)'},
	{at: 0.25, is: 'blur(55px)'},
	{at: 0.5, is: 'blur(70px)'},
	{at: 0.75, is: 'blur(85px)'},
	{at: 1, is: 'blur(100px)'},
	{at: 1.5, is: 'blur(130px)'},
	]);

	// Test a case where only one side is accumulative and the other is add.
	// This basically looks like:
	// accumulateSide = blur(Apx) neutral-blur
	// addSide = blur(10px) blur(Bpx)
	assertComposition({
	property: 'backdrop-filter',
	underlying: 'blur(10px)',
	accumulateFrom: 'blur(40px)',
	addTo: 'blur(100px)',
	}, [
	{at: -0.5, is: 'blur(70px) blur(0px)'},
	{at: 0, is: 'blur(50px) blur(0px)'},
	{at: 0.25, is: 'blur(40px) blur(25px)'},
	{at: 0.5, is: 'blur(30px) blur(50px)'},
	{at: 0.75, is: 'blur(20px) blur(75px)'},
	{at: 1, is: 'blur(10px) blur(100px)'},
	{at: 1.5, is: 'blur(0px) blur(150px)'},
	]);
	</script>
	</body>