new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-filters.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Keyframe spacing tests on filters</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<body>
+<div id="log"></div>
+<script>
+"use strict";
+
+// Help function for testing the computed offsets by the distance array.
+function assert_animation_offsets(anim, dist) {
+ const frames = anim.effect.getKeyframes();
+ const cumDist = dist.reduce( (prev, curr) => {
+ prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
+ return prev;
+ }, []);
+
+ const total = cumDist[cumDist.length - 1];
+ for (var i = 0; i < frames.length; ++i) {
+ assert_equals(frames[i].computedOffset, cumDist[i] / total,
+ 'computedOffset of frame ' + i);
+ }
+}
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'blur(1px)'},
+ { filter: 'none' }, // The default value is 0px.
+ { filter: 'blur(10px)' },
+ { filter: 'blur(8px)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, 1, 10, (10 - 8) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on blur' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'brightness(50%)'},
+ { filter: 'none' }, // The default value is 1.
+ { filter: 'brightness(2)' },
+ { filter: 'brightness(175%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on brightness' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'contrast(50%)'},
+ { filter: 'none' }, // The default value is 1.
+ { filter: 'contrast(2)' },
+ { filter: 'contrast(175%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on contrast' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px blue)'},
+ { filter: 'none' },
+ // none filter: 'drop-shadow(0, 0, 0, rgba(0, 0, 0, 0))'
+ { filter: 'drop-shadow(5px 5px 1px black)' },
+ { filter: 'drop-shadow(20px 20px yellow)' } ],
+ { spacing: 'paced(filter)' });
+
+ // Blue: rgba(0, 0, 255, 1.0) = rgba( 0%, 0%, 100%, 100%).
+ // Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
+ // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
+ var dist = [ 0,
+ Math.sqrt(10 * 10 + 10 * 10 + 10 * 10 + (1 * 1 + 1 * 1)),
+ Math.sqrt(5 * 5 + 5 * 5 + 1 * 1 + (1 * 1)),
+ Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on drop-shadow' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px)'},
+ { filter: 'drop-shadow(0 0)' },
+ { filter: 'drop-shadow(5px 5px 1px black)' },
+ { filter: 'drop-shadow(20px 20px yellow)' } ],
+ { spacing: 'paced(filter)' });
+
+ // Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
+ // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
+ var dist = [ 0,
+ Math.sqrt(10 * 10 + 10 * 10 + 10 * 10),
+ 0, // The distance is zero because the 2nd frame uses no-color.
+ Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test getting zero distance when computing distance between ' +
+ 'color and no-color on drop-shadow');
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'grayscale(50%)'},
+ { filter: 'none' }, // The default value is 0.
+ // Values of grayscale over 100% are clamped to 1.
+ { filter: 'grayscale(2)' },
+ { filter: 'grayscale(75%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on grayscale' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'hue-rotate(180deg)'},
+ { filter: 'none' }, // The default value is 0deg.
+ { filter: 'hue-rotate(720deg)' },
+ { filter: 'hue-rotate(-180deg)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, 180, 720, 720 + 180 ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on hue-rotate' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'invert(50%)'},
+ { filter: 'none' }, // The default value is 0.
+ // Values of invert over 100% are clamped to 1.
+ { filter: 'invert(2)' },
+ { filter: 'invert(75%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on invert' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'opacity(50%)'},
+ { filter: 'none' }, // The default value is 1.
+ // Values of opacity over 100% are clamped to 1.
+ { filter: 'opacity(2)' },
+ { filter: 'opacity(75%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, (1 - 0.5), (1 - 1), (1.0 - 0.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on opacity' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'saturate(50%)'},
+ { filter: 'none' }, // The default value is 1.
+ { filter: 'saturate(2)' },
+ { filter: 'saturate(175%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on saturate' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'sepia(50%)'},
+ { filter: 'none' }, // The default value is 0.
+ // Values of sepia over 100% are clamped to 1.
+ { filter: 'sepia(2)' },
+ { filter: 'sepia(75%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on sepia' );
+
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%) blur(5px)' },
+ { filter: 'none' },
+ // none filter: 'grayscale(0) opacity(1) blur(0px)'
+ { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
+ { filter: 'grayscale(75%) opacity(50%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0,
+ Math.sqrt(0.5 * 0.5 + 5 * 5),
+ Math.sqrt(1 * 1 + 0.5 * 0.5 + 1 * 1),
+ Math.sqrt(0.25 * 0.25 + 1 * 1) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on filter function lists' );
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%)' },
+ { filter: 'opacity(10%) grayscale(50%)' },
+ { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
+ { filter: 'grayscale(75%) opacity(50%)' } ],
+ { spacing: 'paced(filter)' });
+
+ var dist = [ 0,
+ 0,
+ 0,
+ Math.sqrt(0.25 * 0.25 + 1 * 1) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on filter function lists' );
+
+</script>
+</body>