diff options
Diffstat (limited to 'testing/web-platform/tests/css/filter-effects/animation')
9 files changed, 1069 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html new file mode 100644 index 0000000000..d539a36c5a --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html @@ -0,0 +1,172 @@ +<!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> + .parent { + backdrop-filter: hue-rotate(30deg); + } + .target { + display: inline-block; + width: 50px; + height: 50px; + background-color: green; + color: white; + margin-right: 2px; + backdrop-filter: hue-rotate(10deg); + } + .expected { + margin-right: 20px; + } + .test { + padding-bottom: 10px; + } + </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)'} + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: neutralKeyframe, + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(5deg)'}, + {at: 0, expect: 'hue-rotate(10deg)'}, + {at: 0.3, expect: 'hue-rotate(13deg)'}, + {at: 0.6, expect: 'hue-rotate(16deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(25deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'initial', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(-10deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.3, expect: 'hue-rotate(6deg)'}, + {at: 0.6, expect: 'hue-rotate(12deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(30deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'inherit', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(35deg)'}, + {at: 0, expect: 'hue-rotate(30deg)'}, + {at: 0.3, expect: 'hue-rotate(27deg)'}, + {at: 0.6, expect: 'hue-rotate(24deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(15deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'unset', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(-10deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.3, expect: 'hue-rotate(6deg)'}, + {at: 0.6, expect: 'hue-rotate(12deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(30deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'none', + to: 'hue-rotate(180deg)' + }, [ + {at: -0.5, expect: 'hue-rotate(-90deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.25, expect: 'hue-rotate(45deg)'}, + {at: 0.5, expect: 'hue-rotate(90deg)'}, + {at: 1, expect: 'hue-rotate(180deg)'}, + {at: 1.5, expect: 'hue-rotate(270deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'hue-rotate(180deg)', + to: 'none' + }, [ + {at: -0.5, expect: 'hue-rotate(270deg)'}, + {at: 0, expect: 'hue-rotate(180deg)'}, + {at: 0.25, expect: 'hue-rotate(135deg)'}, + {at: 0.5, expect: 'hue-rotate(90deg)'}, + {at: 1, expect: 'hue-rotate(0deg)'}, + {at: 1.5, expect: 'hue-rotate(-90deg)'}, + ]); + + test_interpolation({ + property: 'backdrop-filter', + from: 'drop-shadow(0px 0px 0px currentcolor)', + to: 'drop-shadow(20px 10px green)' + }, [ + {at: -1, expect: 'drop-shadow(-20px -10px white)'}, + {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'}, + {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'}, + {at: 1, expect: 'drop-shadow(20px 10px green)'}, + {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'} + ]); + + test_no_interpolation({ + property: 'backdrop-filter', + from: 'url("#svgfilter")', + to: 'blur(5px)', + }); + + test_interpolation({ + property: 'backdrop-filter', + from: 'initial', // lacuna is 0 + to: 'sepia(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(1)'}, + {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1. + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html new file mode 100644 index 0000000000..84a9b565b8 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.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> diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html new file mode 100644 index 0000000000..a8508bb445 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.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> diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html new file mode 100644 index 0000000000..12389ae3f6 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.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> diff --git a/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html new file mode 100644 index 0000000000..d256ef3e73 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'color-interpolation-filters', + from: 'initial', + to: 'auto' +}); +</script> diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html new file mode 100644 index 0000000000..62fcbf0a5d --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>filter interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> + <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> + .parent { + filter: hue-rotate(30deg); + } + .target { + display: inline-block; + width: 50px; + height: 50px; + background-color: green; + color: white; + margin-right: 2px; + filter: hue-rotate(10deg); + } + .expected { + margin-right: 20px; + } + .test { + padding-bottom: 10px; + } + </style> + </head> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: '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: '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)'} + ]); + + test_interpolation({ + property: 'filter', + from: neutralKeyframe, + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(5deg)'}, + {at: 0, expect: 'hue-rotate(10deg)'}, + {at: 0.3, expect: 'hue-rotate(13deg)'}, + {at: 0.6, expect: 'hue-rotate(16deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(25deg)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'initial', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(-10deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.3, expect: 'hue-rotate(6deg)'}, + {at: 0.6, expect: 'hue-rotate(12deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(30deg)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'inherit', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(35deg)'}, + {at: 0, expect: 'hue-rotate(30deg)'}, + {at: 0.3, expect: 'hue-rotate(27deg)'}, + {at: 0.6, expect: 'hue-rotate(24deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(15deg)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'unset', + to: 'hue-rotate(20deg)', + }, [ + {at: -0.5, expect: 'hue-rotate(-10deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.3, expect: 'hue-rotate(6deg)'}, + {at: 0.6, expect: 'hue-rotate(12deg)'}, + {at: 1, expect: 'hue-rotate(20deg)'}, + {at: 1.5, expect: 'hue-rotate(30deg)'}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html new file mode 100644 index 0000000000..6ef25a7daf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>filter interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> + <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> + .target { + display: inline-block; + width: 50px; + height: 50px; + background-color: green; + color: white; + margin-right: 2px; + } + .expected { + margin-right: 20px; + } + .test { + padding-bottom: 10px; + } + </style> + </head> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'filter', + from: 'none', + to: 'opacity(0.5) hue-rotate(180deg)', + }, [ + {at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'}, + {at: 0, expect: 'opacity(1) hue-rotate(0deg)'}, + {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: 'filter', + from: 'blur(6px)', + to: 'blur(10px) hue-rotate(180deg)' + }, [ + {at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'}, + {at: 0, expect: 'blur(6px) hue-rotate(0deg)'}, + {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)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'none', + to: 'hue-rotate(180deg)' + }, [ + {at: -0.5, expect: 'hue-rotate(-90deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.25, expect: 'hue-rotate(45deg)'}, + {at: 0.5, expect: 'hue-rotate(90deg)'}, + {at: 1, expect: 'hue-rotate(180deg)'}, + {at: 1.5, expect: 'hue-rotate(270deg)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'hue-rotate(180deg)', + to: 'none' + }, [ + {at: -0.5, expect: 'hue-rotate(270deg)'}, + {at: 0, expect: 'hue-rotate(180deg)'}, + {at: 0.25, expect: 'hue-rotate(135deg)'}, + {at: 0.5, expect: 'hue-rotate(90deg)'}, + {at: 1, expect: 'hue-rotate(0deg)'}, + {at: 1.5, expect: 'hue-rotate(-90deg)'}, + ]); + + test_interpolation({ + property: 'filter', + from: 'drop-shadow(0px 0px 0px currentcolor)', + to: 'drop-shadow(20px 10px green)' + }, [ + {at: -1, expect: 'drop-shadow(-20px -10px white)'}, + {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'}, + {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'}, + {at: 1, expect: 'drop-shadow(20px 10px green)'}, + {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'} + ]); + + // crbug.com/904333: Test that ResolveInterpolableColor doesn't overflow. + test_interpolation({ + property: 'filter', + from: 'drop-shadow(20px 10px blue)', + to: 'drop-shadow(20px 10px green)' + }, [ + {at: 2147483648, expect: 'drop-shadow(20px 10px #00FF00'} + ]); + + // Mismatched lists: + test_no_interpolation({ + property: 'filter', + from: 'grayscale(0) blur(0px)', + to: 'blur(10px)' + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html new file mode 100644 index 0000000000..1d512487de --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html @@ -0,0 +1,178 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>filter interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> + <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> + .target { + display: inline-block; + width: 50px; + height: 50px; + background-color: green; + color: white; + margin-right: 2px; + filter: hue-rotate(10deg); + } + .expected { + margin-right: 20px; + } + .test { + padding-bottom: 10px; + } + </style> + </head> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'filter', + from: 'none', // lacuna is 0px + to: 'blur(10px)' + }, [ + {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed. + {at: 0, expect: 'blur(0px)'}, + {at: 0.5, expect: 'blur(5px)'}, + {at: 1, expect: 'blur(10px)'}, + {at: 1.5, expect: 'blur(15px)'} + ]); + + test_interpolation({ + property: '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, expect: 'brightness(1)'}, + {at: 1.5, expect: 'brightness(1.5)'} + ]); + + test_interpolation({ + property: '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, expect: 'contrast(1)'}, + {at: 1.5, expect: 'contrast(1.5)'} + ]); + + test_interpolation({ + property: '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, expect: 'drop-shadow(0px 0px 0px 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: 'filter', + from: 'none', // lacuna is 0 + to: 'grayscale(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(1)'}, + {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1. + ]); + + test_interpolation({ + property: 'filter', + from: 'none', // lacuna is 0deg + to: 'hue-rotate(360deg)' + }, [ + {at: -1, expect: 'hue-rotate(-360deg)'}, + {at: 0, expect: 'hue-rotate(0deg)'}, + {at: 0.5, expect: 'hue-rotate(180deg)'}, + {at: 1, expect: 'hue-rotate(360deg)'}, + {at: 1.5, expect: 'hue-rotate(540deg)'} + ]); + + test_interpolation({ + property: 'filter', + from: 'none', // lacuna is 0 + to: 'invert(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(1)'}, + {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1. + ]); + + test_interpolation({ + property: '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, expect: 'opacity(1)'}, + {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1. + ]); + + test_interpolation({ + property: '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, expect: 'saturate(1)'}, + {at: 1.5, expect: 'saturate(1.5)'} + ]); + + test_interpolation({ + property: 'filter', + from: 'none', // lacuna is 0 + to: 'sepia(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(1)'}, + {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1. + ]); + + test_no_interpolation({ + property: 'filter', + from: 'url("#svgfilter")', + to: 'none', // lacuna is not defined + }); + + test_no_interpolation({ + property: 'filter', + from: 'url("#svgfilter")', + to: 'blur(5px)', + }); + + test_interpolation({ + property: 'filter', + from: 'initial', // lacuna is 0 + to: 'sepia(1)' + }, [ + {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed. + {at: 0, expect: 'sepia(0)'}, // Equivalent to sepia(0) + {at: 0.5, expect: 'sepia(0.5)'}, + {at: 1, expect: 'sepia(1)'}, + {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1. + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html new file mode 100644 index 0000000000..63dd17361a --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>filter interpolation</title> + <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> + <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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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> |