diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /dom/animation/test/css-transitions/file_animation-cancel.html | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-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_animation-cancel.html')
| -rw-r--r-- | dom/animation/test/css-transitions/file_animation-cancel.html | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/dom/animation/test/css-transitions/file_animation-cancel.html b/dom/animation/test/css-transitions/file_animation-cancel.html new file mode 100644 index 000000000..6094b383f --- /dev/null +++ b/dom/animation/test/css-transitions/file_animation-cancel.html @@ -0,0 +1,165 @@ +<!doctype html> +<meta charset=utf-8> +<script src="../testcommon.js"></script> +<body> +<script> +'use strict'; + +promise_test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + var animation = div.getAnimations()[0]; + return animation.ready.then(waitForFrame).then(function() { + assert_not_equals(getComputedStyle(div).marginLeft, '1000px', + 'transform style is animated before cancelling'); + animation.cancel(); + assert_equals(getComputedStyle(div).marginLeft, div.style.marginLeft, + 'transform style is no longer animated after cancelling'); + }); +}, 'Animated style is cleared after cancelling a running CSS transition'); + +promise_test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + div.addEventListener('transitionend', function() { + assert_unreached('Got unexpected end event on cancelled transition'); + }); + + var animation = div.getAnimations()[0]; + return animation.ready.then(function() { + // Seek to just before the end then cancel + animation.currentTime = 99.9 * 1000; + animation.cancel(); + + // Then wait a couple of frames and check that no event was dispatched + return waitForAnimationFrames(2); + }); +}, 'Cancelled CSS transitions do not dispatch events'); + +promise_test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + var animation = div.getAnimations()[0]; + return animation.ready.then(function() { + animation.cancel(); + assert_equals(getComputedStyle(div).marginLeft, '1000px', + 'margin-left style is not animated after cancelling'); + animation.play(); + assert_equals(getComputedStyle(div).marginLeft, '0px', + 'margin-left style is animated after re-starting transition'); + return animation.ready; + }).then(function() { + assert_equals(animation.playState, 'running', + 'Transition succeeds in running after being re-started'); + }); +}, 'After cancelling a transition, it can still be re-used'); + +promise_test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + var animation = div.getAnimations()[0]; + return animation.ready.then(function() { + animation.finish(); + animation.cancel(); + assert_equals(getComputedStyle(div).marginLeft, '1000px', + 'margin-left style is not animated after cancelling'); + animation.play(); + assert_equals(getComputedStyle(div).marginLeft, '0px', + 'margin-left style is animated after re-starting transition'); + return animation.ready; + }).then(function() { + assert_equals(animation.playState, 'running', + 'Transition succeeds in running after being re-started'); + }); +}, 'After cancelling a finished transition, it can still be re-used'); + +test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + var animation = div.getAnimations()[0]; + animation.cancel(); + assert_equals(getComputedStyle(div).marginLeft, '1000px', + 'margin-left style is not animated after cancelling'); + + // Trigger a change to a transition property and check that this + // doesn't cause the animation to become live again + div.style.transitionDuration = '200s'; + flushComputedStyle(div); + assert_equals(getComputedStyle(div).marginLeft, '1000px', + 'margin-left style is still not animated after updating' + + ' transition-duration'); + assert_equals(animation.playState, 'idle', + 'Transition is still idle after updating transition-duration'); +}, 'After cancelling a transition, updating transition properties doesn\'t make' + + ' it live again'); + +promise_test(function(t) { + var div = addDiv(t, { style: 'margin-left: 0px' }); + flushComputedStyle(div); + + div.style.transition = 'margin-left 100s'; + div.style.marginLeft = '1000px'; + flushComputedStyle(div); + + var animation = div.getAnimations()[0]; + return animation.ready.then(function() { + assert_equals(animation.playState, 'running'); + div.style.display = 'none'; + return waitForFrame(); + }).then(function() { + assert_equals(animation.playState, 'idle'); + assert_equals(getComputedStyle(div).marginLeft, '1000px'); + }); +}, 'Setting display:none on an element cancels its transitions'); + +promise_test(function(t) { + var parentDiv = addDiv(t); + var childDiv = document.createElement('div'); + parentDiv.appendChild(childDiv); + childDiv.setAttribute('style', 'margin-left: 0px'); + + flushComputedStyle(childDiv); + + childDiv.style.transition = 'margin-left 100s'; + childDiv.style.marginLeft = '1000px'; + flushComputedStyle(childDiv); + + var animation = childDiv.getAnimations()[0]; + return animation.ready.then(function() { + assert_equals(animation.playState, 'running'); + parentDiv.style.display = 'none'; + return waitForFrame(); + }).then(function() { + assert_equals(animation.playState, 'idle'); + assert_equals(getComputedStyle(childDiv).marginLeft, '1000px'); + }); +}, 'Setting display:none cancels transitions on a child element'); + +done(); +</script> +</body> |