725921 - image maps: area element unstylable since Firefox 4

Status: NEW

(Core :: Layout, defect)

Description

[Leif Halvard Silli]

Attachment: Demo of how <area> does not react to CSS

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:10.0) Gecko/20100101 Firefox/10.0
Build ID: 20120129021758

Steps to reproduce:

Tried making <area> visible via roughly this CSS:

area{display:block; visibility:visible; }
area:before{content: " foo "; }


Actual results:

* It did not react to the CSS - did not display.
* Firebug reports that the computed style is display:none


Expected results:

It should have worked like in Webkit, Opera and IE10:

* " foo " should have been displayed as visible text
* the visible text should have acted as a clickable area link
* the visible area link should also have been possible to tab to

Comment 1

[Alice0775 White]

Regression windoe(m-c)
Works:
http://hg.mozilla.org/mozilla-central/rev/89cf6d3f66f1
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.3a1pre) Gecko/20091231 Minefield/3.7a1pre ID:20091231121343
Fails:
http://hg.mozilla.org/mozilla-central/rev/599d0aa600c9
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.3a1pre) Gecko/20091231 Minefield/3.7a1pre ID:20091231132117
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=89cf6d3f66f1&tochange=599d0aa600c9

In local build
First bad changeset ab3e23cefcce
Last good changeset 89cf6d3f66f1

Triggered by:Bug 536716

Comment 2

[Boris Zbarsky [:bzbarsky]]

Do any other UAs allow this?

Comment 3

[Leif Halvard Silli]

Attachment: Another demo, <img>: here the, the image is displayed.

(In reply to Boris Zbarsky (:bz) from comment #2)
> Do any other UAs allow this?

All other UAs allow this: 
  Gecko until Firefox 3.6,
  Trident - at least since IE9 (imperfect in IE8)
  Webkit, Chromium, Presto: Yes.
  
To verify, just try the test file attachments. You can think of this a <a> with @coords and @shape (like in HTML4), except that one must do more to make it work. However the issue is not only what should be possible to do via CSS, the issue is also related to accessibility: There seems to me to be a direct link between the lack of CSS-stylability and Firefox4+'s  deteriorated keyboard access to image maps (especially when the image is lacking/not displayed) - see the bugs that this bug block.

Some comments on the attachments so far:

#1 The OBJECT image map demo attachment:
<https://bug725921.bugzilla.mozilla.org/attachment.cgi?id=595950>
The file tests what happens when the <object> has dimensions set, but the image isn't displayed:
* <area> is NOT displayed by Firefox 4-12.
  But YES, the UAs mentioned above do display it.
  When displayed, <area> is also mouse click-able
* <area> is NOT keyboard focusable in Firefox 4-12
  and also not in IE9.
  But in the other mentioned browsers it is 
  keyboard focusable, and reacts to :focus{CSS}  
* :focus{CSS} effect:
  Firefox 4 +: nothing happens
  Webkit/Opera/Chrome/Firefox 3.6: light up <area>
  IE9: It lights up the image, as long as it has
       dimensions set. <area> not highlighted.
NOTE: If dimensions are not set, then, in IE, 
      tabbing jumps over the <area> elements.
  
#2 An IMG image map demo is attached with this posting. 
   It tests what happens when the image *does* display:
* <area> is not displayed by Firefox 4 to 12.
  But YES, the UAs mentioned above do display it.
  When displayed, <area> is also mouse click-able.
* <area> is NOT keyboard focusable in Firefox 4-12
  But in the other mentioned browsers it is 
  keyboard focusable, and reacts to :focus{CSS}.
* :focus{CSS} effect:
  Firefox 4 +: non-CSS light up of image area.
  Firefox 3.6: non-CSS light up of image area
               but no light up of <area>
  Webkit:<area>+img area simultaneously light up
  Opera: like Webkit.
  Chrome: only image area lights up.
  IE9: neither <area> or img area lights up - 
       instead entire image lights up.

Comment 4

[Boris Zbarsky [:bzbarsky]]

OK.  Leaving open for now, then; whenever someone rewrites imagemaps to work sanely (bug 135040) we can fix this.