<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
  width: 50px;
  height: 50px;
  background-color: lightskyblue;
  color: white;
}
.container {
  border: solid black 5px;
  background: white;
  display: inline-block;
}
.container:nth-child(2n) {
  border-color: green;
}
.test {
  padding-bottom: 10px;
}
</style>
<body>
<svg style="display:none"><filter id="svgfilter"><feGaussianBlur stdDeviation="5"></feGaussianBlur></filter></svg>
<template id="target-template">
<div class="container"><div class="target"></div></div>
</template>
<script src="../testharness/testharness.js"></script>
<script src="../testharness/testharnessreport.js"></script>
<script src="resources/interpolation-test.js"></script>
<script>
// 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)'}
]);

// Mismatched lists:
assertInterpolation({
  property: '-webkit-filter',
  from: 'grayscale(0) blur(0px)',
  to: 'blur(10px)'
}, [
  {at: -0.5, is: 'grayscale(0) blur(0px)'},
  {at: 0, is: 'grayscale(0) blur(0px)'},
  {at: 0.25, is: 'grayscale(0) blur(0px)'},
  {at: 0.50, is: 'blur(10px)'},
  {at: 1, is: 'blur(10px)'},
  {at: 1.5, is: 'blur(10px)'},
]);

// Partially matching lists:
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 currentcolor)
  to: 'drop-shadow(20px 10px green)'
}, [
  {at: -1, is: 'drop-shadow(-20px -10px white)'},
  {at: 0, is: 'none'},
  {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 #004000)'}
]);

assertInterpolation({
  property: '-webkit-filter',
  from: 'drop-shadow(0px 0px 0px currentcolor)', // lacuna is 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 #004000)'}
]);

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.
]);

assertInterpolation({
  property: '-webkit-filter',
  from: 'url(#svgfilter)',
  to: 'none', // lacuna is not defined
}, [
  {at: -1, is: 'url(#svgfilter)'},
  {at: 0, is: 'url(#svgfilter)'},
  {at: 0.5, is: 'none'},
  {at: 1, is: 'none'},
  {at: 1.5, is: 'none'}
]);

assertInterpolation({
  property: '-webkit-filter',
  from: 'url(#svgfilter)',
  to: 'blur(5px)',
}, [
  {at: -1, is: 'url(#svgfilter)'},
  {at: 0, is: 'url(#svgfilter)'},
  {at: 0.5, is: 'blur(5px)'},
  {at: 1, is: 'blur(5px)'},
  {at: 1.5, is: 'blur(5px)'}
]);
</script>
</body>