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).
The test case here involves focus. Can we make a simpler test case that does not involve focus?
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?
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.
Have you tried this in any other web browser?
Created attachment 190551 [details] reduced test case without focus Attached test-case without focus.
>>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
>>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"
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?
(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.
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.
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)
Created attachment 190574 [details] screen shot of qtlauncher for https://bugs.webkit.org/show_bug.cgi?id=110940#c11
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.
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.
>>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)
Darin, Can you please CC it to any CSS experts?
Chrome and Safari agree on rendering in these cases. Firefox varies in some places. I don't think this represents a compatibility bug.