Bug 25293 - We should implement outline-radius:
: We should implement outline-radius:
Status: RESOLVED WONTFIX
: WebKit
CSS
: 525.x (Safari 3.2)
: Macintosh Mac OS X 10.4
: P2 Enhancement
Assigned To:
:
:
:
: 20807
  Show dependency treegraph
 
Reported: 2009-04-20 06:55 PST by
Modified: 2012-03-14 20:38 PST (History)


Attachments
draft implementation (23.01 KB, patch)
2009-11-17 10:09 PST, Gustavo Noronha (kov)
gns: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
second draft (35.53 KB, patch)
2009-11-23 10:37 PST, Gustavo Noronha (kov)
mjs: review-
gns: commit‑queue-
Review Patch | Details | Formatted Diff | Diff


Note

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


Description From 2009-04-20 06:55:52 PST
We should implement outline-radius:
All the blocks with border-radius currently have boxed outlines without rounded corners
------- Comment #1 From 2009-10-09 16:30:01 PST -------
*** Bug 29988 has been marked as a duplicate of this bug. ***
------- Comment #2 From 2009-10-10 07:50:30 PST -------
I agree. My alternative suggestion is to make the outline follow it's container's border-radius. That will save us a property to add and it makes sense.
------- Comment #3 From 2009-11-17 10:09:50 PST -------
Created an attachment (id=43366) [details]
draft implementation

