1 files changed, 95 insertions, 0 deletions
diff --git a/dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html b/dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html
new file mode 100644
index 000000000..7bbf76fa7
--- /dev/null
+++ b/dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<style>
+:root {
+  --var-100px: 100px;
+}
+</style>
+<body>
+<script>
+'use strict';
+
+function getKeyframes(e) {
+  return e.getAnimations()[0].effect.getKeyframes();
+}
+
+function assert_frames_equal(a, b, name) {
+  assert_equals(Object.keys(a).sort().toString(),
+                Object.keys(b).sort().toString(),
+                "properties on " + name);
+  for (var p in a) {
+    assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
+  }
+}
+
+test(function(t) {
+  var div = addDiv(t);
+
+  div.style.left = '0px';
+  window.getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  var frames = getKeyframes(div);
+
+  assert_equals(frames.length, 2, "number of frames");
+
+  var expected = [
+    { offset: 0, computedOffset: 0, easing: "ease", left: "0px" },
+    { offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
+  ];
+
+  for (var i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
+  }
+}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
+   + ' transition');
+
+test(function(t) {
+  var div = addDiv(t);
+
+  div.style.left = '0px';
+  window.getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s steps(2,end)';
+  div.style.left = '100px';
+
+  var frames = getKeyframes(div);
+
+  assert_equals(frames.length, 2, "number of frames");
+
+  var expected = [
+    { offset: 0, computedOffset: 0, easing: "steps(2)", left: "0px" },
+    { offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
+  ];
+
+  for (var i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
+  }
+}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
+   + ' transition with a non-default easing function');
+
+test(function(t) {
+  var div = addDiv(t);
+  div.style.left = '0px';
+  window.getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = 'var(--var-100px)';
+
+  var frames = getKeyframes(div);
+
+  // CSS transition endpoints are based on the computed value so we
+  // shouldn't see the variable reference
+  var expected = [
+    { offset: 0, computedOffset: 0, easing: 'ease', left: '0px' },
+    { offset: 1, computedOffset: 1, easing: 'linear', left: '100px' },
+  ];
+  for (var i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
+  }
+}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a'
+   + ' transition with a CSS variable endpoint');
+
+done();
+</script>
+</body>