Skip to content

[Form Control Refresh] accent-color should preserve control legibility#48944

Merged
webkit-commit-queue merged 1 commit intoWebKit:mainfrom
lilyspiniolas:eng/99018889
Aug 7, 2025
Merged

[Form Control Refresh] accent-color should preserve control legibility#48944
webkit-commit-queue merged 1 commit intoWebKit:mainfrom
lilyspiniolas:eng/99018889

Conversation

@lilyspiniolas
Copy link
Contributor

@lilyspiniolas lilyspiniolas commented Aug 5, 2025

4f0c0eb

[Form Control Refresh] `accent-color` should preserve control legibility
https://bugs.webkit.org/show_bug.cgi?id=244233
rdar://99018889

Reviewed by Aditya Keerthi.

When form control refresh is enabled, controls with tint color now preserve
legibility regardless of any set `accent-color`. To ensure that all controls can display
the same accent-colors, while also taking into account the fact that some controls
may not be able to use certain accent-colors without extensive changes to other parts
of the contol, the visual accent-color is bounded based on whether light mode or dark
mode is being used. In light mode, accent-colors with a luminance greater than 0.5
will have their luminance lowered to 0.5. In dark mode, accent-colors with a luminance
less than or equal to 0.5 will have their luminance increased to 0.5. For both
operations, the color's hue is preserved.

Additionally, checkboxes and radio buttons will now use a dark indicator in
cases where the accent-color luminance is greater than 0.5.

The threshold of 0.5 luminance was chosen to match AppKit's threshold for switching
indicator colors for checkboxes and radio buttons.

`setInsideDisabledSubmitButton` is now `setInsideSubmitButton` and is applied to
all submit buttons, regardless of enabled/disabled state in order to properly set
the text color based on enablement, the window active state, and the controls tint
color in order to preserve contrast.

Affected controls:
* <input type=range> (sliders)
* <input type=checkbox>
* <input type=radio>
* <input type=text list=somedatalist> (list buttons)
* <input type="submit">
* <progress>

* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-dark-mode-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-dark-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-light-mode-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-light-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode-expected.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode-expected.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear.html: Added.
* Source/WebCore/rendering/RenderTheme.h:
(WebCore::RenderTheme::submitButtonTextColor const):
(WebCore::RenderTheme::disabledSubmitButtonTextColor const): Deleted.
* Source/WebCore/rendering/TextPaintStyle.cpp:
(WebCore::computeTextPaintStyle):
* Source/WebCore/rendering/cocoa/RenderThemeCocoa.h:
* Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm:
(WebCore::foregroundColorForBackgroundColor):
(WebCore::colorWithTargetLuminance):
(WebCore::checkboxRadioIndicatorColorForVectorBasedControls):
(WebCore::adjustCheckboxRadioBackgroundColorDisabledState):
(WebCore::RenderThemeCocoa::checkboxRadioBackgroundColorForVectorBasedControls const):
(WebCore::RenderThemeCocoa::paintCheckboxForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintRadioForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintButtonForVectorBasedControls):
(WebCore::RenderThemeCocoa::adjustButtonStyleForVectorBasedControls const):
(WebCore::RenderThemeCocoa::controlTintColorWithContrast const):
(WebCore::RenderThemeCocoa::paintListButtonForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintProgressBarForVectorBasedControls):
(WebCore::paintSliderTicksForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintSliderTrackForVectorBasedControls):
(WebCore::RenderThemeCocoa::submitButtonTextColor const):
(WebCore::RenderThemeCocoa::disabledSubmitButtonTextColor const): Deleted.
* Source/WebCore/rendering/style/RenderStyle.cpp:
(WebCore::rareInheritedDataChangeRequiresRepaint):
* Source/WebCore/rendering/style/RenderStyle.h:
* Source/WebCore/rendering/style/RenderStyleInlines.h:
(WebCore::RenderStyle::insideSubmitButton const):
(WebCore::RenderStyle::insideDisabledSubmitButton const): Deleted.
* Source/WebCore/rendering/style/RenderStyleSetters.h:
(WebCore::RenderStyle::setInsideSubmitButton):
(WebCore::RenderStyle::setInsideDisabledSubmitButton): Deleted.
* Source/WebCore/rendering/style/StyleRareInheritedData.cpp:
(WebCore::StyleRareInheritedData::StyleRareInheritedData):
(WebCore::StyleRareInheritedData::operator== const):
(WebCore::StyleRareInheritedData::dumpDifferences const):
* Source/WebCore/rendering/style/StyleRareInheritedData.h:

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

0a8e48e

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
🧪 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
🧪 vision-wk2 🧪 mac-intel-wk2 🛠 playstation
✅ 🛠 🧪 unsafe-merge ✅ 🛠 tv ✅ 🛠 mac-safer-cpp
🛠 tv-sim
🛠 watch
🛠 watch-sim

@lilyspiniolas lilyspiniolas self-assigned this Aug 5, 2025
@lilyspiniolas lilyspiniolas added the CSS Cascading Style Sheets implementation label Aug 5, 2025
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 5, 2025
@lilyspiniolas lilyspiniolas removed the merging-blocked Applied to prevent a change from being merged label Aug 5, 2025
Copy link
Member

