Mention about <area> of image map in somewhere, which may be a target of mouse/pointer/touch events #404
Description
As far as I've read the specs, there is no mention about <area> HTML element used for image map.
In my understanding, it does not make a layout object (i.e., non-empty bounding client rect) on <img> whose usemap refers the parent <map>. Therefore, <area> can be never an element underneath the pointing device. However, all browsers set some event target to an <area> element when the event position is in the shape of <area> on an <img>. This causes a tricky behavior from the behavior with normal elements. E.g., in the following HTML fragment:
<div>
<map id="map1">
<area shape="rect" coords="0,0,100,100" href="#">
</map>
<img usemap="#map1" width="100" height="100">
</div>When mouse cursor is moved over the <img>, browsers dispatch mousemove event with mouse boundary events as hoverring the <area>. Therefore, mouseenter is fired on <div>, <map> and <area> but not fired on <img> itself.
Additionally, if the position/size of <area> is changed or usemap is changed to different <map>, that should be treated as a layout change and mouse/pointer boundary events should be fired on the new element underneath the pointer. However, currently, Chrome and Firefox do not treat this as a layout change and do not dispatch mouse/pointer boundary events immediately. (Making an explicit layout change causes they fire mouse/pointer boundary events, so, this behavior is just a bug of them, and Firefox may cause mouse/pointer boundary events in some other cases too.)
So, I think the spec should mention:
- there is a special case of
HTMLAreaElement - changes of image map data should cause mouse/boundary events
Cc: @smaug----