1994100 - Write mouse/pointer boundary event tests when `usemap` of `<img>` or `coord` of `<area>` is modified

Status: RESOLVED FIXED

(Core :: DOM: UI Events & Focus Handling, enhancement)

Description

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

It's unclear that how <area> is treated within CSS. However, it's treated as a transparent object at least when a hit-test of pointing device events and <area> can be a target of mouse events and pointer events.

When the pointer is moved over the shape of an <area>, browsers dispatch mouseover and pointerover on the <area> instead of the <img>. Then, when it's moved out from the shape, browsers dispatch mouseout and pointerout.

However, Chrome and Safari do not dispatch boundary events when the underneath element of the last pointer position becomes another element. This does not make sense because modifying the layout, e.g., modifying the <img> size, causes mouseover and pointerover on the new element anyway. Therefore, modifying usemap attribute of <img> and coord attribute of <area> should be treated as a layout change.

Comment 1

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I'll file spec issues and Chromium/WebKit bugs once the coming patch gets r+.

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Attachment: Bug 1994100 - Add WPTs for mouse/pointer boundary events when `usemap` of `<img>` or `coord` of `<area>` is modified r=smaug!,#dom-core

It's unclear that how <area> is treated within CSS. However, it's
treated as a transparent object at least when a hit-test of pointing
device events and <area> can be a target of mouse events and pointer
events.

When the pointer is moved over the shape of an <area>, browsers
dispatch mouseover and pointerover on the <area> instead of the
<img>. Then, when it's moved out from the shape, browsers dispatch
mouseout and pointerout.

However, Chrome and Safari do not dispatch boundary events when the
underneath element of the last pointer position becomes another element.
This does not make sense because modifying the layout, e.g., modifying
the <img> size, causes mouseover and pointerover on the new
element anyway. Therefore, modifying usemap attribute of <img>
and coord attribute of <area> should be treated as a layout change.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5dd83104b28e
https://hg.mozilla.org/integration/autoland/rev/1ebb5b07c380
Add WPTs for mouse/pointer boundary events when `usemap` of `<img>` or `coord` of `<area>` is modified r=smaug,dom-core

Comment 4

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

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/55500 for changes under testing/web-platform/tests

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I'll file a bug of WebKit if the test fails on Safari. So, I wait the result in wpt.fyi.

Comment 6

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/1ebb5b07c380

Comment 7

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

Upstream PR merged by moz-wptsync-bot

Comment 8

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Wow, surprisingly, Safari dispatches mouse/pointer events on the <img> rather than corresponding <area>.

• https://wpt.fyi/results/uievents/mouse/mouse_boundary_events_on_image_map.html?label=experimental&label=master&aligned
• https://wpt.fyi/results/pointerevents/pointerevent_boundary_events_on_image_map.html?label=experimental&label=master&aligned