Bug 110940

Summary:

CSS styles cannot be applied to area elements

Product:

WebKit

Reporter:

Arunprasad <ararunprasad>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Major

CC:

ararunprasad, arurajku, bfulgham, darin, jbriance, jose.lejin, vivekg

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
reduced test case to reproduce this issue	none
reduced test case without focus	none
screen shot of all major browser's rendering when using "outline" property on image map	none
two <area > with different style attributes	none
screen shot of qtlauncher for https://bugs.webkit.org/show_bug.cgi?id=110940#c11	none

Arunprasad

Reported 2013-02-26 20:50:19 PST

Created attachment 190434 [details] reduced test case to reproduce this issue I'm trying to use border CSS property on image map. Suppose if area element gets focus it should highlight with different border size & color than the default one. So I tried using :focus { border:5px solid red; }. But it is not working in WebKit based browsers. But border property works well for all other elements(a,div,span,p,..) but not with area. I tried to debug it in RenderImage::paintReplaced, but I don't get any clue about how the border is drawn. Below is the sample document, <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> :focus { border:5px solid red; } body {margin: 100px;} </style> <script> window.onload = function() { document.getElementById("area").focus(); } </script> </head> <body> <map name="imagemap"> <area id="area" shape="rect" coords="0,0,50,50" href="#dummy"> </map> <img src="http://upload.wikimedia.org/wikipedia/en/5/5a/Webkit_Logo.png" width="128" height="128" usemap="#imagemap"> <div> <a href="#dummy">Anchor with Border</a> </div> </body></html> I don't want to use any external js libraries to do this work(JQuery has a plugin to do the task using canvas/svg).

Attachments
reduced test case to reproduce this issue (546 bytes, text/html) 2013-02-26 20:50 PST, Arunprasad	no flags	Details
reduced test case without focus (454 bytes, text/html) 2013-02-27 10:06 PST, Arunprasad	no flags	Details
screen shot of all major browser's rendering when using "outline" property on image map (204.60 KB, application/x-gzip) 2013-02-27 11:18 PST, Arunprasad	no flags	Details
two <area > with different style attributes (693 bytes, text/html) 2013-02-27 12:07 PST, Arunprasad	no flags	Details
screen shot of qtlauncher for https://bugs.webkit.org/show_bug.cgi?id=110940#c11 (47.49 KB, image/png) 2013-02-27 12:10 PST, Arunprasad	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Darin Adler

Comment 1 2013-02-27 08:59:52 PST

The test case here involves focus. Can we make a simpler test case that does not involve focus?

Darin Adler

Comment 2 2013-02-27 09:03:24 PST

I am not sure this is a bug. A given image map (the map element and area element) can be used by more than one image at a time. The elements in the image map are not themselves rendered, and therefore can’t be styled. I understand the desire to show a focus ring around an area within an image when that area is focused, but I think this will require a change to the CSS standard. It’s not simply a WebKit bug, but rather a request for a new feature. Are there other CSS experts who can inform us more about this?

Darin Adler

Comment 3 2013-02-27 09:06:02 PST

There seem to be multiple questions here: 1) Can any CSS properties be applied to an image map area? 2) Is there some issue specific to the CSS border property, as the bug title implies? 3) Does the focus pseudo-style work correctly with image map areas? 4) Is there some hard-coded styling applied to an image map area when it’s focused that cannot be customized with CSS? 5) (Something I saw when testing) Are there repainting problems when switching the focus to an image map area? It would be good to break this down a bit.

Darin Adler

Comment 4 2013-02-27 09:26:54 PST

Have you tried this in any other web browser?

Arunprasad

Comment 5 2013-02-27 10:06:43 PST

Created attachment 190551 [details] reduced test case without focus Attached test-case without focus.

Arunprasad

Comment 6 2013-02-27 10:25:17 PST

>>I am not sure this is a bug. A given image map (the map element and area element) can be used by more than one image at a time. The elements in the image map are not themselves rendered, and therefore can’t be styled. If I understood correctly, area element doesn't have corresponding RenderObject, so it is not possible to style it. What I think is area element is a logically visible one when combining it with image. But you are right, still we can't add/apply position and co-ordinate(top,left,right,bottom) related styles on area element even it has RenderObject. But we should use the style of a user of <area>(image,object,..). Whether "usemap" attribute is limited to <img> alone? But other browsers still supports for <object> too. Refer http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_object_usemap

Arunprasad

Comment 7 2013-02-27 11:03:03 PST

>>1) Can any CSS properties be applied to an image map area? No. None of the properties are applying :( >>2) Is there some issue specific to the CSS border property, as the bug title implies? Sorry for that. But title should be "None of CSS styles are applying on <area> element"

Arunprasad

Comment 8 2013-02-27 11:18:19 PST

