<!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>
Codebase Browser
chromium