--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -916,16 +916,93 @@ const filterListType = {
{ duration: 1000, composite: 'add' });
testAnimationSamples(animation, idlName,
[ { time: 0, expected: 'blur(10px) brightness(0.8)' }]);
}, property + ': different filter functions');
},
};
const textShadowListType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'none',
+ 'rgb(100, 100, 100) 10px 10px 10px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ // Premultiplied
+ [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
+ }, property + ': from none to other');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',
+ 'none' ] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ // Premultiplied
+ [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
+ }, property + ': from other to none');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',
+ 'rgb(100, 100, 100) 10px 10px 10px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);
+ }, property + ': single shadow');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '
+ + 'rgb(200, 200, 200) 20px 20px 20px',
+ 'rgb(100, 100, 100) 10px 10px 10px, '
+ + 'rgb(100, 100, 100) 10px 10px 10px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px, '
+ + 'rgb(150, 150, 150) 15px 15px 15px' }]);
+ }, property + ': shadow list');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',
+ 'rgb(100, 100, 100) 10px 10px 10px, '
+ + 'rgb(100, 100, 100) 10px 10px 10px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '
+ + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
+ }, property + ': mismatched list length (from longer to shorter)');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '
+ + 'rgb(100, 100, 100) 10px 10px 10px',
+ 'rgb(200, 200, 200) 20px 20px 20px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '
+ + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);
+ }, property + ': mismatched list length (from shorter to longer)');
+ },
+
testAddition: function(property, setup) {
test(function(t) {
var idlName = propertyToIDL(property);
var target = createTestElement(t, setup);
target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';
var animation =
target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
'rgb(120, 120, 120) 10px 10px 10px'] },