[webkit-dev] Possibilities to use border css property on image map...

Mon Feb 25 23:26:18 PST 2013

Hello WebKit Folks,

Good day !!

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).

Your help is greatly appreciated!!!.

Kind Regards,
Arun
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130226/40c939fd/attachment.html>