diff options
author | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2018-03-14 12:13:01 +0100 |
---|---|---|
committer | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2018-03-14 12:13:01 +0100 |
commit | 35c61a027dc6f4d58ca9d33e06da79adf2503ebd (patch) | |
tree | 8ec4f35ab71eb895d3ea993faf4deec39e4ad258 /dom/animation/test/css-transitions/file_csstransition-events.html | |
parent | c58cec26c73da9a5c48f7d75555c6a2409965693 (diff) | |
download | UXP-35c61a027dc6f4d58ca9d33e06da79adf2503ebd.tar UXP-35c61a027dc6f4d58ca9d33e06da79adf2503ebd.tar.gz UXP-35c61a027dc6f4d58ca9d33e06da79adf2503ebd.tar.lz UXP-35c61a027dc6f4d58ca9d33e06da79adf2503ebd.tar.xz UXP-35c61a027dc6f4d58ca9d33e06da79adf2503ebd.zip |
Bug 1264125: Fire transitioncancel event when a transition is canceled (added tests + style clean up)
Issue #55
Diffstat (limited to 'dom/animation/test/css-transitions/file_csstransition-events.html')
-rw-r--r-- | dom/animation/test/css-transitions/file_csstransition-events.html | 223 |
1 files changed, 0 insertions, 223 deletions
diff --git a/dom/animation/test/css-transitions/file_csstransition-events.html b/dom/animation/test/css-transitions/file_csstransition-events.html deleted file mode 100644 index 5011bc130..000000000 --- a/dom/animation/test/css-transitions/file_csstransition-events.html +++ /dev/null @@ -1,223 +0,0 @@ -<!doctype html> -<meta charset=utf-8> -<title>Tests for CSS-Transition events</title> -<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#transition-events"> -<script src="../testcommon.js"></script> -<body> -<script> -'use strict'; - -/** - * Helper class to record the elapsedTime member of each event. - * The EventWatcher class in testharness.js allows us to wait on - * multiple events in a certain order but only records the event - * parameters of the most recent event. - */ -function TransitionEventHandler(target) { - this.target = target; - this.target.ontransitionrun = function(evt) { - this.transitionrun = evt.elapsedTime; - }.bind(this); - this.target.ontransitionstart = function(evt) { - this.transitionstart = evt.elapsedTime; - }.bind(this); - this.target.ontransitionend = function(evt) { - this.transitionend = evt.elapsedTime; - }.bind(this); -} - -TransitionEventHandler.prototype.clear = function() { - this.transitionrun = undefined; - this.transitionstart = undefined; - this.transitionend = undefined; -}; - -function setupTransition(t, transitionStyle) { - var div, watcher, handler, transition; - transitionStyle = transitionStyle || 'transition: margin-left 100s 100s'; - div = addDiv(t, { style: transitionStyle }); - watcher = new EventWatcher(t, div, [ 'transitionrun', - 'transitionstart', - 'transitionend' ]); - handler = new TransitionEventHandler(div); - flushComputedStyle(div); - - div.style.marginLeft = '100px'; - flushComputedStyle(div); - - transition = div.getAnimations()[0]; - - return [transition, watcher, handler]; -} - -// On the next frame (i.e. when events are queued), whether or not the -// transition is still pending depends on the implementation. -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - return watcher.wait_for('transitionrun').then(function(evt) { - assert_equals(evt.elapsedTime, 0.0); - }); -}, 'Idle -> Pending or Before'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Force the transition to leave the idle phase - transition.startTime = document.timeline.currentTime; - return watcher.wait_for('transitionrun').then(function(evt) { - assert_equals(evt.elapsedTime, 0.0); - }); -}, 'Idle -> Before'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to Active phase. - transition.currentTime = 100 * MS_PER_SEC; - transition.pause(); - return watcher.wait_for([ 'transitionrun', - 'transitionstart' ]).then(function(evt) { - assert_equals(handler.transitionrun, 0.0); - assert_equals(handler.transitionstart, 0.0); - }); -}, 'Idle or Pending -> Active'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to After phase. - transition.finish(); - return watcher.wait_for([ 'transitionrun', - 'transitionstart', - 'transitionend' ]).then(function(evt) { - assert_equals(handler.transitionrun, 0.0); - assert_equals(handler.transitionstart, 0.0); - assert_equals(handler.transitionend, 100.0); - }); -}, 'Idle or Pending -> After'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - - return Promise.all([ watcher.wait_for('transitionrun'), - transition.ready ]).then(function() { - transition.currentTime = 100 * MS_PER_SEC; - return watcher.wait_for('transitionstart'); - }).then(function() { - assert_equals(handler.transitionstart, 0.0); - }); -}, 'Before -> Active'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - return Promise.all([ watcher.wait_for('transitionrun'), - transition.ready ]).then(function() { - // Seek to After phase. - transition.currentTime = 200 * MS_PER_SEC; - return watcher.wait_for([ 'transitionstart', 'transitionend' ]); - }).then(function(evt) { - assert_equals(handler.transitionstart, 0.0); - assert_equals(handler.transitionend, 100.0); - }); -}, 'Before -> After'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to Active phase. - transition.currentTime = 100 * MS_PER_SEC; - return watcher.wait_for([ 'transitionrun', - 'transitionstart' ]).then(function(evt) { - // Seek to Before phase. - transition.currentTime = 0; - return watcher.wait_for('transitionend'); - }).then(function(evt) { - assert_equals(evt.elapsedTime, 0.0); - }); -}, 'Active -> Before'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to Active phase. - transition.currentTime = 100 * MS_PER_SEC; - return watcher.wait_for([ 'transitionrun', - 'transitionstart' ]).then(function(evt) { - // Seek to After phase. - transition.currentTime = 200 * MS_PER_SEC; - return watcher.wait_for('transitionend'); - }).then(function(evt) { - assert_equals(evt.elapsedTime, 100.0); - }); -}, 'Active -> After'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to After phase. - transition.finish(); - return watcher.wait_for([ 'transitionrun', - 'transitionstart', - 'transitionend' ]).then(function(evt) { - // Seek to Before phase. - transition.currentTime = 0; - return watcher.wait_for([ 'transitionstart', 'transitionend' ]); - }).then(function(evt) { - assert_equals(handler.transitionstart, 100.0); - assert_equals(handler.transitionend, 0.0); - }); -}, 'After -> Before'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - // Seek to After phase. - transition.finish(); - return watcher.wait_for([ 'transitionrun', - 'transitionstart', - 'transitionend' ]).then(function(evt) { - // Seek to Active phase. - transition.currentTime = 100 * MS_PER_SEC; - return watcher.wait_for('transitionstart'); - }).then(function(evt) { - assert_equals(evt.elapsedTime, 100.0); - }); -}, 'After -> Active'); - -promise_test(function(t) { - var [transition, watcher, handler] = - setupTransition(t, 'transition: margin-left 100s -50s'); - - return watcher.wait_for([ 'transitionrun', - 'transitionstart' ]).then(function() { - assert_equals(handler.transitionrun, 50.0); - assert_equals(handler.transitionstart, 50.0); - transition.finish(); - return watcher.wait_for('transitionend'); - }).then(function(evt) { - assert_equals(evt.elapsedTime, 100.0); - }); -}, 'Calculating the interval start and end time with negative start delay.'); - -promise_test(function(t) { - var [transition, watcher, handler] = setupTransition(t); - - return watcher.wait_for('transitionrun').then(function(evt) { - // We can't set the end delay via generated effect timing. - // Because CSS-Transition use the AnimationEffectTimingReadOnly. - transition.effect = new KeyframeEffect(handler.target, - { marginleft: [ '0px', '100px' ]}, - { duration: 100 * MS_PER_SEC, - endDelay: -50 * MS_PER_SEC }); - // Seek to Before and play. - transition.cancel(); - transition.play(); - return watcher.wait_for('transitionstart'); - }).then(function() { - assert_equals(handler.transitionstart, 0.0); - - // Seek to After phase. - transition.finish(); - return watcher.wait_for('transitionend'); - }).then(function(evt) { - assert_equals(evt.elapsedTime, 50.0); - }); -}, 'Calculating the interval start and end time with negative end delay.'); - -done(); -</script> -</body> -</html> |