Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/filter-effects/animation/backdrop-filter-interpolation-004.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>backdrop-filter interpolation</title>
<meta name="assert" content="Default value when omitted matches spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<script>
'use strict';
test_interpolation({
property: 'backdrop-filter',
from: 'blur()', // Default value when omitted is 0px.
to: 'blur(10px)'
}, [
{at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
{at: 0, expect: 'blur()'},
{at: 0.5, expect: 'blur(5px)'},
{at: 1, expect: 'blur(10px)'},
{at: 1.5, expect: 'blur(15px)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'brightness(0)',
to: 'brightness()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
{at: 0, expect: 'brightness(0)'},
{at: 0.5, expect: 'brightness(0.5)'},
{at: 1, expect: 'brightness()'},
{at: 1.5, expect: 'brightness(1.5)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'contrast(0)',
to: 'contrast()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
{at: 0, expect: 'contrast(0)'},
{at: 0.5, expect: 'contrast(0.5)'},
{at: 1, expect: 'contrast()'},
{at: 1.5, expect: 'contrast(1.5)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'drop-shadow(0px 0px)', // The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
to: 'drop-shadow(20px 10px 30px green)'
}, [
{at: -1, expect: 'drop-shadow(-20px -10px blue)'},
{at: 0, expect: 'drop-shadow(0px 0px blue)'},
{at: 0.5, expect: 'drop-shadow(10px 5px 15px rgb(0, 64, 128))'},
{at: 1, expect: 'drop-shadow(20px 10px 30px green)'},
{at: 1.5, expect: 'drop-shadow(30px 15px 45px rgb(0, 192, 0))'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'grayscale(0)',
to: 'grayscale()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
{at: 0, expect: 'grayscale(0)'},
{at: 0.5, expect: 'grayscale(0.5)'},
{at: 1, expect: 'grayscale()'},
{at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
]);
test_interpolation({
property: 'backdrop-filter',
from: 'hue-rotate()', // Default value when omitted is 0deg.
to: 'hue-rotate(360deg)'
}, [
{at: -1, expect: 'hue-rotate(-360deg)'},
{at: 0, expect: 'hue-rotate()'},
{at: 0.5, expect: 'hue-rotate(180deg)'},
{at: 1, expect: 'hue-rotate(360deg)'},
{at: 1.5, expect: 'hue-rotate(540deg)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'invert(0)',
to: 'invert()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
{at: 0, expect: 'invert(0)'},
{at: 0.5, expect: 'invert(0.5)'},
{at: 1, expect: 'invert()'},
{at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
]);
test_interpolation({
property: 'backdrop-filter',
from: 'opacity(0)',
to: 'opacity()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
{at: 0, expect: 'opacity(0)'},
{at: 0.5, expect: 'opacity(0.5)'},
{at: 1, expect: 'opacity()'},
{at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
]);
test_interpolation({
property: 'backdrop-filter',
from: 'saturate(0)',
to: 'saturate()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
{at: 0, expect: 'saturate(0)'},
{at: 0.5, expect: 'saturate(0.5)'},
{at: 1, expect: 'saturate()'},
{at: 1.5, expect: 'saturate(1.5)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: 'sepia(0)',
to: 'sepia()' // Default value when omitted is 1.
}, [
{at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
{at: 0, expect: 'sepia(0)'},
{at: 0.5, expect: 'sepia(0.5)'},
{at: 1, expect: 'sepia()'},
{at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
]);
</script>
</body>
</html>