Skip to content

Conversation

@hortont424
Copy link
Contributor

@hortont424 hortont424 commented Oct 21, 2025

32caf7b

Scroll to text fragment highlight style can create unreadable text, especially in dark mode
https://bugs.webkit.org/show_bug.cgi?id=272583
rdar://126539910

Reviewed by Abrar Rahman Protyasha.

Scroll-to-Text-Fragment highlights (and App Highlights) dramatically change
the surrounding color of the highlighted text. In many cases, this is fine, but
on dark pages with light or mid-tone text, the default highlight background
color (yellow) makes it hard to read the text.

Align ourselves with Chrome's behavior: pick a contrasting color, but only
if using the default highlight color; if the author uses ::target-text to style
the background, we leave it alone, assuming they knew what they were doing.

Test: http/tests/scroll-to-text-fragment/highlighted-text-contrast.html,
      http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext.html

* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-expected.html: Added.
* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast.html: Added.
Add a test that ensures that we contrastify highlighted text colors.

* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext-expected-mismatch.html: Added.
* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext.html: Added.
Add a test that ensures that we do NOT contrastify text colors when the author overrides the default style.

* Source/WebCore/rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::calculateHighlightColor const):
* Source/WebCore/rendering/RenderTheme.cpp:
(WebCore::RenderTheme::annotationHighlightBackgroundColor const):
(WebCore::RenderTheme::platformAnnotationHighlightBackgroundColor const):
Rename annotationHighlightColor to annotationHighlightBackgroundColor, to allow
space for our "Foreground" variant.

(WebCore::RenderTheme::annotationHighlightForegroundColor const):
Add annotationHighlightForegroundColor, which is computed by using the CSS
contrast-color() algorithm on the background color.

(WebCore::RenderTheme::annotationHighlightColor const): Deleted.
(WebCore::RenderTheme::platformAnnotationHighlightColor const): Deleted.
* Source/WebCore/rendering/RenderTheme.h:
* Source/WebCore/rendering/StyledMarkedText.cpp:
(WebCore::resolveStyleForMarkedText):
Adopt annotationHighlightForegroundColor for STTF and app highlights, only if ::target-text is not used.

Canonical link: https://commits.webkit.org/301930@main

9166da1

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows Apple Internal
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe 🛠 win ✅ 🛠 ios-apple
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 🧪 win-tests ✅ 🛠 mac-apple
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe ✅ 🛠 vision-apple
🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 vision 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🛠 🧪 merge ✅ 🧪 vision-wk2 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp
✅ 🛠 tv-sim
🛠 watch
✅ 🛠 watch-sim

@hortont424 hortont424 self-assigned this Oct 21, 2025
@hortont424 hortont424 added the WebKit Misc. For miscellaneous bugs in the WebKit framework (and not JavaScriptCore or WebCore). label Oct 21, 2025
@hortont424 hortont424 force-pushed the eng/Scroll-to-text-fragment-highlight-style-can-create-unreadable-text-especially-in-dark-mode branch from ade6616 to 9166da1 Compare October 22, 2025 01:31
@hortont424 hortont424 added the merge-queue Applied to send a pull request to merge-queue label Oct 22, 2025
…specially in dark mode

https://bugs.webkit.org/show_bug.cgi?id=272583
rdar://126539910

Reviewed by Abrar Rahman Protyasha.

Scroll-to-Text-Fragment highlights (and App Highlights) dramatically change
the surrounding color of the highlighted text. In many cases, this is fine, but
on dark pages with light or mid-tone text, the default highlight background
color (yellow) makes it hard to read the text.

Align ourselves with Chrome's behavior: pick a contrasting color, but only
if using the default highlight color; if the author uses ::target-text to style
the background, we leave it alone, assuming they knew what they were doing.

Test: http/tests/scroll-to-text-fragment/highlighted-text-contrast.html,
      http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext.html

* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-expected.html: Added.
* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast.html: Added.
Add a test that ensures that we contrastify highlighted text colors.

* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext-expected-mismatch.html: Added.
* LayoutTests/http/tests/scroll-to-text-fragment/highlighted-text-contrast-targettext.html: Added.
Add a test that ensures that we do NOT contrastify text colors when the author overrides the default style.

* Source/WebCore/rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::calculateHighlightColor const):
* Source/WebCore/rendering/RenderTheme.cpp:
(WebCore::RenderTheme::annotationHighlightBackgroundColor const):
(WebCore::RenderTheme::platformAnnotationHighlightBackgroundColor const):
Rename annotationHighlightColor to annotationHighlightBackgroundColor, to allow
space for our "Foreground" variant.

(WebCore::RenderTheme::annotationHighlightForegroundColor const):
Add annotationHighlightForegroundColor, which is computed by using the CSS
contrast-color() algorithm on the background color.

(WebCore::RenderTheme::annotationHighlightColor const): Deleted.
(WebCore::RenderTheme::platformAnnotationHighlightColor const): Deleted.
* Source/WebCore/rendering/RenderTheme.h:
* Source/WebCore/rendering/StyledMarkedText.cpp:
(WebCore::resolveStyleForMarkedText):
Adopt annotationHighlightForegroundColor for STTF and app highlights, only if ::target-text is not used.

Canonical link: https://commits.webkit.org/301930@main
@webkit-commit-queue webkit-commit-queue force-pushed the eng/Scroll-to-text-fragment-highlight-style-can-create-unreadable-text-especially-in-dark-mode branch from 9166da1 to 32caf7b Compare October 22, 2025 04:53
@webkit-commit-queue
Copy link
Collaborator

Committed 301930@main (32caf7b): https://commits.webkit.org/301930@main

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

@webkit-commit-queue webkit-commit-queue merged commit 32caf7b into WebKit:main Oct 22, 2025
@webkit-commit-queue webkit-commit-queue removed the merge-queue Applied to send a pull request to merge-queue label Oct 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

WebKit Misc. For miscellaneous bugs in the WebKit framework (and not JavaScriptCore or WebCore).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants