Bug 238998

Summary:

REGRESSION (Safari 15.4): Focused element doesn't render outline when it has an underline

Product:

WebKit

Reporter:

Matt <matted47>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, changseok, esprehn+autocc, ews-watchlist, glenn, koivisto, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Apple Silicon)

OS:

macOS 11

Attachments:

Description	Flags
Test reduction	none
Patch	none
Patch	none

Matt

Reported 2022-04-08 05:25:04 PDT

When an element has an outline and underline set on it's focus style, the outline isn't rendered. The following won't render the outline, but setting the text-decoration to none does. Tabbing back & forth does sometimes show the outline, which is also sometimes partially left there once focus is moved on. a:focus, button:focus { outline: 6px double blue; text-decoration: underline; }

Attachments
Test reduction (207 bytes, text/html) 2022-04-08 08:51 PDT, alan	no flags	Details
Patch (14.29 KB, patch) 2022-04-08 16:34 PDT, alan	no flags	Details Formatted Diff Diff
Patch (15.92 KB, patch) 2022-04-09 06:32 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Sam Sneddon [:gsnedders]

Comment 1 2022-04-08 07:21:12 PDT

> Tabbing back & forth does sometimes show the outline, which is also sometimes partially left there once focus is moved on. This makes me thinks its a repaint under-invalidation bug?

alan

Comment 2 2022-04-08 08:51:58 PDT

Created attachment 457078 [details] Test reduction

Radar WebKit Bug Importer

Comment 3 2022-04-08 08:52:27 PDT

<rdar://problem/91484512>

alan

Comment 4 2022-04-08 08:53:27 PDT

It looks like ink overflow issue (that we fail to compute the proper ink overflow for outline).

Radar WebKit Bug Importer

Comment 5 2022-04-08 08:53:38 PDT

<rdar://problem/91484572>

alan

Comment 6 2022-04-08 09:55:26 PDT

Interestingly outline does not show up as ink overflow (as opposed to like text-shadow). Instead it needs some special handling (expanding repaint top/bottom etc) which has not been adopted in the modern line layout integration layer.

Alexey Proskuryakov

Comment 7 2022-04-08 14:40:52 PDT

The double outline is visible when using Safari 15.3 on macOS 12.2.1, so this looks like a regression. I can reproduce with Safari 15.4.

alan

Comment 8 2022-04-08 15:09:00 PDT

(In reply to Alexey Proskuryakov from comment #7) > The double outline is visible when using Safari 15.3 on macOS 12.2.1, so > this looks like a regression. I can reproduce with Safari 15.4. Sure it is. -> "which has not been adopted in the modern line layout integration layer."

alan

Comment 9 2022-04-08 15:32:51 PDT

(In reply to zalan from comment #8) > (In reply to Alexey Proskuryakov from comment #7) > > The double outline is visible when using Safari 15.3 on macOS 12.2.1, so > > this looks like a regression. I can reproduce with Safari 15.4. > Sure it is. -> "which has not been adopted in the modern line layout > integration layer." I should have been more explicit about it by adding the regression prefix.

alan

Comment 10 2022-04-08 16:34:27 PDT

Created attachment 457126 [details] Patch

alan

Comment 11 2022-04-09 06:32:36 PDT

Created attachment 457160 [details] Patch

EWS

Comment 12 2022-04-09 10:56:29 PDT

Committed r292679 (249471@main): <https://commits.webkit.org/249471@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 457160 [details].

Note You need to log in before you can comment on or make changes to this bug.