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

[Xianzhu Wang]

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130227/0337fae9/attachment.html>