Closed Bug 1776258 Opened 3 years ago Closed 3 years ago

[wpt-sync] Sync PR 34561 - Allow hide animations to be started from pop up hide event

Tracking

()

Status:

RESOLVED FIXED

Milestone:

104 Branch

Tracking Flags:

Tracking

Status

firefox104

---

fixed

People

(Reporter: wpt-sync, Unassigned)

References

(
URL
)

Details

(Whiteboard: [wptsync downstream])

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Description

•

3 years ago

Sync web-platform-tests PR 34561 into mozilla-central (this bug is closed when the sync is complete).

PR: https://github.com/web-platform-tests/wpt/pull/34561
Details from upstream follow.

Mason Freed <masonf@chromium.org> wrote:

Allow hide animations to be started from pop up hide event

See [1] for the origin of this change, which makes it possible to
trigger pop up hide animations from within the hide event handler.
For example:

popup.addEventListener('hide', () => {
popup.animate({
transform: 'translateY(-50px)',
opacity: 0,
}, 200);
});

To accomplish that, the hide process now has two embedded "wait"
states:

Waiting for the (asynchronous) hide event to fire, then

Waiting for all running animations to complete (pre-existing state).

Here is the full "hide" logic:

Capture any already-running animations via getAnimations(),
including animations on descendent elements.

Remove the :top-layer pseudo class.

Queue the 'hide' event.

If the hidePopup() call is not the result of the popup being
"forced out" of the top layer, e.g. by a modal dialog or fullscreen
element:
a. Restore focus to the previously-focused element.
b. Wait for the 'hide' event to fire, to allow animations to be
started from the 'hide' event handler.
c. Update style. (Animations/transitions start here.)
d. Call getAnimations() again, remove any from step #1, and then
wait until all of them finish or are cancelled.

Remove the popup from the top layer, and add the UA display:none
style.

Update style.

Note that this change, due to the required async wait for the hide
event, changes observable behavior slightly for normal (non-forced) hide
and light dismiss, in that the event loop must spin once before the
popup is actually hidden. That is now reflected in tests.

[1] https://chromium-review.googlesource.com/c/chromium/src/+/3688871/9/third_party/blink/renderer/core/dom/element.cc#2660

Bug: 1307772

Change-Id: I910535b13cfc3c8f8498ed64dae73caa75dd7317

Reviewed-on: https://chromium-review.googlesource.com/3708419
WPT-Export-Revision: 2a399020ab2649c10113ede0d69ea6f21b69ceaa

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Updated

•

3 years ago

Component: web-platform-tests → DOM: Core & HTML

Product: Testing → Core

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Comment 1

•

3 years ago

PR 34561 applied with additional changes from upstream: 350691e98b712351b5da4fc511a0f17a9cbec52e, cd6f245502e992ef25dc2828f91f05a5f7dd689e, 7b93c5f15d2d4df418f7dc1e61c3f82e24935833

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Comment 2

•

3 years ago

Pushed to try (stability) https://treeherder.mozilla.org/#/jobs?repo=try&revision=4a590ac5280833ff9e87fd31040512f731f33aeb

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Comment 3

•

3 years ago

CI Results

Ran 11 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI

Total 5 tests and 4 subtests

Status Summary

Firefox

OK : 5
PASS: 3
FAIL: 70

Chrome

OK : 5
PASS: 3
FAIL: 67

Safari

OK : 5
PASS: 3
FAIL: 67

Links

Gecko CI (Treeherder)
GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

