1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/responsive/responsive-test.js b/testing/web-platform/tests/web-animations/responsive/responsive-test.js
new file mode 100644
index 0000000000..feca53259c
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/responsive-test.js
@@ -0,0 +1,65 @@
+class ResponsiveTest {
+  constructor(target, property, keyframes) {
+    this.property = property;
+    this.target = target;
+    this.duration = 1000;
+    this.anim = target.animate(keyframes, this.duration);
+    this.anim.pause();
+  }
+
+  get ready() {
+    return new Promise(resolve => {
+      this.anim.ready.then(resolve);
+    });
+  }
+
+  set underlyingValue(value) {
+    this.target.style[this.property] = value;
+  }
+
+  set inheritedValue(value) {
+    this.target.parentElement.style[this.property] = value;
+  }
+
+  // The testCases are of the form:
+  // [{at: <fractional_progress>, is: <computed style> }, ...]
+  assertResponsive(testCases) {
+    for (let i = 0; i < testCases.length; i++) {
+      const testCase = testCases[i];
+      this.anim.currentTime = this.duration * testCase.at;
+      assert_equals(getComputedStyle(this.target)[this.property], testCase.is,
+                    `${this.property} at ${testCase.at}`);
+    }
+  }
+}
+
+// Creates a test that allows setting the underlying style of the target
+// element or its parent.
+// Options are of the form:
+//   property: required property in camelcase form as used in the
+//   web animation API.
+//   from: optional starting keyframe as a string.
+//   to: optional ending keyframe as a string.
+function createResponsiveTest(test, options) {
+  const parent = document.createElement('div');
+  const target = document.createElement('div');
+  document.body.appendChild(parent);
+  parent.appendChild(target);
+  const property = options.property;
+  const keyframes = [];
+  const createKeyframe = (value) => {
+    const keyframe = {};
+    keyframe[property] = value;
+    return keyframe;
+  }
+  if (options.from) {
+    keyframes.push(createKeyframe(options.from));
+  }
+  if (options.to) {
+    keyframes.push(createKeyframe(options.to));
+  }
+  test.add_cleanup(() => {
+    parent.remove();
+  });
+  return new ResponsiveTest(target, property, keyframes);
+}