New issue
Advanced search Search tips
Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Dec 16
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment
link

Issue 902328: Clarify if reparented elements should continue active transitions.

Reported by flackr@chromium.org, Nov 6 Project Member

Issue description

What steps will reproduce the problem?
(1) Navigate to https://jsbin.com/celuzow/edit?html,css,js,output
(2) Click start transition.
(3) Click reparent element during the transition.

In Chrome, Firefox and Safari, the transition is immediately finished. In Edge, the transition animation is continued after the element is reparented.

I discovered this in the context of  issue 900162  but we should clarify the expected result and ensure that there is a test in WPT for this behavior.
 

Comment 1 by smcgruer@chromium.org, Nov 8

Cc: -smcgruer@chromium.org
Owner: smcgruer@chromium.org
Status: Assigned (was: Available)
I can own this. Step 1, read the entire css-transitions (and css-transitions-2) spec. It's about time I did that :D.

Comment 2 by flackr@chromium.org, Nov 8

FWIW, I fully expect that our current behavior is desirable. In my demo it may look fine to preserve the transition but reparenting the element could completely change the "old" underlying style in a way that the transition would completely ignore.

Comment 3 by smcgruer@chromium.org, Nov 9

Arguably this covered by https://drafts.csswg.org/css-transitions/#starting :

"""
If an element is no longer in the document, implementations must cancel any running transitions on it and remove transitions on it from the completed transitions.
"""

Technically reparenting requires removing the element from its previous parent before setting the new parent. Whether that constitutes being 'no longer in the document' I'm not sure.

I will open an issue against css-transitions-1 to clarify and make sure we have wording to support the behavior. And then I will create a test.

Comment 4 by flackr@chromium.org, Nov 9

For the offical wording on this, see "appendChild" and "insertBefore" from https://www.w3.org/TR/DOM-Level-2-Core/core.html:

Both contain the text:
"If the newChild is already in the tree, it is first removed."

Comment 6 by bugdroid1@chromium.org, Dec 14

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

commit 432fc71d83a629c402ff77a65d4b656b6b59fc47
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Fri Dec 14 21:28:27 2018

[CSS Transitions] Add test for reparenting

As per https://github.com/w3c/csswg-drafts/issues/3309, any CSS
Transition on a reparented element should be cancelled, as it leaves and
then re-enters the Document. This already works on Chrome, Firefox, and
Safari but fails on Edge.

Bug:  902328 
Change-Id: I097675a8146c8047417dd48193d0747216418cfb
Reviewed-on: https://chromium-review.googlesource.com/c/1374742
Reviewed-by: vmpstr <vmpstr@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#616830}
[add] https://crrev.com/432fc71d83a629c402ff77a65d4b656b6b59fc47/third_party/blink/web_tests/external/wpt/css/css-transitions/transition-reparented.html

Comment 7 by smcgruer@chromium.org, Dec 16

Status: Fixed (was: Assigned)

Comment 8 by phistuck@gmail.com, Dec 16

This is the opposite resolution to <video> reparenting. Can we keep the platform consistent?

Comment 9 by phistuck@gmail.com, Dec 16

Oops, forgot the issue number - see  issue 382879  for <video> reparenting.

Comment 10 by flackr@chromium.org, Dec 16

I'm not sure I agree that these are the same things though. The play state is part of the video element's state but the transition is part of the element's style, which is cleared when the element is removed from the DOM.

Sign in to add a comment