@nt1m nt1m left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests have inconsistent indentation. I typically indent everything except the html tag

@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 5, 2025
@lilyspiniolas lilyspiniolas removed the merging-blocked Applied to prevent a change from being merged label Aug 5, 2025
@lilyspiniolas lilyspiniolas requested review from nt1m and pxlcoder August 5, 2025 19:30
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 5, 2025
@lilyspiniolas lilyspiniolas removed the merging-blocked Applied to prevent a change from being merged label Aug 6, 2025
@lilyspiniolas lilyspiniolas added the unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing label Aug 7, 2025
https://bugs.webkit.org/show_bug.cgi?id=244233
rdar://99018889

Reviewed by Aditya Keerthi.

When form control refresh is enabled, controls with tint color now preserve
legibility regardless of any set `accent-color`. To ensure that all controls can display
the same accent-colors, while also taking into account the fact that some controls
may not be able to use certain accent-colors without extensive changes to other parts
of the contol, the visual accent-color is bounded based on whether light mode or dark
mode is being used. In light mode, accent-colors with a luminance greater than 0.5
will have their luminance lowered to 0.5. In dark mode, accent-colors with a luminance
less than or equal to 0.5 will have their luminance increased to 0.5. For both
operations, the color's hue is preserved.

Additionally, checkboxes and radio buttons will now use a dark indicator in
cases where the accent-color luminance is greater than 0.5.

The threshold of 0.5 luminance was chosen to match AppKit's threshold for switching
indicator colors for checkboxes and radio buttons.

`setInsideDisabledSubmitButton` is now `setInsideSubmitButton` and is applied to
all submit buttons, regardless of enabled/disabled state in order to properly set
the text color based on enablement, the window active state, and the controls tint
color in order to preserve contrast.

Affected controls:
* <input type=range> (sliders)
* <input type=checkbox>
* <input type=radio>
* <input type=text list=somedatalist> (list buttons)
* <input type="submit">
* <progress>

* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-dark-mode-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-dark-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-light-mode-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-checkbox-radio-do-not-disappear-light-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode-expected.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode-expected.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear-expected-mismatch.html: Added.
* LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear.html: Added.
* Source/WebCore/rendering/RenderTheme.h:
(WebCore::RenderTheme::submitButtonTextColor const):
(WebCore::RenderTheme::disabledSubmitButtonTextColor const): Deleted.
* Source/WebCore/rendering/TextPaintStyle.cpp:
(WebCore::computeTextPaintStyle):
* Source/WebCore/rendering/cocoa/RenderThemeCocoa.h:
* Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm:
(WebCore::foregroundColorForBackgroundColor):
(WebCore::colorWithTargetLuminance):
(WebCore::checkboxRadioIndicatorColorForVectorBasedControls):
(WebCore::adjustCheckboxRadioBackgroundColorDisabledState):
(WebCore::RenderThemeCocoa::checkboxRadioBackgroundColorForVectorBasedControls const):
(WebCore::RenderThemeCocoa::paintCheckboxForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintRadioForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintButtonForVectorBasedControls):
(WebCore::RenderThemeCocoa::adjustButtonStyleForVectorBasedControls const):
(WebCore::RenderThemeCocoa::controlTintColorWithContrast const):
(WebCore::RenderThemeCocoa::paintListButtonForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintProgressBarForVectorBasedControls):
(WebCore::paintSliderTicksForVectorBasedControls):
(WebCore::RenderThemeCocoa::paintSliderTrackForVectorBasedControls):
(WebCore::RenderThemeCocoa::submitButtonTextColor const):
(WebCore::RenderThemeCocoa::disabledSubmitButtonTextColor const): Deleted.
* Source/WebCore/rendering/style/RenderStyle.cpp:
(WebCore::rareInheritedDataChangeRequiresRepaint):
* Source/WebCore/rendering/style/RenderStyle.h:
* Source/WebCore/rendering/style/RenderStyleInlines.h:
(WebCore::RenderStyle::insideSubmitButton const):
(WebCore::RenderStyle::insideDisabledSubmitButton const): Deleted.
* Source/WebCore/rendering/style/RenderStyleSetters.h:
(WebCore::RenderStyle::setInsideSubmitButton):
(WebCore::RenderStyle::setInsideDisabledSubmitButton): Deleted.
* Source/WebCore/rendering/style/StyleRareInheritedData.cpp:
(WebCore::StyleRareInheritedData::StyleRareInheritedData):
(WebCore::StyleRareInheritedData::operator== const):
(WebCore::StyleRareInheritedData::dumpDifferences const):
* Source/WebCore/rendering/style/StyleRareInheritedData.h:

Canonical link: https://commits.webkit.org/298318@main
@webkit-commit-queue
Copy link
Collaborator

Committed 298318@main (4f0c0eb): https://commits.webkit.org/298318@main

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

@webkit-commit-queue webkit-commit-queue merged commit 4f0c0eb into WebKit:main Aug 7, 2025
@webkit-commit-queue webkit-commit-queue removed the unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing label Aug 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CSS Cascading Style Sheets implementation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants