[webkit-dev] Should focus ring include out-of-flow sub-elements?

Xianzhu Wang wangxianzhu at chromium.org
Wed Feb 27 13:27:17 PST 2013

The question is a bit out of the scope of the bug. It is related to how we
understand the standards about focus ring and outline.
Some comments of the bug also suggested to discuss in mailing list.

I should have mentioned the reason of raising the question here at first :)

On Wed, Feb 27, 2013 at 1:12 PM, David Hyatt <hyatt at apple.com> wrote:

> Why can't this discussion just happen in the bug?
> dave
> On Feb 27, 2013, at 2:31 PM, Xianzhu Wang <wangxianzhu at chromium.org>
> wrote:
> Hi,
> The question was raised when I was trying to reduce the test case and fix
> wkbug.com/110895.
> Consider the following case (we use 'auto' outline style to draw focus
> rings):
> <div style="outline: red auto thin; width: 50px; height: 50px">
>   <div style="position: absolute; top: 100px; width: 100px; height: 25px"></div>
> </div>
> The outline will be like:
>  _____
> |     |
> |_____|
>  ____________
> |____________|
> Things would be more complex (and the visual effect would looks to me more
> weird) if we want to draw exact focus ring when the sub-layer is
> transformed.
> CSS2 (http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines) and CSS3 (
> http://dev.w3.org/csswg/css3-ui/#outline) describe outline similarly:
> Outlines may be non-rectangular. For example, if the element is broken
> across several lines, the outline should be an outline or minimum set of
> outlines that encloses all the element's boxes.
> However, CSS3 also mentions:
> User agents should use an algorithm for determining the outline that
> encloses a region appropriate for conveying the concept of focus to the
> user.
> IMHO, the focus ring shown above couldn't convey the concept of focus well
> to the user but seems to confuse the user. In addition, I believe
> sometimes the web page designer doesn't actually want an out-of-flow
> element to be a visual part of the ancestor elements.
> Tested Firefox19 and IE9 about the behavior. They don't support 'auto'
> outline style that WebKit uses to draw focus rings. I tested with 'solid'
> style and real focus rings. Firefox draws a single rectangle enclosing the
> element and all sub-elements. IE draws outline/focus ring around the
> element itself not enclosing sub-elements. (Actually IE's behavior is the
> same as WebKit's when outline-style!='auto' -- WebKit draws normal outlines
> differently from focus rings).
> I feel that things would be simpler (several bugs would be automatically
> fixed) and also clearer to the user/designer by excluding out-of-flow
> sub-elements when drawing focus rings. What are your opinions?
> Thanks,
> Xianzhu
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130227/6dc21b61/attachment.html>

More information about the webkit-dev mailing list