new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Keyframe spacing tests on shapes</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([ { clipPath: 'circle(20px)' },
+ { clipPath: 'ellipse(10px 20px)' },
+ { clipPath: 'polygon(50px 0px, 100px 50px, ' +
+ ' 50px 100px, 0px 50px)' },
+ { clipPath: 'inset(20px round 10px)' } ],
+ { spacing: 'paced(clip-path)' });
+
+ const frames = anim.effect.getKeyframes();
+ const slots = frames.length - 1;
+ for (var i = 0; i < frames.length; ++i) {
+ assert_equals(frames[i].computedOffset, i / slots,
+ 'computedOffset of frame ' + i);
+ }
+}, 'Test falling back to distribute spacing when using different basic shapes');
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { clipPath: 'circle(10px)' },
+ { clipPath: 'circle(20px) content-box' },
+ { clipPath: 'circle(70px)' },
+ { clipPath: 'circle(10px) padding-box' } ],
+ { spacing: 'paced(clip-path)' });
+
+ const frames = anim.effect.getKeyframes();
+ const slots = frames.length - 1;
+ for (var i = 0; i < frames.length; ++i) {
+ assert_equals(frames[i].computedOffset, i / slots,
+ 'computedOffset of frame ' + i);
+ }
+}, 'Test falling back to distribute spacing when using different ' +
+ 'reference boxes');
+
+test(function(t) {
+ // 1st: circle(calc(20px) at calc(20px + 0%) calc(10px + 0%))
+ // 2nd: circle(calc(50px) at calc(10px + 0%) calc(10px + 0%))
+ // 3rd: circle(70px at calc(10px + 0%) calc(50px + 0%))
+ // 4th: circle(10px at calc(50px + 0%) calc(30px + 0%))
+ var anim =
+ createDiv(t).animate([ { clipPath: 'circle(calc(10px + 10px) ' +
+ ' at 20px 10px)' },
+ { clipPath: 'circle(calc(20px + 30px) ' +
+ ' at 10px 10px)' },
+ { clipPath: 'circle(70px at 10px 50px)' },
+ { clipPath: 'circle(10px at 50px 30px)' } ],
+ { spacing: 'paced(clip-path)' });
+
+ var dist = [ 0,
+ Math.sqrt(30 * 30 + 10 * 10),
+ Math.sqrt(20 * 20 + 40 * 40),
+ Math.sqrt(60 * 60 + 40 * 40 + 20 * 20) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on circle' );
+
+test(function(t) {
+ // 1st: ellipse(20px calc(20px) at calc(0px + 50%) calc(0px + 50%))
+ // 2nd: ellipse(20px calc(50px) at calc(0px + 50%) calc(0px + 50%))
+ // 3rd: ellipse(30px 70px at calc(0px + 50%) calc(0px + 50%))
+ // 4th: ellipse(30px 10px at calc(0px + 50%) calc(0px + 50%))
+ var anim =
+ createDiv(t).animate([ { clipPath: 'ellipse(20px calc(10px + 10px))' },
+ { clipPath: 'ellipse(20px calc(20px + 30px))' },
+ { clipPath: 'ellipse(30px 70px)' },
+ { clipPath: 'ellipse(30px 10px)' } ],
+ { spacing: 'paced(clip-path)' });
+
+ var dist = [ 0,
+ Math.sqrt(30 * 30),
+ Math.sqrt(10 * 10 + 20 * 20),
+ Math.sqrt(60 * 60) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on ellipse' );
+
+test(function(t) {
+ // 1st: polygon(nonzero, 50px 0px, 100px 50px, 50px 100px, 0px 50px)
+ // 2nd: polygon(nonzero, 40px 0px, 100px 70px, 10px 100px, 0px 70px)
+ // 3rd: polygon(nonzero, 100px 0px, 100px 100px, 10px 80px, 0px 50px)
+ // 4th: polygon(nonzero, 100px 100px, -10px 100px, 20px 80px, 20px 50px)
+ var anim =
+ createDiv(t).animate([ { clipPath: 'polygon(50px 0px, 100px 50px, ' +
+ ' 50px 100px, 0px 50px)' },
+ { clipPath: 'polygon(40px 0px, 100px 70px, ' +
+ ' 10px 100px, 0px 70px)' },
+ { clipPath: 'polygon(100px 0px, 100px 100px, ' +
+ ' 10px 80px, 0px 50px)' },
+ { clipPath: 'polygon(100px 100px, -10px 100px, ' +
+ ' 20px 80px, 20px 50px)' } ],
+ { spacing: 'paced(clip-path)' });
+
+ var dist = [ 0,
+ Math.sqrt(10 * 10 + 20 * 20 + 40 * 40 + 20 * 20),
+ Math.sqrt(60 * 60 + 30 * 30 + 20 * 20 + 20 * 20),
+ Math.sqrt(100 * 100 + 110 * 110 + 10 * 10 + 20 * 20) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on polygon' );
+
+test(function(t) {
+ // Note: Rounding corners are 4 CSS pair values and
+ // each pair has x & y components.
+ // 1st: inset(5px 5px 5px 5px round 40px 30px 20px 5px / 40px 30px 20px 5px)
+ // 2nd: inset(10px 5px 10px 5px round 50px 60px / 50px 60px)
+ // 3rd: inset(40px 40px 40px 40px round 10px / 10px)
+ // 4th: inset(30px 40px 30px 40px round 20px / 20px)
+ var anim =
+ createDiv(t).animate([ { clipPath: 'inset(5px 5px 5px 5px ' +
+ ' round 40px 30px 20px 5px)' },
+ { clipPath: 'inset(10px 5px round 50px 60px)' },
+ { clipPath: 'inset(40px 40px round 10px)' },
+ { clipPath: 'inset(30px 40px round 20px)' } ],
+ { spacing: 'paced(clip-path)' });
+
+ var dist = [ 0,
+ Math.sqrt(5 * 5 * 2 + (50 - 40) * (50 - 40) * 2 +
+ (60 - 30) * (60 - 30) * 2 +
+ (50 - 20) * (50 - 20) * 2 +
+ (60 - 5) * (60 - 5) * 2),
+ Math.sqrt(30 * 30 * 2 + 35 * 35 * 2 + (50 - 10) * (50 - 10) * 4 +
+ (60 - 10) * (60 - 10) * 4),
+ Math.sqrt(10 * 10 * 2 + (20 - 10) * (20 - 10) * 8) ];
+ assert_animation_offsets(anim, dist);
+}, 'Test spacing on inset' );
+
+</script>
+</body>