mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 05:11:16 +00:00
Bug 1555165 - Part 2: Update backdrop-filter WPT tests and expectations r=boris
Differential Revision: https://phabricator.services.mozilla.com/D36062 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Connor Brewster
parent
691d3c2a59
commit
cd692640d2
@ -1,4 +1,4 @@
|
||||
[backdrop-filter.html]
|
||||
prefs: [layout.css.backdrop-filter.enabled:true]
|
||||
['backdrop-filter' property]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
1
testing/web-platform/meta/css/filter-effects/__dir__.ini
Normal file
1
testing/web-platform/meta/css/filter-effects/__dir__.ini
Normal file
@ -0,0 +1 @@
|
||||
prefs: [layout.css.backdrop-filter.enabled:true]
|
||||
@ -1,88 +0,0 @@
|
||||
[backdrop-filter-computed.html]
|
||||
[Filter Effects Module Level 2: getComputedValue().backdropFilter]
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)' computes to 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'contrast()' computes to 'contrast(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'grayscale(50%)' computes to 'grayscale(0.5)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'opacity(100%)' computes to 'opacity(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'saturate(0)' computes to 'saturate(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'invert(0)' computes to 'invert(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'invert()' computes to 'invert(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'drop-shadow(1px 2px)' computes to 'drop-shadow(rgb(0, 255, 0) 1px 2px 0px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'hue-rotate()' computes to 'hue-rotate(0deg)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'brightness(0)' computes to 'brightness(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'opacity()' computes to 'opacity(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'brightness(300%)' computes to 'brightness(3)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'blur()' computes to 'blur(0px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'sepia()' computes to 'sepia(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'grayscale()' computes to 'grayscale(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'sepia(100%)' computes to 'sepia(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'sepia(0)' computes to 'sepia(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'invert(100%)' computes to 'invert(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'saturate(300%)' computes to 'saturate(3)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'hue-rotate(90deg)' computes to 'hue-rotate(90deg)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'contrast(0)' computes to 'contrast(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'none' computes to 'none']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'contrast(300%)' computes to 'contrast(3)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'drop-shadow(rgb(4, 5, 6) 1px 2px 0px)' computes to 'drop-shadow(rgb(4, 5, 6) 1px 2px 0px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'opacity(0)' computes to 'opacity(0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'saturate()' computes to 'saturate(1)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'blur(100px)' computes to 'blur(100px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property backdrop-filter value 'brightness()' computes to 'brightness(1)']
|
||||
expected: FAIL
|
||||
|
||||
@ -1,112 +0,0 @@
|
||||
[backdrop-filter-parsing-valid.html]
|
||||
[e.style['backdrop-filter'\] = "sepia()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "hue-rotate(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "brightness(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "grayscale()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "saturate()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "invert(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "opacity(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "sepia(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "url(\\"picture.svg#f\\")" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "opacity()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "opacity(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "none" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(0 0 0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "blur()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "contrast(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "blur(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "invert(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "brightness(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(1px 2px 3px)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "hue-rotate(90deg)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(1px 2px rgb(4, 5, 6))" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "sepia(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "grayscale(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(rgb(4, 5, 6) 1px 2px)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "blur(10px) url(\\"picture.svg#f\\") contrast(20) brightness(30)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "drop-shadow(1px 2px)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "url(\\"https://www.example.com/picture.svg#f\\")" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "saturate(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "grayscale(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "saturate(300%)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "invert()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "brightness()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "contrast()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "hue-rotate()" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "contrast(0)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['backdrop-filter'\] = "blur(100px)" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="Matching lists interpolate.">
|
||||
<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: 'hue-rotate(0deg) blur(6px)',
|
||||
to: 'hue-rotate(180deg) blur(10px)'
|
||||
}, [
|
||||
{at: -0.5, expect: 'hue-rotate(-90deg) blur(4px)'},
|
||||
{at: 0, expect: 'hue-rotate(0deg) blur(6px)'},
|
||||
{at: 0.25, expect: 'hue-rotate(45deg) blur(7px)'},
|
||||
{at: 0.5, expect: 'hue-rotate(90deg) blur(8px)'},
|
||||
{at: 1, expect: 'hue-rotate(180deg) blur(10px)'},
|
||||
{at: 1.5, expect: 'hue-rotate(270deg) blur(12px)'}
|
||||
]);
|
||||
|
||||
// Matching lists with differing units:
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'hue-rotate(80deg) blur(6mm)',
|
||||
to: 'hue-rotate(100grad) blur(1cm)'
|
||||
}, [
|
||||
{at: -0.5, expect: 'hue-rotate(75deg) blur(4mm)'},
|
||||
{at: 0, expect: 'hue-rotate(80deg) blur(6mm)'},
|
||||
{at: 0.25, expect: 'hue-rotate(82.5deg) blur(7mm)'},
|
||||
{at: 0.5, expect: 'hue-rotate(85deg) blur(8mm)'},
|
||||
{at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
|
||||
{at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="Partially matching lists interpolate.">
|
||||
<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: 'none',
|
||||
to: 'opacity(0.5) hue-rotate(180deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'},
|
||||
{at: 0.25, expect: 'opacity(0.875) hue-rotate(45deg)'},
|
||||
{at: 0.5, expect: 'opacity(0.75) hue-rotate(90deg)'},
|
||||
{at: 1, expect: 'opacity(0.5) hue-rotate(180deg)'},
|
||||
{at: 1.5, expect: 'opacity(0.25) hue-rotate(270deg)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'blur(6px)',
|
||||
to: 'blur(10px) hue-rotate(180deg)'
|
||||
}, [
|
||||
{at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'},
|
||||
{at: 0.25, expect: 'blur(7px) hue-rotate(45deg)'},
|
||||
{at: 0.5, expect: 'blur(8px) hue-rotate(90deg)'},
|
||||
{at: 1, expect: 'blur(10px) hue-rotate(180deg)'},
|
||||
{at: 1.5, expect: 'blur(12px) hue-rotate(270deg)'},
|
||||
]);
|
||||
|
||||
// Mismatched lists:
|
||||
test_no_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'grayscale(0) blur(0px)',
|
||||
to: 'blur(10px)'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<meta name="assert" content="lacuna 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: 'none', // lacuna is 0px
|
||||
to: 'blur(10px)'
|
||||
}, [
|
||||
{at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
|
||||
{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: 'none' // lacuna 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.5, expect: 'brightness(1.5)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'contrast(0)',
|
||||
to: 'none' // lacuna 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.5, expect: 'contrast(1.5)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
|
||||
to: 'drop-shadow(20px 10px green)'
|
||||
}, [
|
||||
{at: -1, expect: 'drop-shadow(-20px -10px transparent)'},
|
||||
{at: 0.5, expect: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
|
||||
{at: 1, expect: 'drop-shadow(20px 10px green)'},
|
||||
{at: 1.5, expect: 'drop-shadow(30px 15px #00C000)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'none', // lacuna is 0
|
||||
to: 'grayscale(1)'
|
||||
}, [
|
||||
{at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
|
||||
{at: 0.5, expect: 'grayscale(0.5)'},
|
||||
{at: 1, expect: 'grayscale(1)'},
|
||||
{at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'none', // lacuna is 0deg
|
||||
to: 'hue-rotate(360deg)'
|
||||
}, [
|
||||
{at: -1, expect: 'hue-rotate(-360deg)'},
|
||||
{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: 'none', // lacuna is 0
|
||||
to: 'invert(1)'
|
||||
}, [
|
||||
{at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
|
||||
{at: 0.5, expect: 'invert(0.5)'},
|
||||
{at: 1, expect: 'invert(1)'},
|
||||
{at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'opacity(0)',
|
||||
to: 'none' // lacuna 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.5, expect: 'opacity(1)'} // Should clamp values to 1.
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'saturate(0)',
|
||||
to: 'none' // lacuna 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.5, expect: 'saturate(1.5)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'none', // lacuna is 0
|
||||
to: 'sepia(1)'
|
||||
}, [
|
||||
{at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
|
||||
{at: 0.5, expect: 'sepia(0.5)'},
|
||||
{at: 1, expect: 'sepia(1)'},
|
||||
{at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'backdrop-filter',
|
||||
from: 'url("#svgfilter")',
|
||||
to: 'none', // lacuna is not defined
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<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>
|
||||
@ -16,15 +16,15 @@ test_valid_value("backdrop-filter", "none");
|
||||
|
||||
test_valid_value("backdrop-filter", "blur(100px)");
|
||||
test_valid_value("backdrop-filter", "blur(0)", "blur(0px)");
|
||||
test_valid_value("backdrop-filter", "blur()");
|
||||
test_valid_value("backdrop-filter", "blur()", ["blur()", "blur(0px)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "brightness(0)");
|
||||
test_valid_value("backdrop-filter", "brightness(300%)");
|
||||
test_valid_value("backdrop-filter", "brightness()");
|
||||
test_valid_value("backdrop-filter", "brightness()", ["brightness()", "brightness(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "contrast(0)");
|
||||
test_valid_value("backdrop-filter", "contrast(300%)");
|
||||
test_valid_value("backdrop-filter", "contrast()");
|
||||
test_valid_value("backdrop-filter", "contrast()", ["contrast()", "contrast(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "drop-shadow(1px 2px)");
|
||||
test_valid_value("backdrop-filter", "drop-shadow(1px 2px 3px)");
|
||||
@ -35,27 +35,27 @@ test_valid_value("backdrop-filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px
|
||||
|
||||
test_valid_value("backdrop-filter", "grayscale(0)");
|
||||
test_valid_value("backdrop-filter", "grayscale(300%)", "grayscale(100%)");
|
||||
test_valid_value("backdrop-filter", "grayscale()");
|
||||
test_valid_value("backdrop-filter", "grayscale()", ["grayscale()", "grayscale(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "hue-rotate(90deg)");
|
||||
test_valid_value("backdrop-filter", "hue-rotate(0)", "hue-rotate(0deg)");
|
||||
test_valid_value("backdrop-filter", "hue-rotate()");
|
||||
test_valid_value("backdrop-filter", "hue-rotate()", ["hue-rotate()", "hue-rotate(0deg)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "invert(0)");
|
||||
test_valid_value("backdrop-filter", "invert(300%)", "invert(100%)");
|
||||
test_valid_value("backdrop-filter", "invert()");
|
||||
test_valid_value("backdrop-filter", "invert()", ["invert()", "invert(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "opacity(0)");
|
||||
test_valid_value("backdrop-filter", "opacity(300%)", "opacity(100%)");
|
||||
test_valid_value("backdrop-filter", "opacity()");
|
||||
test_valid_value("backdrop-filter", "opacity()", ["opacity()", "opacity(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "saturate(0)");
|
||||
test_valid_value("backdrop-filter", "saturate(300%)");
|
||||
test_valid_value("backdrop-filter", "saturate()");
|
||||
test_valid_value("backdrop-filter", "saturate()", ["saturate()", "saturate(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", "sepia(0)");
|
||||
test_valid_value("backdrop-filter", "sepia(300%)", "sepia(100%)");
|
||||
test_valid_value("backdrop-filter", "sepia()");
|
||||
test_valid_value("backdrop-filter", "sepia()", ["sepia()", "sepia(1)"]);
|
||||
|
||||
test_valid_value("backdrop-filter", 'url("picture.svg#f")');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user