New issue
Advanced search Search tips
Starred by 13 users

Issue metadata

Status: Fixed
Owner:
Closed: Feb 6
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature

Blocking:
issue 926233



Sign in to add a comment
link

Issue 642487: CSS Transitions: Implement the transitioncancel event

Reported by cvrebert@google.com, Aug 30 2016 Project Member

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce the problem:
1. Open the CSSWG testcase https://github.com/w3c/csswg-test/blob/master/css-transitions-2/transitioncancel-001.html in Chrome.

What is the expected behavior?
The test should pass.

What went wrong?
The test failed, indicating that Chrome is not firing the transitioncancel event when a transition is canceled.
(In this case, the cancellation is due to the element being made display:none; while the transition was in progress.)

Did this work before? No 

Chrome version: 52.0.2743.116  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 22.0 r0

Specification: https://drafts.csswg.org/css-transitions-2/#eventdef-transitionevent-transitioncancel

Without transitioncancel, scripts which are waiting for the end (whether normal or canceled early) of a CSS transition have to resort to using setTimeout (or similar) to ensure that their callbacks still get called even if the transition gets canceled.
This extra complexity is annoying to authors, and frameworks often include such setTimeout-based workarounds in practice (see comments 9 & 10 on  issue 437860  ).
These extra setTimeout()s also presumably have a negative impact on performance.
 

Comment 1 by sheriffbot@chromium.org, Aug 31 2016

Project Member
Labels: Hotlist-Google

Comment 2 by dtapu...@chromium.org, Aug 31 2016

Components: Blink>Animation

Comment 3 by suzyh@chromium.org, Aug 31 2016

Labels: -Pri-2 -OS-Mac Hotlist-Interop Update-Quarterly OS-All Pri-3
Status: Available (was: Unconfirmed)

Comment 4 by ericwilligers@chromium.org, Nov 22 2016

Owner: ericwilligers@chromium.org
Status: Assigned (was: Available)

Comment 5 by ericwilligers@chromium.org, Jan 18 2017

No progress.

Comment 6 by bbirt...@mozilla.com, Feb 8 2017

This is now implemented in Firefox and will ship in Firefox 53 (2017-04-18).
It has also been added to level 1 of CSS transitions: https://drafts.csswg.org/css-transitions/#transitioncancel and documented on MDN.

Comment 7 by ericwilligers@chromium.org, May 10 2017

Owner: ----
Status: Available (was: Assigned)

Comment 8 by smcgruer@chromium.org, Mar 28 2018

Summary: CSS Transitions: Implement the transitioncancel event (was: Implement the transitioncancel event)

Comment 9 by ericwilligers@chromium.org, Aug 23

It would be most useful to implement transitionrun at the same time as transitioncancel.
Example use case: https://github.com/w3c/csswg-drafts/issues/3043#issuecomment-415214075

Comment 10 by flackr@chromium.org, Jan 29

Blocking: 926233

Comment 11 by flackr@chromium.org, Feb 1

Owner: flackr@chromium.org
Status: Started (was: Available)
Patch in progress:
https://chromium-review.googlesource.com/c/chromium/src/+/1450047

Comment 12 by bugdroid, Feb 6

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5

commit a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5
Author: Robert Flack <flackr@chromium.org>
Date: Wed Feb 06 16:03:20 2019

Dispatch transitioncancel event if transition animation is interrupted.

In order to dispatch transitioncancel we need to allow dispatching events for
non animation frame timing updates as a canceled transition does not run on
the next frame.

Bug:  642487 
Change-Id: I1225b60dc1666d5f225f9ddff1b3f9603b1b378b
Reviewed-on: https://chromium-review.googlesource.com/c/1450047
Commit-Queue: Robert Flack <flackr@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#629590}
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/renderer/core/animation/animation_effect.cc
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/renderer/core/animation/css/css_animations.cc
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/renderer/core/dom/document.cc
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/renderer/core/dom/document.h
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/renderer/core/events/event_type_names.json5
[modify] https://crrev.com/a69a70166c20e60a20e4aa3fc11846ac5f0ce1e5/third_party/blink/web_tests/external/wpt/css/css-transitions/event-dispatch.tentative-expected.txt
[delete] https://crrev.com/c6712c1ce445dad7d3c0cd6b94e173f3e9cd9003/third_party/blink/web_tests/external/wpt/css/css-transitions/transitioncancel-001-expected.txt

Comment 13 by flackr@chromium.org, Feb 6

Status: Fixed (was: Started)

Sign in to add a comment