1779832 - hover not reverted on pointerup with capture

Status: UNCONFIRMED

(Core :: DOM: Events, defect, P3)

Description

[Yves Goergen]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

1. Open the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture
2. Modify the style of the pink element in the demo and add this style rule:

div:hover
{
    background: yellow;
}

3. Hover the pink box and see it turn yellow
4. Press and hold the mouse button, drag the element to the side
5. Move the mouse cursor outside the div element. It will still be moved and has a yellow background because of the capture.
6. Release the mouse button while the cursor is not over the div

Actual results:

The element remains yellow until the mouse is moved any further or something is printed to the console.

The console thing is weird but I've observed this while debugging the issue in my application. The style even reverts on its own if the console.log is deferred with setTimeout. So printing to the console wakes up the machine just as much as moving the mouse.

Expected results:

The div should turn pink immediately when the pointerup event fires or the capture is released (which should happen implicitly on pointerup, as per the documentation). Works in Chrome, maybe also worked in Firefox before (not sure).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::WebRTC: Audio/Video' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Yves Goergen]

Nope, definitely not WebRTC. 😆

BTW, any other DOM manipulation on the pointerup event also triggers the repaint. I've extended my application to show a tooltip element next to the dragged handle, and removing the element on pointerup also removes the other hover style.