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

David Hyatt hyatt at apple.com
Wed Feb 27 13:12:03 PST 2013


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/797f64d8/attachment.html>


More information about the webkit-dev mailing list