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

[David Hyatt]

Excluding out of flow descendants would cause compatibility issues. You cannot always exclude them. If you want to discuss how better to handle the case where you end up with non-overlapping outline rings or outline rings with a lot of blank space, then I would suggest filing a bug on that specifically and having a discussion there. You can't just always exclude out of flow sub-elements or something as basic as:

<a><div style="position:absolute">Hello</div></a>

(which happens all the time)

doesn't work. It's quite common for the outline to originate on an object that doesn't itself paint anything but has out-of-flow descendants that do.

dave
(hyatt at apple.com)

On Feb 27, 2013, at 3:27 PM, Xianzhu Wang <wangxianzhu at chromium.org> wrote:

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