Bug 254401 – Animations inside a Details tag only fire once

• Component: Animations
• Status: RESOLVED FIXED

[Roman Komarov]

Created attachment 465567 [details]
Video recording of the CodePen link demonstrating the bug: expanding the details only fires the animation once, while showing/hiding an element via a checkbox fires it every time.

Steps to reproduce:

1. Create a `<details>` tag.
2. Put an element inside that has an animation that runs once.
3. Expand the details, close it, expand again.

Codepen link: https://codepen.io/kizu/pen/XWPopdM

When there is an element with an animation inside the details, it works only the first time we expand the details, but does not work on any consecutive toggling.

This is an issue that would prevent us from using animations of transitions for the details content — with the new discrete display animations (https://github.com/w3c/csswg-drafts/issues/6429), as well as with the initial state transitions (https://github.com/w3c/csswg-drafts/issues/8174), it would be really nice to use them with `<details>`, but this bug prevents us from it.

Checked in other browsers: Chrome has the same issue (I did file it there as well — https://bugs.chromium.org/p/chromium/issues/detail?id=1427375), while Firefox seem to work as I expect it to.

[Antoine Quint]

Created attachment 465568 [details]
Test

[Antoine Quint]

We start off by calling RenderTreeUpdater::tearDownRenderers() with the root set to the HTMLSlotElement and TeardownType::Full. As we process the slot's children we don't call cancelDeclarativeAnimations() because of the teardownType.

[Antoine Quint]

Then we call RenderTreeUpdater::tearDownRenderers() with the root set to the HTMLDetailElement and TeardownType::RendererUpdate. The <div> is not part of the teardownStack.

[Antoine Quint]

Then we call RenderTreeUpdater::tearDownRenderers() again with the HTMLSlotElement but this time with TeardownType::RendererUpdate.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/11923

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39183

[EWS]

Committed 262076@main (46d858959377): <https://commits.webkit.org/262076@main>

Reviewed commits have been landed. Closing PR #11923 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/107188584>

[Tim Nguyen (:ntim)]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/47403