This is my very first incursion into the inner parts of WebCore, so please be picky, and let me know of any bad decisions regarding naming, implementation, code reuse, etc. I am not sure we would want to call the property outline-radius, for instance. Should we use the '-webkit-' prefix for this?
------- Comment #4 From 2009-11-17 10:15:06 PST -------
(In reply to comment #2)
> I agree. My alternative suggestion is to make the outline follow it's
> container's border-radius. That will save us a property to add and it makes
> sense.

This makes sense to me too.
------- Comment #5 From 2009-11-18 16:16:15 PST -------
Who's going to review this? Hyatt, Mitz, Simon, Beth?
------- Comment #6 From 2009-11-18 16:54:37 PST -------
Can you give a link to the CSS spec for outline-radius?
Thanks.
------- Comment #7 From 2009-11-23 10:36:43 PST -------
(In reply to comment #6)
> Can you give a link to the CSS spec for outline-radius?
> Thanks.

No such thing, AFAIK. This is currently only implemented in Mozilla, with the -moz- prefix, which is why I was asking about using the -webkit- prefix. Looks like they are there for a long time now:

http://lists.w3.org/Archives/Public/www-style/2000Apr/0033.html
------- Comment #8 From 2009-11-23 10:37:51 PST -------
Created an attachment (id=43719) [details]
second draft

Second patch, actually drawing the rounded corners correctly, and also for inline elements, in addition to block ones.
------- Comment #9 From 2009-11-23 10:42:52 PST -------
Why do we want to implement something that isn't even proposed for CSS3? Is there a compelling use case?
------- Comment #10 From 2009-11-25 08:30:50 PST -------
(In reply to comment #9)
> Why do we want to implement something that isn't even proposed for CSS3? Is
> there a compelling use case?

The reason I started working on it was that a client wanted to use rounded outlines to mean 'this link is selected' in a webkit browser of theirs. I see value in having rounded corners for outlines, but I am not able to identify this as something authors are really missing (perhaps because outlines are not used too much either).
------- Comment #11 From 2009-11-25 22:38:51 PST -------
One could fake this using SVG or even an absolute position div with a border-radius, although having webkit-outline-radius is clearly a slicker solution.  Without anyone really asking for this I'm not sure we should bother with the complexity though.
------- Comment #12 From 2009-11-26 00:41:00 PST -------
(In reply to comment #11)
> One could fake this using SVG or even an absolute position div with a
> border-radius, although having webkit-outline-radius is clearly a slicker
> solution.  Without anyone really asking for this I'm not sure we should bother
> with the complexity though.

One of the main uses of outline is for accessibility. I think it automatically discards using SVG...

On the other hand, the div proposal is what seems unnecessary for me. Why adding additional markup for faking something that should be rendered by the browser? I think only few ppl thinked about it when all the border-radius fever started. 
I know maybe it's a pure cosmetique issue, but aren't border-radius, box-shadow, etc... the same? I think the main problem is that not much people knows how to use outline properly, and even it's a common (bad) practice to remove it, but should that move us away from doing things right? I don't think so.
------- Comment #13 From 2009-11-26 06:02:58 PST -------
Hyatt and I have talked about something like this in the past.  Styled form controls (like our styled pop up button) with border-radius, look pretty terrible with the default focus ring.  I think a lot of peole making custom controls end up having to turn off the outline all together.
------- Comment #14 From 2009-11-26 10:10:03 PST -------
(In reply to comment #13)
> Hyatt and I have talked about something like this in the past.  Styled form
> controls (like our styled pop up button) with border-radius, look pretty
> terrible with the default focus ring.  I think a lot of peole making custom
> controls end up having to turn off the outline all together.

This case can be addressed (simply) by following the suggestion in comment #2. If we make that work even for inlines that specify border-radius (even if they don’t have a border), then I think it will also address the use case from comment #10.
------- Comment #15 From 2009-11-26 14:01:11 PST -------
(In reply to comment #14)
> (In reply to comment #13)
> This case can be addressed (simply) by following the suggestion in comment #2.
> If we make that work even for inlines that specify border-radius (even if they
> don’t have a border), then I think it will also address the use case from
> comment #10.

I believe it would, indeed. If there's a consensus, I can try to implement that, instead.
------- Comment #16 From 2009-11-27 14:49:42 PST -------
(From update of attachment 43719 [details])
Rejecting patch 43719 from commit-queue.

Failed to run "WebKitTools/Scripts/check-webkit-style" exit_code: 1
Last 500 characters of output:
ing/style/RenderStyle.cpp
Done processing WebCore/css/CSSParser.h
Done processing WebCore/css/CSSParser.cpp
Done processing WebCore/rendering/RenderBlock.cpp
WebCore/rendering/style/RenderStyle.h:761:  More than one command on the same line  [whitespace/newline] [4]
Done processing WebCore/rendering/style/RenderStyle.h
Done processing WebCore/rendering/style/OutlineValue.h
Done processing WebCore/rendering/RenderObject.cpp
Done processing WebCore/rendering/RenderInline.cpp
Total errors found: 4
------- Comment #17 From 2009-11-27 15:15:31 PST -------
(From update of attachment 43719 [details])
Sorry for the bug spam.  The style-queue is almost done and it's a little too comment-happy at the moment.
------- Comment #18 From 2009-11-30 12:36:16 PST -------
Attachment 43719 [details] did not pass style-queue:

Failed to run "WebKitTools/Scripts/check-webkit-style" exit_code: 1
WebCore/css/CSSStyleSelector.cpp:4686:  Tests for true/false, null/non-null, and zero/non-zero should all be done without equality comparisons.  [readability/comparison_to_zero] [5]
WebCore/css/CSSStyleSelector.cpp:4688:  Tests for true/false, null/non-null, and zero/non-zero should all be done without equality comparisons.  [readability/comparison_to_zero] [5]
WebCore/css/CSSStyleSelector.cpp:4693:  A case label should not be indented, but line up with its switch statement.  [whitespace/indent] [4]
Done processing WebCore/css/CSSStyleSelector.cpp
Done processing WebCore/rendering/style/RenderStyle.cpp
Done processing WebCore/css/CSSParser.h
Done processing WebCore/css/CSSParser.cpp
Done processing WebCore/rendering/RenderBlock.cpp
WebCore/rendering/style/RenderStyle.h:761:  More than one command on the same line  [whitespace/newline] [4]
Done processing WebCore/rendering/style/RenderStyle.h
Done processing WebCore/rendering/style/OutlineValue.h
Done processing WebCore/rendering/RenderObject.cpp
Done processing WebCore/rendering/RenderInline.cpp
Total errors found: 4
------- Comment #19 From 2009-12-28 01:11:51 PST -------
(In reply to comment #15)
> (In reply to comment #14)
> > (In reply to comment #13)
> > This case can be addressed (simply) by following the suggestion in comment #2.
> > If we make that work even for inlines that specify border-radius (even if they
> > don’t have a border), then I think it will also address the use case from
> > comment #10.
> 
> I believe it would, indeed. If there's a consensus, I can try to implement
> that, instead.

I think that sounds like the right thing to do. Therefore marking current patch r-, in favor of the alternate approach to make the outline follow border-radius.
------- Comment #20 From 2009-12-28 01:16:03 PST -------
(From update of attachment 43719 [details])
r- per previous comment
------- Comment #21 From 2010-02-16 13:58:43 PST -------
Any news about this one? I'd love to see this solved :)
------- Comment #22 From 2010-03-29 13:32:45 PST -------
(In reply to comment #21)
> Any news about this one? I'd love to see this solved :)

Same here. If it makes geometrical sense, I would love to see outline radius adjusted per border-radius as proposed in comment #21
------- Comment #23 From 2010-03-29 13:34:41 PST -------
(In reply to comment #22)
> (In reply to comment #21)
> > Any news about this one? I'd love to see this solved :)
> 
> Same here. If it makes geometrical sense, I would love to see outline radius
> adjusted per border-radius as proposed in comment #21

* comment #2 !
------- Comment #24 From 2010-06-13 18:44:02 PST -------
IMHO if this is implemented it would be good if what Firefox has been doing since 1.5 was followed see https://developer.mozilla.org/en/CSS/-moz-outline-radius
------- Comment #25 From 2010-09-08 16:24:06 PST -------
https://bugzilla.mozilla.org/show_bug.cgi?id=593717
(In reply to comment #24)
> IMHO if this is implemented it would be good if what Firefox has been doing

https://bugzilla.mozilla.org/show_bug.cgi?id=593717
"remove -moz-outline-radius and make outlines follow border-radius"
------- Comment #26 From 2012-02-27 11:31:46 PST -------
Sorry for the spam, I was just trying to add myself to the CC List to get notified about the progress of this bug, but I couldn't find a save button (like mozilla's bug tracker), a subscribe button or something similar.
------- Comment #27 From 2012-03-14 20:38:53 PST -------
Marking resolved / wontfix because I believe this bug is obsolete.