The default bug view has changed. See this FAQ.

image maps: area element unstylable since Firefox 4

NEW
Unassigned

Status

()

Core
Layout
--
trivial
5 years ago
2 years ago

People

(Reporter: Leif Halvard Silli, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs, {regression})

10 Branch
regression
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
Created attachment 595950 [details]
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

Updated

5 years ago
Attachment #595950 - Attachment mime type: text/plain → text/html
(Reporter)

Updated

5 years ago
Blocks: 592538, 8131
Severity: normal → major
OS: Mac OS X → All
Hardware: x86 → All
(Reporter)

Updated

5 years ago
No longer blocks: 592538

Updated

5 years ago
Attachment #595950 - Attachment mime type: text/html → application/xhtml+xml
(Reporter)

Updated

5 years ago
Blocks: 592538

Comment 1

5 years ago
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
Blocks: 536716
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
Do any other UAs allow this?
(Reporter)

Comment 3

5 years ago
Created attachment 596231 [details]
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.
(Reporter)

Updated

5 years ago
Attachment #596231 - Attachment mime type: text/plain → text/html
OK.  Leaving open for now, then; whenever someone rewrites imagemaps to work sanely (bug 135040) we can fix this.
Severity: major → trivial
Depends on: 135040

Updated

2 years ago
Component: Untriaged → Layout
Product: Firefox → Core
You need to log in before you can comment on or make changes to this bug.