third_party/WebKit/LayoutTests/animations/interpolation/filter-interpolation.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <meta charset="UTF-8">
 <style>
 .parent {
   -webkit-filter: hue-rotate(30deg);
 }
 .target {
   display: inline-block;
   width: 50px;
   height: 50px;
   background-color: green;
   color: white;
   margin-right: 2px;
   -webkit-filter: hue-rotate(10deg);
 }
 .expected {
   margin-right: 20px;
 }
 .test {
   padding-bottom: 10px;
 }
 </style>
 <body>
 <svg style="display:none">
   <filter id="svgfilter">
     <feGaussianBlur stdDeviation="5"></feGaussianBlur>
   </filter>
 </svg>
 <script src="resources/interpolation-test.js"></script>
 <script>
 assertInterpolation({
   property: '-webkit-filter',
   from: neutralKeyframe,
   to: 'hue-rotate(20deg)',
 }, [
   {at: -0.5, is: 'hue-rotate(5deg)'},
   {at: 0, is: 'hue-rotate(10deg)'},
   {at: 0.3, is: 'hue-rotate(13deg)'},
   {at: 0.6, is: 'hue-rotate(16deg)'},
   {at: 1, is: 'hue-rotate(20deg)'},
   {at: 1.5, is: 'hue-rotate(25deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'initial',
   to: 'hue-rotate(20deg)',
 }, [
   {at: -0.5, is: 'hue-rotate(-10deg)'},
   {at: 0, is: 'none'},
   {at: 0.3, is: 'hue-rotate(6deg)'},
   {at: 0.6, is: 'hue-rotate(12deg)'},
   {at: 1, is: 'hue-rotate(20deg)'},
   {at: 1.5, is: 'hue-rotate(30deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'inherit',
   to: 'hue-rotate(20deg)',
 }, [
   {at: -0.5, is: 'hue-rotate(35deg)'},
   {at: 0, is: 'hue-rotate(30deg)'},
   {at: 0.3, is: 'hue-rotate(27deg)'},
   {at: 0.6, is: 'hue-rotate(24deg)'},
   {at: 1, is: 'hue-rotate(20deg)'},
   {at: 1.5, is: 'hue-rotate(15deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'unset',
   to: 'hue-rotate(20deg)',
 }, [
   {at: -0.5, is: 'hue-rotate(-10deg)'},
   {at: 0, is: 'none'},
   {at: 0.3, is: 'hue-rotate(6deg)'},
   {at: 0.6, is: 'hue-rotate(12deg)'},
   {at: 1, is: 'hue-rotate(20deg)'},
   {at: 1.5, is: 'hue-rotate(30deg)'},
 ]);

 // Matching lists:
 assertInterpolation({
   property: '-webkit-filter',
   from: 'hue-rotate(0deg) blur(6px)',
   to: 'hue-rotate(180deg) blur(10px)'
 }, [
   {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
   {at: 0, is: 'hue-rotate(0deg) blur(6px)'},
   {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
   {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
   {at: 1, is: 'hue-rotate(180deg) blur(10px)'},
   {at: 1.5, is: 'hue-rotate(270deg) blur(12px)'}
 ]);

 // Matching lists with differing units:
 assertInterpolation({
   property: '-webkit-filter',
   from: 'hue-rotate(80deg) blur(6mm)',
   to: 'hue-rotate(100grad) blur(1cm)'
 }, [
   {at: -0.5, is: 'hue-rotate(75deg) blur(4mm)'},
   {at: 0, is: 'hue-rotate(80deg) blur(6mm)'},
   {at: 0.25, is: 'hue-rotate(82.5deg) blur(7mm)'},
   {at: 0.5, is: 'hue-rotate(85deg) blur(8mm)'},
   {at: 1, is: 'hue-rotate(90deg) blur(10mm)'},
   {at: 1.5, is: 'hue-rotate(95deg) blur(12mm)'}
 ]);

 // Mismatched lists:
 assertNoInterpolation({
   property: '-webkit-filter',
   from: 'grayscale(0) blur(0px)',
   to: 'blur(10px)'
 });

 // Partially matching lists:
 assertInterpolation({
   property: '-webkit-filter',
   from: 'none',
   to: 'opacity(0.5) hue-rotate(180deg)',
 }, [
   {at: -0.5, is: 'opacity(1) hue-rotate(-90deg)'},
   {at: 0, is: 'none'},
   {at: 0.25, is: 'opacity(0.875) hue-rotate(45deg)'},
   {at: 0.5, is: 'opacity(0.75) hue-rotate(90deg)'},
   {at: 1, is: 'opacity(0.5) hue-rotate(180deg)'},
   {at: 1.5, is: 'opacity(0.25) hue-rotate(270deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'blur(6px)',
   to: 'blur(10px) hue-rotate(180deg)'
 }, [
   {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'},
   {at: 0, is: 'blur(6px)'},
   {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'},
   {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'},
   {at: 1, is: 'blur(10px) hue-rotate(180deg)'},
   {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none',
   to: 'hue-rotate(180deg)'
 }, [
   {at: -0.5, is: 'hue-rotate(-90deg)'},
   {at: 0, is: 'none'},
   {at: 0.25, is: 'hue-rotate(45deg)'},
   {at: 0.5, is: 'hue-rotate(90deg)'},
   {at: 1, is: 'hue-rotate(180deg)'},
   {at: 1.5, is: 'hue-rotate(270deg)'},
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'hue-rotate(180deg)',
   to: 'none'
 }, [
   {at: -0.5, is: 'hue-rotate(270deg)'},
   {at: 0, is: 'hue-rotate(180deg)'},
   {at: 0.25, is: 'hue-rotate(135deg)'},
   {at: 0.5, is: 'hue-rotate(90deg)'},
   {at: 1, is: 'none'},
   {at: 1.5, is: 'hue-rotate(-90deg)'},
 ]);

 // Filter functions (tests lacuna and clamping):
 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is 0px
   to: 'blur(10px)'
 }, [
   {at: -1, is: 'blur(0px)'}, // Negative values are not allowed.
   {at: 0, is: 'none'},
   {at: 0.5, is: 'blur(5px)'},
   {at: 1, is: 'blur(10px)'},
   {at: 1.5, is: 'blur(15px)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'brightness(0)',
   to: 'none' // lacuna is 1
 }, [
   {at: -1, is: 'brightness(0)'}, // Negative values are not allowed.
   {at: 0, is: 'brightness(0)'},
   {at: 0.5, is: 'brightness(0.5)'},
   {at: 1, is: 'none'},
   {at: 1.5, is: 'brightness(1.5)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'contrast(0)',
   to: 'none' // lacuna is 1
 }, [
   {at: -1, is: 'contrast(0)'}, // Negative values are not allowed.
   {at: 0, is: 'contrast(0)'},
   {at: 0.5, is: 'contrast(0.5)'},
   {at: 1, is: 'none'},
   {at: 1.5, is: 'contrast(1.5)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
   to: 'drop-shadow(20px 10px green)'
 }, [
   {at: -1, is: 'drop-shadow(-20px -10px transparent)'},
   {at: 0, is: 'none'},
   {at: 0.5, is: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
   {at: 1, is: 'drop-shadow(20px 10px green)'},
   {at: 1.5, is: 'drop-shadow(30px 15px #00C000)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'drop-shadow(0px 0px 0px currentcolor)',
   to: 'drop-shadow(20px 10px green)'
 }, [
   {at: -1, is: 'drop-shadow(-20px -10px white)'},
   {at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'},
   {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
   {at: 1, is: 'drop-shadow(20px 10px green)'},
   {at: 1.5, is: 'drop-shadow(30px 15px #004100)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is 0
   to: 'grayscale(1)'
 }, [
   {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed.
   {at: 0, is: 'none'},
   {at: 0.5, is: 'grayscale(0.5)'},
   {at: 1, is: 'grayscale(1)'},
   {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1.
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is 0deg
   to: 'hue-rotate(360deg)'
 }, [
   {at: -1, is: 'hue-rotate(-360deg)'},
   {at: 0, is: 'none'},
   {at: 0.5, is: 'hue-rotate(180deg)'},
   {at: 1, is: 'hue-rotate(360deg)'},
   {at: 1.5, is: 'hue-rotate(540deg)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is 0
   to: 'invert(1)'
 }, [
   {at: -1, is: 'invert(0)'}, // Negative values are not allowed.
   {at: 0, is: 'none'},
   {at: 0.5, is: 'invert(0.5)'},
   {at: 1, is: 'invert(1)'},
   {at: 1.5, is: 'invert(1)'} // Should clamp values to 1.
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'opacity(0)',
   to: 'none' // lacuna is 1
 }, [
   {at: -1, is: 'opacity(0)'}, // Negative values are not allowed.
   {at: 0, is: 'opacity(0)'},
   {at: 0.5, is: 'opacity(0.5)'},
   {at: 1, is: 'none'},
   {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1.
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'saturate(0)',
   to: 'none' // lacuna is 1
 }, [
   {at: -1, is: 'saturate(0)'}, // Negative values are not allowed.
   {at: 0, is: 'saturate(0)'},
   {at: 0.5, is: 'saturate(0.5)'},
   {at: 1, is: 'none'},
   {at: 1.5, is: 'saturate(1.5)'}
 ]);

 assertInterpolation({
   property: '-webkit-filter',
   from: 'none', // lacuna is 0
   to: 'sepia(1)'
 }, [
   {at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
   {at: 0, is: 'none'},
   {at: 0.5, is: 'sepia(0.5)'},
   {at: 1, is: 'sepia(1)'},
   {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
 ]);

 assertNoInterpolation({
   property: '-webkit-filter',
   from: 'url("#svgfilter")',
   to: 'none', // lacuna is not defined
 });

 assertNoInterpolation({
   property: '-webkit-filter',
   from: 'url("#svgfilter")',
   to: 'blur(5px)',
 });

 assertInterpolation({
   property: '-webkit-filter',
   from: 'initial', // lacuna is 0
   to: 'sepia(1)'
 }, [
   {at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
   {at: 0, is: 'none'}, // Equivalent to sepia(0)
   {at: 0.5, is: 'sepia(0.5)'},
   {at: 1, is: 'sepia(1)'},
   {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
 ]);
 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="UTF-8">
	<style>
	.parent {
	-webkit-filter: hue-rotate(30deg);
	}
	.target {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: green;
	color: white;
	margin-right: 2px;
	-webkit-filter: hue-rotate(10deg);
	}
	.expected {
	margin-right: 20px;
	}
	.test {
	padding-bottom: 10px;
	}
	</style>
	<body>
	<svg style="display:none">
	<filter id="svgfilter">
	<feGaussianBlur stdDeviation="5"></feGaussianBlur>
	</filter>
	</svg>
	<script src="resources/interpolation-test.js"></script>
	<script>
	assertInterpolation({
	property: '-webkit-filter',
	from: neutralKeyframe,
	to: 'hue-rotate(20deg)',
	}, [
	{at: -0.5, is: 'hue-rotate(5deg)'},
	{at: 0, is: 'hue-rotate(10deg)'},
	{at: 0.3, is: 'hue-rotate(13deg)'},
	{at: 0.6, is: 'hue-rotate(16deg)'},
	{at: 1, is: 'hue-rotate(20deg)'},
	{at: 1.5, is: 'hue-rotate(25deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'initial',
	to: 'hue-rotate(20deg)',
	}, [
	{at: -0.5, is: 'hue-rotate(-10deg)'},
	{at: 0, is: 'none'},
	{at: 0.3, is: 'hue-rotate(6deg)'},
	{at: 0.6, is: 'hue-rotate(12deg)'},
	{at: 1, is: 'hue-rotate(20deg)'},
	{at: 1.5, is: 'hue-rotate(30deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'inherit',
	to: 'hue-rotate(20deg)',
	}, [
	{at: -0.5, is: 'hue-rotate(35deg)'},
	{at: 0, is: 'hue-rotate(30deg)'},
	{at: 0.3, is: 'hue-rotate(27deg)'},
	{at: 0.6, is: 'hue-rotate(24deg)'},
	{at: 1, is: 'hue-rotate(20deg)'},
	{at: 1.5, is: 'hue-rotate(15deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'unset',
	to: 'hue-rotate(20deg)',
	}, [
	{at: -0.5, is: 'hue-rotate(-10deg)'},
	{at: 0, is: 'none'},
	{at: 0.3, is: 'hue-rotate(6deg)'},
	{at: 0.6, is: 'hue-rotate(12deg)'},
	{at: 1, is: 'hue-rotate(20deg)'},
	{at: 1.5, is: 'hue-rotate(30deg)'},
	]);

	// Matching lists:
	assertInterpolation({
	property: '-webkit-filter',
	from: 'hue-rotate(0deg) blur(6px)',
	to: 'hue-rotate(180deg) blur(10px)'
	}, [
	{at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
	{at: 0, is: 'hue-rotate(0deg) blur(6px)'},
	{at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
	{at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
	{at: 1, is: 'hue-rotate(180deg) blur(10px)'},
	{at: 1.5, is: 'hue-rotate(270deg) blur(12px)'}
	]);

	// Matching lists with differing units:
	assertInterpolation({
	property: '-webkit-filter',
	from: 'hue-rotate(80deg) blur(6mm)',
	to: 'hue-rotate(100grad) blur(1cm)'
	}, [
	{at: -0.5, is: 'hue-rotate(75deg) blur(4mm)'},
	{at: 0, is: 'hue-rotate(80deg) blur(6mm)'},
	{at: 0.25, is: 'hue-rotate(82.5deg) blur(7mm)'},
	{at: 0.5, is: 'hue-rotate(85deg) blur(8mm)'},
	{at: 1, is: 'hue-rotate(90deg) blur(10mm)'},
	{at: 1.5, is: 'hue-rotate(95deg) blur(12mm)'}
	]);

	// Mismatched lists:
	assertNoInterpolation({
	property: '-webkit-filter',
	from: 'grayscale(0) blur(0px)',
	to: 'blur(10px)'
	});

	// Partially matching lists:
	assertInterpolation({
	property: '-webkit-filter',
	from: 'none',
	to: 'opacity(0.5) hue-rotate(180deg)',
	}, [
	{at: -0.5, is: 'opacity(1) hue-rotate(-90deg)'},
	{at: 0, is: 'none'},
	{at: 0.25, is: 'opacity(0.875) hue-rotate(45deg)'},
	{at: 0.5, is: 'opacity(0.75) hue-rotate(90deg)'},
	{at: 1, is: 'opacity(0.5) hue-rotate(180deg)'},
	{at: 1.5, is: 'opacity(0.25) hue-rotate(270deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'blur(6px)',
	to: 'blur(10px) hue-rotate(180deg)'
	}, [
	{at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'},
	{at: 0, is: 'blur(6px)'},
	{at: 0.25, is: 'blur(7px) hue-rotate(45deg)'},
	{at: 0.5, is: 'blur(8px) hue-rotate(90deg)'},
	{at: 1, is: 'blur(10px) hue-rotate(180deg)'},
	{at: 1.5, is: 'blur(12px) hue-rotate(270deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none',
	to: 'hue-rotate(180deg)'
	}, [
	{at: -0.5, is: 'hue-rotate(-90deg)'},
	{at: 0, is: 'none'},
	{at: 0.25, is: 'hue-rotate(45deg)'},
	{at: 0.5, is: 'hue-rotate(90deg)'},
	{at: 1, is: 'hue-rotate(180deg)'},
	{at: 1.5, is: 'hue-rotate(270deg)'},
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'hue-rotate(180deg)',
	to: 'none'
	}, [
	{at: -0.5, is: 'hue-rotate(270deg)'},
	{at: 0, is: 'hue-rotate(180deg)'},
	{at: 0.25, is: 'hue-rotate(135deg)'},
	{at: 0.5, is: 'hue-rotate(90deg)'},
	{at: 1, is: 'none'},
	{at: 1.5, is: 'hue-rotate(-90deg)'},
	]);

	// Filter functions (tests lacuna and clamping):
	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is 0px
	to: 'blur(10px)'
	}, [
	{at: -1, is: 'blur(0px)'}, // Negative values are not allowed.
	{at: 0, is: 'none'},
	{at: 0.5, is: 'blur(5px)'},
	{at: 1, is: 'blur(10px)'},
	{at: 1.5, is: 'blur(15px)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'brightness(0)',
	to: 'none' // lacuna is 1
	}, [
	{at: -1, is: 'brightness(0)'}, // Negative values are not allowed.
	{at: 0, is: 'brightness(0)'},
	{at: 0.5, is: 'brightness(0.5)'},
	{at: 1, is: 'none'},
	{at: 1.5, is: 'brightness(1.5)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'contrast(0)',
	to: 'none' // lacuna is 1
	}, [
	{at: -1, is: 'contrast(0)'}, // Negative values are not allowed.
	{at: 0, is: 'contrast(0)'},
	{at: 0.5, is: 'contrast(0.5)'},
	{at: 1, is: 'none'},
	{at: 1.5, is: 'contrast(1.5)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
	to: 'drop-shadow(20px 10px green)'
	}, [
	{at: -1, is: 'drop-shadow(-20px -10px transparent)'},
	{at: 0, is: 'none'},
	{at: 0.5, is: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
	{at: 1, is: 'drop-shadow(20px 10px green)'},
	{at: 1.5, is: 'drop-shadow(30px 15px #00C000)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'drop-shadow(0px 0px 0px currentcolor)',
	to: 'drop-shadow(20px 10px green)'
	}, [
	{at: -1, is: 'drop-shadow(-20px -10px white)'},
	{at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'},
	{at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
	{at: 1, is: 'drop-shadow(20px 10px green)'},
	{at: 1.5, is: 'drop-shadow(30px 15px #004100)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is 0
	to: 'grayscale(1)'
	}, [
	{at: -1, is: 'grayscale(0)'}, // Negative values are not allowed.
	{at: 0, is: 'none'},
	{at: 0.5, is: 'grayscale(0.5)'},
	{at: 1, is: 'grayscale(1)'},
	{at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1.
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is 0deg
	to: 'hue-rotate(360deg)'
	}, [
	{at: -1, is: 'hue-rotate(-360deg)'},
	{at: 0, is: 'none'},
	{at: 0.5, is: 'hue-rotate(180deg)'},
	{at: 1, is: 'hue-rotate(360deg)'},
	{at: 1.5, is: 'hue-rotate(540deg)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is 0
	to: 'invert(1)'
	}, [
	{at: -1, is: 'invert(0)'}, // Negative values are not allowed.
	{at: 0, is: 'none'},
	{at: 0.5, is: 'invert(0.5)'},
	{at: 1, is: 'invert(1)'},
	{at: 1.5, is: 'invert(1)'} // Should clamp values to 1.
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'opacity(0)',
	to: 'none' // lacuna is 1
	}, [
	{at: -1, is: 'opacity(0)'}, // Negative values are not allowed.
	{at: 0, is: 'opacity(0)'},
	{at: 0.5, is: 'opacity(0.5)'},
	{at: 1, is: 'none'},
	{at: 1.5, is: 'opacity(1)'} // Should clamp values to 1.
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'saturate(0)',
	to: 'none' // lacuna is 1
	}, [
	{at: -1, is: 'saturate(0)'}, // Negative values are not allowed.
	{at: 0, is: 'saturate(0)'},
	{at: 0.5, is: 'saturate(0.5)'},
	{at: 1, is: 'none'},
	{at: 1.5, is: 'saturate(1.5)'}
	]);

	assertInterpolation({
	property: '-webkit-filter',
	from: 'none', // lacuna is 0
	to: 'sepia(1)'
	}, [
	{at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
	{at: 0, is: 'none'},
	{at: 0.5, is: 'sepia(0.5)'},
	{at: 1, is: 'sepia(1)'},
	{at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
	]);

	assertNoInterpolation({
	property: '-webkit-filter',
	from: 'url("#svgfilter")',
	to: 'none', // lacuna is not defined
	});

	assertNoInterpolation({
	property: '-webkit-filter',
	from: 'url("#svgfilter")',
	to: 'blur(5px)',
	});

	assertInterpolation({
	property: '-webkit-filter',
	from: 'initial', // lacuna is 0
	to: 'sepia(1)'
	}, [
	{at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
	{at: 0, is: 'none'}, // Equivalent to sepia(0)
	{at: 0.5, is: 'sepia(0.5)'},
	{at: 1, is: 'sepia(1)'},
	{at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
	]);
	</script>
	</body>