Regression: Image Map Area offsetTop Incorrect
What this page shows
The original attachments and jsfiddles on
issue 41140071 are gone
(404 / dead attachment). This page rebuilds the reporter's case from the bug text:
an <img usemap> inside a <div>, with the
<map> living outside that div.
Repro steps
1. Load this page.
2. Look at the table below (values are read on load, no interaction needed).
3. Compare area.offsetTop against the image's position.
Live case
Expected vs actual
Expected
Per the HTML rendering spec, <area> is a
hidden element
(display: none). It generates no CSS box, so CSSOM View says
offsetParent is null and all offset*
values are 0. Firefox and Safari do this.
Actual (Chrome ≥ 39, still broken today)
Blink gives <area> display: inline, so it
generates an empty inline box wherever the <map> happens to
sit in the document flow. area.offsetTop therefore reports the
position of that stray empty box - roughly the bottom of the preceding
<div> - and has nothing to do with the image map geometry.
Moving the <map> next to the <img> makes
the numbers look plausible again by pure coincidence.
Root cause
third_party/blink/renderer/core/html/resources/html.css
/* TODO(crbug.com/1231263): <area> should be display:none. */
area {
display: inline;
}
Same root cause as issue 1231263
(permanently failing WPT html/rendering/non-replaced-elements/hidden-elements.html).