/html/semantics/popups/popup-animation-corner-cases.tentative.html [wpt.fyi]
- Descendent animations should keep the pop up visible until the animation ends: FAIL (Chrome: FAIL, Safari: FAIL)
- Pre-existing animations should not keep the pop up visible until the animation ends: FAIL (Chrome: FAIL, Safari: FAIL)
- It should be possible to use the "hide" event handler to animate the hide: FAIL (Chrome: FAIL, Safari: FAIL)
- It should not be possible to use the "hide" event handler to animate the hide, if the hide is due to dialog.showModal: FAIL (Chrome: FAIL, Safari: FAIL)
- hide event cannot be cancelled: FAIL (Chrome: FAIL, Safari: FAIL)
/html/semantics/popups/popup-attribute-basic.tentative.html [wpt.fyi]
- The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="" id="boolean">Pop up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="">Pop up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="auto">Pop up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="hint">Pop up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="manual">Pop up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, <div>Not a pop-up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, <div popup="popup">Not a pop-up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, <div popup="invalid">Not a pop-up</div>.: FAIL (Chrome: FAIL, Safari: FAIL)
- IDL attribute reflection: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup attribute value should be case insensitive: FAIL (Chrome: FAIL, Safari: FAIL)
- Changing attribute values for pop-up should work: FAIL (Chrome: FAIL, Safari: FAIL)
- Changing attribute values should close open pop-ups: FAIL (Chrome: FAIL, Safari: FAIL)
- Removing a visible popup=auto element from the document should close the pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- A showing popup=auto does not match :modal: FAIL
- Removing a visible popup=hint element from the document should close the pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- A showing popup=hint does not match :modal: FAIL
- Removing a visible popup=manual element from the document should close the pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- A showing popup=manual does not match :modal: FAIL
/html/semantics/popups/popup-events.tentative.html [wpt.fyi]
- Show and hide events get properly dispatched for popups: FAIL (Chrome: FAIL, Safari: FAIL)
/html/semantics/popups/popup-focus.tentative.html [wpt.fyi]
- Popup focus test: default behavior - pop-up is not focused: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: default behavior - pop-up is not focused: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus empty pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus empty pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus empty pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus pop-up with button: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus pop-up with button: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus pop-up with button: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus child: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus child: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus child: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus on tabindex=0 element: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus on tabindex=0 element: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus on tabindex=0 element: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus multiple children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus multiple children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus multiple children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: delegatesfocus pop-up: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus on empty pop-up has no effect: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus on empty pop-up has no effect: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus on child has no effect: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus on child has no effect: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus skips contained pop-ups: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus skips contained pop-ups: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: delegatesfocus skips contained pop-ups: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup focus test: delegatesfocus skips contained dialogs: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup button click focus test: delegatesfocus skips contained dialogs: FAIL (Chrome: FAIL, Safari: FAIL)
- Popup corner cases test: delegatesfocus skips contained dialogs: FAIL (Chrome: FAIL, Safari: FAIL)
/html/semantics/popups/popup-shadow-dom.tentative.html [wpt.fyi]
- Popups located inside shadow DOM can still be shown: FAIL (Chrome: FAIL, Safari: FAIL)
- anchor references do not cross shadow boundaries: FAIL (Chrome: FAIL, Safari: FAIL)
- anchor references use the flat tree not the DOM tree: FAIL (Chrome: FAIL, Safari: FAIL)
- The popup stack is preserved across shadow-inclusive ancestors: FAIL (Chrome: FAIL, Safari: FAIL)

Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)

Assignee

Updated

•

3 years ago

Depends on: 1777357

Cristian Tuns

Comment 4

•

3 years ago

bugherder

https://hg.mozilla.org/mozilla-central/rev/ba87f62d8ad6
https://hg.mozilla.org/mozilla-central/rev/bd897a2706c9

Status: NEW → RESOLVED

Closed: 3 years ago

status-firefox104: --- → fixed

Resolution: --- → FIXED

Target Milestone: --- → 104 Branch

You need to log in before you can comment on or make changes to this bug.

Bugzilla

[wpt-sync] Sync PR 34561 - Allow hide animations to be started from pop up hide event

Categories

(Core :: DOM: Core & HTML, task, P4)

Tracking

()

People

(Reporter: wpt-sync, Unassigned)

References

(
URL
)

Details

(Whiteboard: [wptsync downstream])

Crash Data

Security

(public)

User Story

Description

Updated

Comment 1

Comment 2

Comment 3

CI Results

Status Summary

Firefox

Chrome

Safari

Links

Details

New Tests That Don't Pass

Updated

Comment 4