Closed Bug 1780885 Opened 4 years ago Closed 4 years ago

[wpt-sync] Sync PR 34973 - Add hover-hide-delay functionality to pop-ups

Categories

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

Product:
Core
Component:
DOM: Core & HTML
Type:
task

Tracking

()

Status:
RESOLVED FIXED
Milestone:
105 Branch
Tracking Flags:
Tracking Status
firefox105 --- fixed

People

(Reporter: wpt-sync, Unassigned)

References

(
URL
)

Details

(Whiteboard: [wptsync downstream])

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

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

Mason Freed <masonf@chromium.org> wrote:

Add hover-hide-delay functionality to pop-ups

With this CL, the hover-pop-up-hide-delay CSS property can be used
to make a pop-up hide after a specified delay, if it is no longer
hovered. This is related, but independent from, the hover-pop-up-delay
functionality, which can be used on another element to trigger/show
a pop-up after a delay. The hover-pop-up-hide-delay can be used on
any pop-up type, including popup=manual, and it will make the pop-up
get automatically hidden if it (or its anchors or invokers) is not
hovered for the specified period of time.

A typical use case is to build a tooltip, fully in HTML/CSS:

\<input hoverpopup=tooltip placeholder="Hover me">
\<div popup=hint role=tooltip id=tooltip>Additional info\</div>

\<style>
input {
hover-pop-up-delay: 0.5s;
}
[popup] {
hover-pop-up-hide-delay: 1s;
opacity:0;
transition: opacity 0.5s;
}
[popup]:top-layer {
opacity:1;
}
\</style>

Bug: 1307772
Change-Id: I12b36cf0e612b541c054a9a41c6d91f58c55ec72
Cq-Do-Not-Cancel-Tryjobs: true

Reviewed-on: https://chromium-review.googlesource.com/3781406
WPT-Export-Revision: f3b6f274fa0faa235bc291aace9f748726617976

Component: web-platform-tests → DOM: Core & HTML
Product: Testing → Core
Whiteboard: [wptsync downstream] → [wptsync downstream error]
Whiteboard: [wptsync downstream error] → [wptsync downstream]

CI Results

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

Total 10 tests and 4 subtests

Status Summary

Firefox

OK : 9
PASS : 3
FAIL : 143
ERROR: 1

Chrome

OK : 10
PASS : 143
FAIL : 5

Safari

OK : 9
PASS : 3
FAIL : 143
ERROR: 1

Links

GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

  • /html/semantics/popups/popup-animated-hide-cleanup.tentative.html [wpt.fyi]
    • Ensure no crashes if running animations are immediately cancelled (document removal): FAIL (Chrome: PASS, Safari: FAIL)
    • Ensure no crashes if running animations are immediately cancelled (dialog showModal): FAIL (Chrome: PASS, Safari: FAIL)
    • Ensure no crashes if running transitions are immediately cancelled (button click): FAIL (Chrome: PASS, Safari: FAIL)
  • /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: PASS, Safari: FAIL)
    • Pre-existing animations should not keep the pop up visible until the animation ends: FAIL (Chrome: PASS, Safari: FAIL)
    • It should be possible to use the "hide" event handler to animate the hide: FAIL (Chrome: PASS, 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: PASS, Safari: FAIL)
    • hide event cannot be cancelled: FAIL (Chrome: PASS, 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: PASS, Safari: FAIL)
    • The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="">Pop up</div>.: FAIL (Chrome: PASS, Safari: FAIL)
    • The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="auto">Pop up</div>.: FAIL (Chrome: PASS, Safari: FAIL)
    • The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="hint">Pop up</div>.: FAIL (Chrome: PASS, Safari: FAIL)
    • The .showPopUp() and .hidePopUp() work on a pop-up, for <div popup="manual">Pop up</div>.: FAIL (Chrome: PASS, Safari: FAIL)
    • The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, <div>Not a pop-up</div>.: FAIL (Chrome: PASS, 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: PASS, 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: PASS, Safari: FAIL)
    • IDL attribute reflection: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup attribute value should be case insensitive: FAIL (Chrome: PASS, Safari: FAIL)
    • Changing attribute values for pop-up should work: FAIL (Chrome: PASS, Safari: FAIL)
    • Changing attribute values should close open pop-ups: FAIL (Chrome: PASS, Safari: FAIL)
    • Removing a visible popup=auto element from the document should close the pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • A showing popup=auto does not match :modal: FAIL (Chrome: PASS, Safari: FAIL)
    • Removing a visible popup=hint element from the document should close the pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • A showing popup=hint does not match :modal: FAIL (Chrome: PASS, Safari: FAIL)
    • Removing a visible popup=manual element from the document should close the pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • A showing popup=manual does not match :modal: FAIL (Chrome: PASS, Safari: FAIL)
    • Exceptions are thrown even when show/hide are animated: FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-defaultopen-hints.tentative.html [wpt.fyi]
    • The defaultopen attribute should not apply to popup=hint: FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-events.tentative.html [wpt.fyi]
    • Show and hide events get properly dispatched for popups: FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-focus.tentative.html [wpt.fyi]
    • Popup focus test: default behavior - pop-up is not focused: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: default behavior - pop-up is not focused: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus empty pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus empty pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus empty pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus pop-up with button: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus pop-up with button: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus pop-up with button: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus child: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus child: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus child: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus on tabindex=0 element: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus on tabindex=0 element: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus on tabindex=0 element: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus multiple children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus multiple children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus multiple children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: autofocus pop-up and multiple autofocus children: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: delegatesfocus pop-up: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: delegatesfocus takes precedence over autofocus: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: delegatesfocus takes precedence over autofocus 2: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus on empty pop-up has no effect: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus on empty pop-up has no effect: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus on child has no effect: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus on child has no effect: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus skips contained pop-ups: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus skips contained pop-ups: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: delegatesfocus skips contained pop-ups: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup focus test: delegatesfocus skips contained dialogs: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup button click focus test: delegatesfocus skips contained dialogs: FAIL (Chrome: PASS, Safari: FAIL)
    • Popup corner cases test: delegatesfocus skips contained dialogs: FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-hover-hide.tentative.html [wpt.fyi]
    • The hover-pop-up-hide-delay causes a pop-up to be hidden after a delay: FAIL (Chrome: FAIL, Safari: FAIL)
    • hovering the pop-up keeps it from being hidden: FAIL (Chrome: FAIL, Safari: FAIL)
    • hovering a hoverpopup invoking element keeps the pop-up from being hidden: FAIL (Chrome: FAIL, Safari: FAIL)
    • hovering a popuptoggletarget invoking element keeps the pop-up from being hidden: FAIL (Chrome: FAIL, Safari: FAIL)
  • /html/semantics/popups/popup-hoverpopup-attribute.tentative.html [wpt.fyi]
    • hoverpopup attribute shows a pop-up with popup=auto, invokerType=plain: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=auto, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=auto, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=auto, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=auto, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=auto, invokerType=nested: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=auto, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=auto, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=auto, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=auto, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=auto, invokerType=nested-offset: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=auto, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=auto, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=auto, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=auto, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=hint, invokerType=plain: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=hint, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=hint, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=hint, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=hint, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=hint, invokerType=nested: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=hint, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=hint, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=hint, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=hint, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=hint, invokerType=nested-offset: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=hint, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=hint, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=hint, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=hint, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=manual, invokerType=plain: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=manual, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=manual, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=manual, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=manual, invokerType=plain): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=manual, invokerType=nested: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=manual, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=manual, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=manual, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=manual, invokerType=nested): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute shows a pop-up with popup=manual, invokerType=nested-offset: FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup hover-pop-up-delay is respected (popup=manual, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is already showing (popup=manual, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when pop-up is moved out of the document (popup=manual, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
    • hoverpopup attribute does nothing when target changes (popup=manual, invokerType=nested-offset): FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-light-dismiss.tentative.html [wpt.fyi]: ERROR (Chrome: OK, Safari: ERROR)
    • Clicking outside a popup will dismiss the popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking inside a popup does not close that popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Moving focus outside the popup will dismiss the popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking inside a child popup shouldn't close either popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking inside a parent popup should close child popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking on invoking element, after using it for activation, shouldn't close its popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking on invoking element, even if it wasn't used for activation, shouldn't close its popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking on popuptoggletarget element, even if it wasn't used for activation, should hide it exactly once: FAIL (Chrome: PASS, Safari: FAIL)
    • Clicking on anchor element (that isn't an invoking element) shouldn't close its popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Dragging from an open popup outside an open popup should leave the popup open: FAIL (Chrome: PASS, Safari: FAIL)
    • An invoking element should be part of the ancestor chain: FAIL (Chrome: PASS, Safari: FAIL)
    • An invoking element that was not used to invoke the popup can still be part of the ancestor chain: FAIL (Chrome: PASS, Safari: FAIL)
    • Scrolling within a popup should not close the popup: FAIL (Chrome: FAIL, Safari: FAIL)
    • Moving focus back to the anchor element should not dismiss the popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Moving focus back to the active trigger element should not dismiss the popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Moving focus back to an inactive trigger element should also not dismiss the popup: FAIL (Chrome: PASS, Safari: FAIL)
    • Ensure circular/convoluted ancestral relationships are functional: FAIL (Chrome: PASS, Safari: FAIL)
    • Ensure circular/convoluted ancestral relationships are functional, with a direct showPopUp(): FAIL (Chrome: PASS, Safari: FAIL)
    • Light dismiss of mixed popup types: FAIL (Chrome: PASS, Safari: FAIL)
  • /html/semantics/popups/popup-shadow-dom.tentative.html [wpt.fyi]
    • Popups located inside shadow DOM can still be shown: FAIL (Chrome: PASS, Safari: FAIL)
    • anchor references do not cross shadow boundaries: FAIL (Chrome: PASS, Safari: FAIL)
    • anchor references use the flat tree not the DOM tree: FAIL (Chrome: PASS, Safari: FAIL)
    • The popup stack is preserved across shadow-inclusive ancestors: FAIL (Chrome: PASS, Safari: FAIL)
Pushed by wptsync@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/374bd9edb7de [wpt PR 34973] - Add hover-hide-delay functionality to pop-ups, a=testonly https://hg.mozilla.org/integration/autoland/rev/27d84941b138 [wpt PR 34973] - Update wpt metadata, a=testonly

https://hg.mozilla.org/mozilla-central/rev/374bd9edb7de
https://hg.mozilla.org/mozilla-central/rev/27d84941b138

Status: NEW → RESOLVED
Closed: 4 years ago
status-firefox105: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 105 Branch
You need to log in before you can comment on or make changes to this bug.