[webkit-dev] Should focus ring include out-of-flow sub-elements?
wangxianzhu at chromium.org
Wed Feb 27 14:44:31 PST 2013
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.
> (hyatt at apple.com)
> On Feb 27, 2013, at 3:27 PM, Xianzhu Wang <wangxianzhu at chromium.org>
> 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?
>> On Feb 27, 2013, at 2:31 PM, Xianzhu Wang <wangxianzhu at chromium.org>
>> The question was raised when I was trying to reduce the test case and fix
>> Consider the following case (we use 'auto' outline style to draw focus
>> <div style="outline: red auto thin; width: 50px; height: 50px">
>> <div style="position: absolute; top: 100px; width: 100px; height: 25px"></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
>> 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
>> 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?
>> webkit-dev mailing list
>> webkit-dev at lists.webkit.org
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the webkit-dev