Repository: WebKit/WebKit
Pull request #42101: Force field-sizing to fixed when control autofilled
Author: login: lukewarlow
Labels: name: Forms
description: For bugs specific to form elements (checkboxes, buttons, text fields, etc.)
Created: 2025-03-07T19:54:26Z | Merged: 2025-03-08T07:38:43Z

#### e34b3c0192c2aa42e5c211587029a4dc2fd6e0e7
<pre>
Force field-sizing to fixed when control autofilled
<a href="https://bugs.webkit.org/show_bug.cgi?id=269126">https://bugs.webkit.org/show_bug.cgi?id=269126</a>

Reviewed by Tim Nguyen.

Add a UA style rule to force field-sizing to fixed when an element is autofilled.

* LayoutTests/fast/forms/text/text-field-sizing-autofill-expected.txt: Added.
* LayoutTests/fast/forms/text/text-field-sizing-autofill.html: Added.
* Source/WebCore/css/html.css:
(:autofill):
* Source/WebCore/css/parser/CSSParserContext.cpp:
(WebCore::applyUASheetBehaviorsToContext):

Canonical link: <a href="https://commits.webkit.org/291833@main">https://commits.webkit.org/291833@main</a>
</pre>
<!--EWS-Status-Bubble-Start-->
https://github.com/WebKit/WebKit/commit/26d5ef3b1fff2900736f95203a9a777b88293e96

