Bug 205531 – :focus pseudo class fails to repaint on a shadow host when focus moves from outside the page inside a shadow tree

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Russell Bicknell]

Created attachment 386276 [details]
A page with a focusable input inside a shadow root that delegates focus.

Safari Technology Preview, Release 96 (Safari 13.1, WebKit 14609.1.9.7)

When some part of the Safari UI outside of the web content area is focused and then focus is moved directly to an element that is a descendant of a shadow root that delegates focus, CSS rules using `:focus` to select the shadow root's host don't apply.


Steps to reproduce:

1. Open the attached file "WebKit-delegatesFocus-focusSelector.html". The input inside the div should become focused and the div should have a magenta border.

2. Click somewhere on the page outside of the box to cause it to lose focus, the border should become black.

3. Click the URL bar to focus it.

4. Press the tab key (once). Or, click inside the black box (either inside or outside the contained input). The input inside the shadow root should now have focus.

The input inside the div with the shadow root becomes focused but the CSS rule with the `:host(:focus)` selector does not apply. (The border of the host div should become magenta, but doesn't.)


If you change System Preferences > Keyboard > Shortcuts > Full Keyboard Access to "All controls", you'll be able to tab through the other buttons in the toolbar. Using the tab key to move focus from something other than the URL bar to the input or clicking on the box still reproduces this behavior (i.e. this isn't specific to the URL bar).

Also, if you add an input before the div in that page, then tab from the URL bar to that new input and then to the input inside the shadow root, the `:host(:focus)` rule *does* apply correctly, while moving focus directly from the URL bar to the input in the shadow root by clicking still does not.


Another way to reproduce this is:

1. Open the attached file "WebKit-delegatesFocus-focusSelector.html".

2. Open the inspector and focus something in it (for example, the console input).

3. Close the inspector using the keyboard shortcut.

4. Refresh the page.

The input will be focused by the script but the `:host(:focus)` rule still doesn't apply.

[Russell Bicknell]

Created attachment 386278 [details]
screen recording of repro

[Russell Bicknell]

Chrome has the same problem but only when using the keyboard to move focus: https://bugs.chromium.org/p/chromium/issues/detail?id=1014091#c3

[Radar WebKit Bug Importer]

<rdar://problem/58138166>

[Ryosuke Niwa]

I have a fix for this bug but I'm having a difficulty writing a test.

[Ryosuke Niwa]

Pull request: https://github.com/WebKit/WebKit/pull/2047

[EWS]

Committed 252261@main (e92078a985a7): <https://commits.webkit.org/252261@main>

Reviewed commits have been landed. Closing PR #2047 and removing active labels.