<!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>