1 files changed, 91 insertions, 0 deletions
diff --git a/dom/animation/test/css-transitions/file_setting-effect.html b/dom/animation/test/css-transitions/file_setting-effect.html
new file mode 100644
index 0000000000..c61877194e
--- /dev/null
+++ b/dom/animation/test/css-transitions/file_setting-effect.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src='../testcommon.js'></script>
+<body>
+<script>
+'use strict';
+
+promise_test(function(t) {
+  var div = addDiv(t);
+  div.style.left = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  var transition = div.getAnimations()[0];
+  return transition.ready.then(function() {
+    transition.currentTime = 50 * MS_PER_SEC;
+    transition.effect = null;
+    assert_equals(transition.transitionProperty, 'left');
+    assert_equals(transition.playState, 'finished');
+    assert_equals(window.getComputedStyle(div).left, '100px');
+  });
+}, 'Test for removing a transition effect');
+
+promise_test(function(t) {
+  var div = addDiv(t);
+  div.style.left = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  var transition = div.getAnimations()[0];
+  return transition.ready.then(function() {
+    transition.currentTime = 50 * MS_PER_SEC;
+    transition.effect = new KeyframeEffect(div,
+                                           { marginLeft: [ '0px' , '100px'] },
+                                           100 * MS_PER_SEC);
+    assert_equals(transition.transitionProperty, 'left');
+    assert_equals(transition.playState, 'running');
+    assert_equals(window.getComputedStyle(div).left, '100px');
+    assert_equals(window.getComputedStyle(div).marginLeft, '50px');
+  });
+}, 'Test for replacing the transition effect by a new keyframe effect');
+
+promise_test(function(t) {
+  var div = addDiv(t);
+  div.style.left = '0px';
+  div.style.width = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  var transition = div.getAnimations()[0];
+  return transition.ready.then(function() {
+    transition.currentTime = 50 * MS_PER_SEC;
+    transition.effect = new KeyframeEffect(div,
+                                           { marginLeft: [ '0px' , '100px'] },
+                                           20 * MS_PER_SEC);
+    assert_equals(transition.playState, 'finished');
+  });
+}, 'Test for setting a new keyframe effect with a shorter duration');
+
+promise_test(function(t) {
+  var div = addDiv(t);
+  div.style.left = '0px';
+  div.style.width = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  var transition = div.getAnimations()[0];
+  assert_equals(transition.playState, 'pending');
+
+  transition.effect = new KeyframeEffect(div,
+                                         { marginLeft: [ '0px' , '100px'] },
+                                         100 * MS_PER_SEC);
+  assert_equals(transition.transitionProperty, 'left');
+  assert_equals(transition.playState, 'pending');
+
+  return transition.ready.then(function() {
+    assert_equals(transition.playState, 'running');
+  });
+}, 'Test for setting a new keyframe effect to a pending transition');
+
+done();
+</script>
+</body>