| Misc | iOS, visionOS, tvOS & watchOS  | macOS  | Linux |  Windows |
| ----- | ---------------------- | ------- |  ----- |  --------- |
| [✅ 🧪 style](https://ews-build.webkit.org/#/builders/38/builds/94070 "Passed style check") | [✅ 🛠 ios](https://ews-build.webkit.org/#/builders/131/builds/13657 "Built successfully") | [✅ 🛠 mac](https://ews-build.webkit.org/#/builders/138/builds/3400 "Built successfully") | [✅ 🛠 wpe](https://ews-build.webkit.org/#/builders/5/builds/99079 "Built successfully") | [✅ 🛠 win](https://ews-build.webkit.org/#/builders/59/builds/44597 "Built successfully") 
| [✅ 🧪 bindings](https://ews-build.webkit.org/#/builders/9/builds/96120 "Passed tests") | [✅ 🛠 ios-sim](https://ews-build.webkit.org/#/builders/130/builds/13957 "Built successfully") | [✅ 🛠 mac-AS-debug](https://ews-build.webkit.org/#/builders/123/builds/22087 "Built successfully") | [✅ 🧪 wpe-wk2](https://ews-build.webkit.org/#/builders/34/builds/71771 "Passed tests") | [✅ 🧪 win-tests](https://ews-build.webkit.org/#/builders/60/builds/29115 "Passed tests") 
| [✅ 🧪 webkitperl](https://ews-build.webkit.org/#/builders/11/builds/97072 "Passed tests") | [✅ 🧪 ios-wk2](https://ews-build.webkit.org/#/builders/132/builds/10352 "Passed tests") | [✅ 🧪 api-mac](https://ews-build.webkit.org/#/builders/18/builds/84950 "Passed tests") | [✅ 🧪 api-wpe](https://ews-build.webkit.org/#/builders/41/builds/52110 "Passed tests") | 
| | [✅ 🧪 ios-wk2-wpt](https://ews-build.webkit.org/#/builders/133/builds/10034 "Passed tests") | [✅ 🧪 mac-wk1](https://ews-build.webkit.org/#/builders/135/builds/2622 "Passed tests") | [✅ 🛠 wpe-cairo](https://ews-build.webkit.org/#/builders/65/builds/43913 "Built successfully") | 
| | [✅ 🧪 api-ios](https://ews-build.webkit.org/#/builders/13/builds/80283 "Passed tests") | [✅ 🧪 mac-wk2](https://ews-build.webkit.org/#/builders/136/builds/2709 "Passed tests") | [✅ 🛠 gtk](https://ews-build.webkit.org/#/builders/2/builds/101120 "Built successfully") | 
| | [✅ 🛠 vision](https://ews-build.webkit.org/#/builders/128/builds/21122 "Built successfully") | [⏳ 🧪 mac-AS-debug-wk2](https://ews-build.webkit.org/#/builders/macOS-Sequoia-Debug-WK2-Tests-EWS "Waiting to run tests") | [✅ 🧪 gtk-wk2](https://ews-build.webkit.org/#/builders/1/builds/80779 "Passed tests") | 
| | [✅ 🛠 vision-sim](https://ews-build.webkit.org/#/builders/121/builds/21374 "Built successfully") | [✅ 🧪 mac-wk2-stress](https://ews-build.webkit.org/#/builders/8/builds/80948 "Passed tests") | [✅ 🧪 api-gtk](https://ews-build.webkit.org/#/builders/21/builds/80149 "Passed tests") | 
| [✅ 🛠 🧪 merge](https://ews-build.webkit.org/#/builders/19/builds/19998 "Built successfully and passed tests") | [✅ 🧪 vision-wk2](https://ews-build.webkit.org/#/builders/126/builds/24697 "Passed tests") | [✅ 🧪 mac-intel-wk2](https://ews-build.webkit.org/#/builders/137/builds/2062 "Passed tests") | [✅ 🛠 playstation](https://ews-build.webkit.org/#/builders/134/builds/14284 "Built successfully") | 
| | [✅ 🛠 tv](https://ews-build.webkit.org/#/builders/127/builds/21106 "Built successfully") | [✅ 🛠 mac-safer-cpp](https://ews-build.webkit.org/#/builders/120/builds/26285 "Built successfully") | | 
| | [✅ 🛠 tv-sim](https://ews-build.webkit.org/#/builders/125/builds/20793 "Built successfully") | | | 
| | [✅ 🛠 watch](https://ews-build.webkit.org/#/builders/129/builds/24253 "Built successfully") | | | 
| | [✅ 🛠 watch-sim](https://ews-build.webkit.org/#/builders/124/builds/22534 "Built successfully") | | | 
<!--EWS-Status-Bubble-End-->


Diff:
diff --git a/LayoutTests/fast/forms/text/text-field-sizing-autofill-expected.txt b/LayoutTests/fast/forms/text/text-field-sizing-autofill-expected.txt
new file mode 100644
index 000000000000..fd0432a5fffe
--- /dev/null
+++ b/LayoutTests/fast/forms/text/text-field-sizing-autofill-expected.txt
@@ -0,0 +1,6 @@
+
+
+PASS An autofilled text input should have fixed field sizing
+PASS An autofilled search input should have fixed field sizing
+PASS An autofilled number input should have fixed field sizing
+
diff --git a/LayoutTests/fast/forms/text/text-field-sizing-autofill.html b/LayoutTests/fast/forms/text/text-field-sizing-autofill.html
new file mode 100644
index 000000000000..6fb402758b57
--- /dev/null
+++ b/LayoutTests/fast/forms/text/text-field-sizing-autofill.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+input {
+  border: none;
+  padding: 0px;
+  field-sizing: content;
+}
+.fixed {
+    field-sizing: fixed;
+}
+input::-webkit-search-cancel-button {
+  display: none;
+}
+input::-webkit-inner-spin-button {
+  display: none;
+}
+</style>
+<input id="text">
+<input id="search" type="search">
+<input id="number" type="number">
+<input id="fixed" class="fixed">
+<script>
+const fixedWidth = getComputedStyle(fixed).width;
+
+test(() => {
+  assert_equals(getComputedStyle(text).fieldSizing, 'content');
+  internals.setAutofilled(text, true);
+  assert_equals(getComputedStyle(text).fieldSizing, 'fixed');
+  assert_equals(getComputedStyle(text).width, fixedWidth);
+}, 'An autofilled text input should have fixed field sizing');
+test(() => {
+  assert_equals(getComputedStyle(search).fieldSizing, 'content');
+  internals.setAutofilled(search, true);
+  assert_equals(getComputedStyle(search).fieldSizing, 'fixed');
+  assert_equals(getComputedStyle(search).width, fixedWidth);
+}, 'An autofilled search input should have fixed field sizing');
+test(() => {
+  assert_equals(getComputedStyle(number).fieldSizing, 'content');
+  internals.setAutofilled(number, true);
+  assert_equals(getComputedStyle(number).fieldSizing, 'fixed');
+  assert_equals(getComputedStyle(number).width, fixedWidth);
+}, 'An autofilled number input should have fixed field sizing');
+</script>
\ No newline at end of file
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
index 8720cf671696..d8383a8273dd 100644
--- a/Source/WebCore/css/html.css
+++ b/Source/WebCore/css/html.css
@@ -853,6 +853,10 @@ input:-webkit-autofill, input:-webkit-autofill-strong-password, input:-webkit-au
     color: #000000 !important;
 }
 
+:autofill {
+    field-sizing: fixed !important;
+}
+
 input:is([type="radio"], [type="checkbox"]) {
     margin: 3px 2px;
     box-sizing: border-box;
diff --git a/Source/WebCore/css/parser/CSSParserContext.cpp b/Source/WebCore/css/parser/CSSParserContext.cpp
index aa07c87247ab..ebb47b7a5aa6 100644
--- a/Source/WebCore/css/parser/CSSParserContext.cpp
+++ b/Source/WebCore/css/parser/CSSParserContext.cpp
@@ -60,6 +60,7 @@ static void applyUASheetBehaviorsToContext(CSSParserContext& context)
     context.propertySettings.cssCounterStyleAtRulesEnabled = true;
     context.propertySettings.supportHDRDisplayEnabled = true;
     context.propertySettings.viewTransitionsEnabled = true;
+    context.propertySettings.cssFieldSizingEnabled = true;
 #if HAVE(CORE_MATERIAL)
     context.propertySettings.useSystemAppearance = true;
 #endif


Reviews:
user: login: nt1m
body: Makes sense for privacy, is there some spec text for this?
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-07T19:59:55Z
user: login: nt1m
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T20:24:50Z
user: login: lukewarlow
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T20:26:12Z

Review comments:
diff_hunk: @@ -853,6 +853,10 @@ input:-webkit-autofill, input:-webkit-autofill-strong-password, input:-webkit-au
     color: #000000 !important;
 }
 
+:-webkit-autofill {
path: Source/WebCore/css/html.css
user: login: nt1m
body: ```suggestion
:autofill {
```

WebKit supports the unprefixed version fwiw: https://searchfox.org/wubkat/rev/cff04f81eb10bd7f7b8fad6204252122612c94e6/Source/WebCore/css/CSSPseudoSelectors.json#87
created_at: 2025-03-07T20:24:50Z
author_association: MEMBER
diff_hunk: @@ -853,6 +853,10 @@ input:-webkit-autofill, input:-webkit-autofill-strong-password, input:-webkit-au
     color: #000000 !important;
 }
 
+:-webkit-autofill {
path: Source/WebCore/css/html.css
user: login: lukewarlow
body: Ah I didn't realise that, just saw the prefix in the stylesheet and assumed it didn't. I'll swap it over.
created_at: 2025-03-07T20:26:12Z
author_association: MEMBER

PR comments:
user: login: webkit-early-warning-system
created_at: 2025-03-07T19:54:35Z
body: EWS run on previous version of this PR (hash https://github.com/WebKit/WebKit/commit/d35d4f436894c860df4285e093c48c9e7ead82f7)<details>

| Misc | iOS, visionOS, tvOS & watchOS  | macOS  | Linux |  Windows |
| ----- | ---------------------- | ------- |  ----- |  --------- |
| [✅ 🧪 style](https://ews-build.webkit.org/#/builders/38/builds/94066 "Passed style check") | [  ~~🛠 ios~~](https://ews-build.webkit.org/#/builders/131/builds/13653 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [✅ 🛠 mac](https://ews-build.webkit.org/#/builders/138/builds/3396 "Built successfully") | [  ~~🛠 wpe~~](https://ews-build.webkit.org/#/builders/5/builds/99075 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [  ~~🛠 win~~](https://ews-build.webkit.org/#/builders/59/builds/44593 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") 
| [✅ 🧪 bindings](https://ews-build.webkit.org/#/builders/9/builds/96116 "Passed tests") | [✅ 🛠 ios-sim](https://ews-build.webkit.org/#/builders/130/builds/13949 "Built successfully") | [✅ 🛠 mac-AS-debug](https://ews-build.webkit.org/#/builders/123/builds/22083 "Built successfully") | [  ~~🧪 wpe-wk2~~](https://ews-build.webkit.org/#/builders/5/builds/99075 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [  ~~🧪 win-tests~~](https://ews-build.webkit.org/#/builders/59/builds/44593 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") 
| [✅ 🧪 webkitperl](https://ews-build.webkit.org/#/builders/11/builds/97068 "Passed tests") | [⏳ 🧪 ios-wk2](https://ews-build.webkit.org/#/builders/iOS-18-Simulator-WK2-Tests-EWS "Waiting to run tests") | [⏳ 🧪 api-mac](https://ews-build.webkit.org/#/builders/API-Tests-macOS-EWS "Waiting to run tests") | [  ~~🧪 api-wpe~~](https://ews-build.webkit.org/#/builders/5/builds/99075 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | 
| | [⏳ 🧪 ios-wk2-wpt](https://ews-build.webkit.org/#/builders/iOS-18-Simulator-WPT-WK2-Tests-EWS "Waiting to run tests") | [⏳ 🧪 mac-wk1](https://ews-build.webkit.org/#/builders/macOS-Sonoma-Release-WK1-Tests-EWS "Waiting to run tests") | [  ~~🛠 wpe-cairo~~](https://ews-build.webkit.org/#/builders/65/builds/43909 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | 
| | [⏳ 🧪 api-ios](https://ews-build.webkit.org/#/builders/API-Tests-iOS-Simulator-EWS "Waiting to run tests") | [  ~~🧪 mac-wk2~~](https://ews-build.webkit.org/#/builders/136/builds/2704 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [✅ 🛠 gtk](https://ews-build.webkit.org/#/builders/2/builds/101116 "Built successfully") | 
| | [  ~~🛠 vision~~](https://ews-build.webkit.org/#/builders/128/builds/21118 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [  ~~🧪 mac-AS-debug-wk2~~](https://ews-build.webkit.org/#/builders/122/builds/15386 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [⏳ 🧪 gtk-wk2](https://ews-build.webkit.org/#/builders/GTK-WK2-Tests-EWS "Waiting to run tests") | 
| | [  ~~🛠 vision-sim~~](https://ews-build.webkit.org/#/builders/121/builds/21370 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [  ~~🧪 mac-wk2-stress~~](https://ews-build.webkit.org/#/builders/8/builds/80943 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [✅ 🧪 api-gtk](https://ews-build.webkit.org/#/builders/21/builds/80143 "Passed tests") | 
| | [⏳ 🧪 vision-wk2 ](https://ews-build.webkit.org/#/builders/visionOS-2-Simulator-WK2-Tests-EWS "Waiting in queue, processing has not started yet") | [⏳ 🧪 mac-intel-wk2](https://ews-build.webkit.org/#/builders/macOS-Sonoma-Release-WK2-Intel-Tests-EWS "Waiting to run tests") | [  ~~🛠 playstation~~](https://ews-build.webkit.org/#/builders/134/builds/14280 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | 
| | [  ~~🛠 tv~~](https://ews-build.webkit.org/#/builders/127/builds/21102 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | [  ~~🛠 mac-safer-cpp~~](https://ews-build.webkit.org/#/builders/120/builds/26281 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | | 
| | [  ~~🛠 tv-sim~~](https://ews-build.webkit.org/#/builders/125/builds/20789 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | | | 
| | [  ~~🛠 watch~~](https://ews-build.webkit.org/#/builders/129/builds/24249 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | | | 
| | [  ~~🛠 watch-sim~~](https://ews-build.webkit.org/#/builders/124/builds/22530 "The change is no longer eligible for processing. Commit was outdated when EWS attempted to process it.") | | | </details>
author_association: COLLABORATOR
user: login: lukewarlow
created_at: 2025-03-07T20:19:41Z
body: Yes it's in the UA stylesheet in HTML: https://html.spec.whatwg.org/multipage/rendering.html#form-controls
author_association: MEMBER
user: login: webkit-early-warning-system
created_at: 2025-03-07T20:27:12Z
body: EWS run on current version of this PR (hash https://github.com/WebKit/WebKit/commit/26d5ef3b1fff2900736f95203a9a777b88293e96)<details>

| Misc | iOS, visionOS, tvOS & watchOS  | macOS  | Linux |  Windows |
| ----- | ---------------------- | ------- |  ----- |  --------- |
| [✅ 🧪 style](https://ews-build.webkit.org/#/builders/38/builds/94070 "Passed style check") | [✅ 🛠 ios](https://ews-build.webkit.org/#/builders/131/builds/13657 "Built successfully") | [✅ 🛠 mac](https://ews-build.webkit.org/#/builders/138/builds/3400 "Built successfully") | [✅ 🛠 wpe](https://ews-build.webkit.org/#/builders/5/builds/99079 "Built successfully") | [✅ 🛠 win](https://ews-build.webkit.org/#/builders/59/builds/44597 "Built successfully") 
| [✅ 🧪 bindings](https://ews-build.webkit.org/#/builders/9/builds/96120 "Passed tests") | [✅ 🛠 ios-sim](https://ews-build.webkit.org/#/builders/130/builds/13957 "Built successfully") | [✅ 🛠 mac-AS-debug](https://ews-build.webkit.org/#/builders/123/builds/22087 "Built successfully") | [✅ 🧪 wpe-wk2](https://ews-build.webkit.org/#/builders/34/builds/71771 "Passed tests") | [✅ 🧪 win-tests](https://ews-build.webkit.org/#/builders/60/builds/29115 "Passed tests") 
| [✅ 🧪 webkitperl](https://ews-build.webkit.org/#/builders/11/builds/97072 "Passed tests") | [✅ 🧪 ios-wk2](https://ews-build.webkit.org/#/builders/132/builds/10352 "Passed tests") | [✅ 🧪 api-mac](https://ews-build.webkit.org/#/builders/18/builds/84950 "Passed tests") | [✅ 🧪 api-wpe](https://ews-build.webkit.org/#/builders/41/builds/52110 "Passed tests") | 
| | [✅ 🧪 ios-wk2-wpt](https://ews-build.webkit.org/#/builders/133/builds/10034 "Passed tests") | [✅ 🧪 mac-wk1](https://ews-build.webkit.org/#/builders/135/builds/2622 "Passed tests") | [✅ 🛠 wpe-cairo](https://ews-build.webkit.org/#/builders/65/builds/43913 "Built successfully") | 
| | [✅ 🧪 api-ios](https://ews-build.webkit.org/#/builders/13/builds/80283 "Passed tests") | [✅ 🧪 mac-wk2](https://ews-build.webkit.org/#/builders/136/builds/2709 "Passed tests") | [✅ 🛠 gtk](https://ews-build.webkit.org/#/builders/2/builds/101120 "Built successfully") | 
| | [✅ 🛠 vision](https://ews-build.webkit.org/#/builders/128/builds/21122 "Built successfully") | [⏳ 🧪 mac-AS-debug-wk2](https://ews-build.webkit.org/#/builders/macOS-Sequoia-Debug-WK2-Tests-EWS "Waiting to run tests") | [✅ 🧪 gtk-wk2](https://ews-build.webkit.org/#/builders/1/builds/80779 "Passed tests") | 
| | [✅ 🛠 vision-sim](https://ews-build.webkit.org/#/builders/121/builds/21374 "Built successfully") | [✅ 🧪 mac-wk2-stress](https://ews-build.webkit.org/#/builders/8/builds/80948 "Passed tests") | [✅ 🧪 api-gtk](https://ews-build.webkit.org/#/builders/21/builds/80149 "Passed tests") | 
| [✅ 🛠 🧪 merge](https://ews-build.webkit.org/#/builders/19/builds/19998 "Built successfully and passed tests") | [✅ 🧪 vision-wk2](https://ews-build.webkit.org/#/builders/126/builds/24697 "Passed tests") | [✅ 🧪 mac-intel-wk2](https://ews-build.webkit.org/#/builders/137/builds/2062 "Passed tests") | [✅ 🛠 playstation](https://ews-build.webkit.org/#/builders/134/builds/14284 "Built successfully") | 
| | [✅ 🛠 tv](https://ews-build.webkit.org/#/builders/127/builds/21106 "Built successfully") | [✅ 🛠 mac-safer-cpp](https://ews-build.webkit.org/#/builders/120/builds/26285 "Built successfully") | | 
| | [✅ 🛠 tv-sim](https://ews-build.webkit.org/#/builders/125/builds/20793 "Built successfully") | | | 
| | [✅ 🛠 watch](https://ews-build.webkit.org/#/builders/129/builds/24253 "Built successfully") | | | 
| | [✅ 🛠 watch-sim](https://ews-build.webkit.org/#/builders/124/builds/22534 "Built successfully") | | | </details>
author_association: COLLABORATOR
user: login: webkit-commit-queue
created_at: 2025-03-08T07:38:42Z
body: Committed 291833@main (e34b3c0192c2): <https://commits.webkit.org/291833@main>

Reviewed commits have been landed. Closing PR #42101 and removing active labels.
author_association: COLLABORATOR