summaryrefslogtreecommitdiffstats
path: root/dom/animation/test/css-transitions/file_setting-effect.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /dom/animation/test/css-transitions/file_setting-effect.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'dom/animation/test/css-transitions/file_setting-effect.html')
-rw-r--r--dom/animation/test/css-transitions/file_setting-effect.html91
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 000000000..c61877194
--- /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>