triggerTransitionEnd function

Future triggerTransitionEnd(
  1. Element element,
  2. {Duration timeout = _defaultTriggerTimeout}
)

Dispatches a transitionend event when the CSS transition of the element is complete. Returns a Future that completes after the event has been dispatched.

Used for testing components that rely on a transitionend event.

Implementation

Future triggerTransitionEnd(Element element, {Duration timeout = _defaultTriggerTimeout}) {
  var eventFiredFuture = element.onTransitionEnd.first;

  // Use JS interop to construct a native TransitionEvent since Dart doesn't allow instantiating them directly.
  // TODO: move this to JS so we can use TransitionEvent constructor

  var jsElement = JsObject.fromBrowserObject(element);
  var jsDocument = JsObject.fromBrowserObject(document);

  JsObject jsEvent;
  try {
    // Dartium requires it actually to be a `TransitionEvent`, not `Event`.
    jsEvent = JsObject.fromBrowserObject(jsDocument.callMethod('createEvent', ['TransitionEvent']));
  } catch (_) {
    // Firefox only supports `TransitionEvent` constructor, but `Event` is fine since checked mode is disabled.
    jsEvent = JsObject.fromBrowserObject(jsDocument.callMethod('createEvent', ['Event']));
  }

  var eventName = Element.transitionEndEvent.getEventType(element);

  jsEvent.callMethod('initEvent', [eventName, true, true]);

  jsElement.callMethod('dispatchEvent', [jsEvent]);

  return eventFiredFuture.timeout(timeout,
      onTimeout: () => Future.error('Failed to trigger transitionend'));
}