1 files changed, 60 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/spacing.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/spacing.html
new file mode 100644
index 000000000..612a3af8d
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/spacing.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>KeyframeEffect spacing attribute tests</title>
+<link rel="help"
+      href="https://w3c.github.io/web-animations/#dom-keyframeeffect-spacing">
+<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";
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  assert_throws(new TypeError, function() {
+    anim.effect.spacing = '';
+  });
+}, 'Test throwing TypeError if using empty string');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  assert_throws(new TypeError, function() {
+    anim.effect.spacing = 'dist';
+  });
+}, 'Test throwing TypeError if not using the correct keyword');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  anim.effect.spacing = 'paced(A)';
+  assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
+}, 'Test falling back to distribute spacing if using a unrecognized property');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  anim.effect.spacing = 'paced(--bg-color)';
+  assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
+}, 'Test falling back to distribute spacing if using CSS variables');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  anim.effect.spacing = 'paced(animation-duration)';
+  assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
+}, 'Test falling back to distribute spacing if using a non-animatable ' +
+   'property');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  anim.effect.spacing = 'distribute';
+  assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
+}, 'Test spacing value if setting distribute');
+
+test(function(t) {
+  var anim = createDiv(t).animate(null);
+  anim.effect.spacing = 'paced(transform)';
+  assert_equals(anim.effect.spacing, 'paced(transform)', 'spacing mode');
+}, 'Test spacing value if setting paced');
+
+</script>
+</body>