Created attachment 190559 [details] screen shot of all major browser's rendering when using "outline" property on image map >>1) Can any CSS properties be applied to an image map area? Tried with outline property as like below, :focus { outline-width: 10px; outline-color: green; outline-style: solid; } None of the browsers rendering properly for image map(<area> element) except QtWebKit(I did some change in GraphicsContextQt.cpp). I majorly use QtWebKit for my work. Actually Qt WebKit GraphicsContext implementation for focus-ring drawing never considers the width(considers only color). I modified as like below, it shows something like attached(Refer qt_launcher_nightly_r143840.png). Index: platform/graphics/qt/GraphicsContextQt.cpp =================================================================== --- platform/graphics/qt/GraphicsContextQt.cpp (revision 143841) +++ platform/graphics/qt/GraphicsContextQt.cpp (working copy) @@ -913,7 +913,7 @@ p->setClipPath(platformPath, Qt::IntersectClip); } -void drawFocusRingForPath(QPainter* p, const QPainterPath& path, const Color& color, bool antiAliasing) +void drawFocusRingForPath(QPainter* p, const QPainterPath& path, const Color& color, bool antiAliasing, int width = 0) { const bool antiAlias = p->testRenderHint(QPainter::Antialiasing); p->setRenderHint(QPainter::Antialiasing, antiAliasing); @@ -924,6 +924,9 @@ QPen nPen = p->pen(); nPen.setColor(color); p->setBrush(Qt::NoBrush); + if (width) + nPen.setWidth(width); + nPen.setStyle(Qt::DotLine); p->strokePath(path, nPen); @@ -933,14 +936,14 @@ p->setRenderHint(QPainter::Antialiasing, antiAlias); } -void GraphicsContext::drawFocusRing(const Path& path, int /* width */, int offset, const Color& color) +void GraphicsContext::drawFocusRing(const Path& path, int width, int offset, const Color& color) { // FIXME: Use 'offset' for something? http://webkit.org/b/49909 if (paintingDisabled() || !color.isValid()) return; - drawFocusRingForPath(m_data->p(), path.platformPath(), color, m_data->antiAliasingForRectsAndLines); + drawFocusRingForPath(m_data->p(), path.platformPath(), color, m_data->antiAliasingForRectsAndLines, width); } /** So what is the expected behavior?. I'm in confusion now :( Since I use Linux I can't take Safari's screen-shot? How does it renders?

Darin Adler

Comment 9 2013-02-27 11:23:25 PST

(In reply to comment #6) > >>I am not sure this is a bug. A given image map (the map element and area element) can be used by more than one image at a time. The elements in the image map are not themselves rendered, and therefore can’t be styled. > > If I understood correctly, area element doesn't have corresponding RenderObject, so it is not possible to style it. That’s an implementation detail. The real issue is whether CSS is supposed to style it. If it is, we can implement that. We have other things you can style that don’t necessarily each have a separate RenderObject. It’s probably a significant project to add that feature. But before we add that feature, we should make sure it’s part of the CSS design; lets not implement something without even discussing it with the other browser vendors.

Arunprasad

Comment 10 2013-02-27 11:53:49 PST

http://www.w3.org/TR/html401/struct/objects.html#edef-MAP (#section 13.6.1 Client-side image maps: the MAP and AREA elements) includes "style" attribute to <area> element. Hope it means each <area> can have its own style.

Arunprasad

Comment 11 2013-02-27 12:07:52 PST

Created attachment 190573 [details] two <area > with different style attributes When testing two <area> elements with different inline-styles QtLauncher behaves differently(Modified GraphicsContext's focus drawing to consider width as mentioned in https://bugs.webkit.org/show_bug.cgi?id=110940#c8). "outline" property works perfectly with <a>, but for <area> outline is displayed only when <area> receives focus - may be during PaintPhaseOutline painting phase(but style is not applied as focus pseudo-style-Refer attachment)

Arunprasad

Comment 12 2013-02-27 12:10:41 PST

Created attachment 190574 [details] screen shot of qtlauncher for https://bugs.webkit.org/show_bug.cgi?id=110940#c11

Darin Adler

Comment 13 2013-02-27 15:21:04 PST

Please separate out the Qt-specific problem due to the GraphicsContext bug from the platform independent issue by filing a new bug for it, unless you think it’s not Qt-specific.

Darin Adler

Comment 14 2013-02-27 15:26:38 PST

Given the screenshot, it looks like: Firefox puts a focus outline on the focus area, but that focus outline is unaffected by the border style, but because the test uses a :focus pseudo-selector, we can’t tell if that’s because styling of the area element are entirely ignored or if it’s because the :focus pseudo-selector doesn’t get matched for the area element. Opera does the same as Firefox, but separately, the :focus pseudo-selector seems to be matched for the img element, so the entire img element gets an outline. The two WebKit test cases aren’t helpful to us in understanding non-WebKit engine behavior. It might be nice to see what IE does too. So far it seems there is no browser that allows the area element to be styled. I’d like a CSS and HTML expert to weigh in on whether that’s a bug or not, but I’m not sure we’ve gotten anyone else interested in this.

Arunprasad

Comment 15 2013-02-27 22:06:48 PST

>>because the test uses a :focus pseudo-selector, we can’t tell if that’s because styling of the area element are entirely ignored or if it’s because the :focus pseudo-selector doesn’t get matched for the area element. No, actually I removed focus pseudo style in both https://bugs.webkit.org/attachment.cgi?id=190551 & https://bugs.webkit.org/attachment.cgi?id=190573. >>So far it seems there is no browser that allows the area element to be styled. I’d like a CSS and HTML expert to weigh in on whether that’s a bug or not, but I’m not sure we’ve gotten anyone else interested in this. Refer http://www.w3.org/TR/html401/struct/objects.html#edef-MAP (#section 13.6.1 Client-side image maps: the MAP and AREA elements)

Arunprasad

Comment 16 2013-03-01 07:46:08 PST

Darin, Can you please CC it to any CSS experts?

Brent Fulgham

Comment 17 2022-07-13 14:17:49 PDT

Chrome and Safari agree on rendering in these cases. Firefox varies in some places. I don't think this represents a compatibility bug.

Note You need to log in before you can comment on or make changes to this bug.