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

[Xianzhu Wang]

Filed wkbug.com/111014



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

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