[Form Control Refresh] Button elements with submit type appear as normal buttons, color well bleeds slightly outside paint rect

lilyspiniolas · lilyspiniolas · commit f6ee2494e651 · 2025-08-11T12:54:18.000-07:00
https://bugs.webkit.org/show_bug.cgi?id=297205 rdar://156546077 Reviewed by Abrar Rahman Protyasha, Megan Gardner, and Wenson Hsieh. During style adjustment and control painting for buttons, detect submit buttons using `RenderTheme::isSubmitButton(const Node*)` instead of attempting to downcast to an input element and checking `HTMLInputElement::isSubmitButton`. All fast/forms/form-control-refresh/* tests which contain an input with type `submit` now contain a button with type `submit` as well to improve test comprehensiveness. Due to antialiasing, color-well controls bleed slightly outside their bounding rect. Clip to the paint rect before performing any painting to resolve the issue. `submit-button-text-color-disabled-state.html` erroneously lacked any text, resulting in the test not actually checking text color. Updated the test & expectation to include text, and to account for the new disabled text-color added in 298318@main. Skip the following tests on iOS since the window inactive appearance is not supported: fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html * LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode-expected.html: * LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html: * LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode-expected.html: * LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html: * LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear.html: * LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches-expected.txt: * LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches.html: * LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive-expected.html: * LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive.html: * LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state-expected.html: * LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state.html: * LayoutTests/platform/ios/TestExpectations: * Source/WebCore/rendering/RenderTheme.cpp: (WebCore::RenderTheme::isSubmitButton const): * Source/WebCore/rendering/RenderTheme.h: * Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm: (WebCore::RenderThemeCocoa::controlSupportsTints const): (WebCore::RenderThemeCocoa::paintButtonForVectorBasedControls): (WebCore::RenderThemeCocoa::paintColorWellDecorationsForVectorBasedControls): (WebCore::RenderThemeCocoa::adjustButtonStyleForVectorBasedControls const): Canonical link: https://commits.webkit.org/298517@main
diff --git a/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode-expected.html b/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode-expected.html
@@ -3,7 +3,7 @@
     <head>
         <meta name="color-scheme" content="dark">
         <style>
-            input {
+            input, button {
                 display: block;
             }
         </style>
@@ -16,6 +16,7 @@
         <input type="range" min="0" max="4" step="1" list="datalist">
         <input type="text" list="datalist">
         <input type="submit" value="Submit">
+        <button type="submit">Submit</button>
         <datalist id="datalist">
             <option>0</option>
             <option>1</option>
diff --git a/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html b/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html
@@ -3,7 +3,7 @@
     <head>
         <meta name="color-scheme" content="dark">
         <style>
-            input {
+            input, button {
                 accent-color: black;
                 display: block;
             }
@@ -17,6 +17,7 @@
         <input type="range" min="0" max="4" step="1" list="datalist">
         <input type="text" list="datalist">
         <input type="submit" value="Submit">
+        <button type="submit">Submit</button>
         <datalist id="datalist">
             <option>0</option>
             <option>1</option>
diff --git a/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode-expected.html b/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode-expected.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <style>
-            input {
+            input, button {
                 display: block;
             }
         </style>
@@ -15,6 +15,7 @@
         <input type="range" min="0" max="4" step="1" list="datalist">
         <input type="text" list="datalist">
         <input type="submit" value="Submit">
+        <button type="submit">Submit</button>
         <datalist id="datalist">
             <option>0</option>
             <option>1</option>
diff --git a/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html b/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <style>
-            input {
+            input, button {
                 accent-color: white;
                 display: block;
             }
@@ -16,6 +16,7 @@
         <input type="range" min="0" max="4" step="1" list="datalist">
         <input type="text" list="datalist">
         <input type="submit" value="Submit">
+        <button type="submit">Submit</button>
         <datalist id="datalist">
             <option>0</option>
             <option>1</option>
diff --git a/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear.html b/LayoutTests/fast/forms/form-control-refresh/accent-color-contrast-submit-does-not-disappear.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
 <html>
     <input type="submit" style="accent-color: white; zoom:5;">
+    <button type="submit" style="accent-color: white; zoom:5;">Submit</button>
 </html>
diff --git a/LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches-expected.txt b/LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches-expected.txt
@@ -3,7 +3,10 @@ This tests that buttons, submit buttons, and select buttons all have the same CS
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS select.style.color == submit.style.color && submit.style.color == button.style.color is true
+PASS select.style.color == input_submit.style.color is true
+PASS select.style.color == input_button.style.color is true
+PASS select.style.color == submit.style.color is true
+PASS select.style.color == button.style.color is true
 PASS successfullyParsed is true
 
 TEST COMPLETE
diff --git a/LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches.html b/LayoutTests/fast/forms/form-control-refresh/button-like-controls-text-color-matches.html
@@ -3,11 +3,16 @@
 <body>
 <script src="../../../resources/js-test.js"></script>
 <input id="select" type="select">
-<input id="submit" type="submit">
-<input id="button" type="button">
+<input id="input_submit" type="submit">
+<input id="input_button" type="button">
+<button id="submit" type="submit"></button>
+<button id="button"></button>
 <script>
     description("This tests that buttons, submit buttons, and select buttons all have the same CSS color.");
-    shouldBeTrue("select.style.color == submit.style.color && submit.style.color == button.style.color");
+    shouldBeTrue("select.style.color == input_submit.style.color");
+    shouldBeTrue("select.style.color == input_button.style.color");
+    shouldBeTrue("select.style.color == submit.style.color");
+    shouldBeTrue("select.style.color == button.style.color");
 </script>
 </body>
 </html>
diff --git a/LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive-expected.html b/LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive-expected.html
@@ -4,6 +4,8 @@
     <p>This tests that the appearance of submit buttons matches normal buttons when the window is inactive.</p>
     <input type="button" value="Submit">
     <input type="button" value="Submit" disabled>
+    <input type="button" value="Submit">
+    <input type="button" value="Submit" disabled>
 </body>
 <script>
 if (window.testRunner)
diff --git a/LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive.html b/LayoutTests/fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive.html
@@ -4,6 +4,8 @@
     <p>This tests that the appearance of submit buttons matches normal buttons when the window is inactive.</p>
     <input type="submit">
     <input type="submit" disabled>
+    <button type="submit">Submit</button>
+    <button type="submit" disabled>Submit</button>
 </body>
 <script>
 if (window.testRunner)
diff --git a/LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state-expected.html b/LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state-expected.html
@@ -2,6 +2,7 @@
 <html>
 <body>
     <p>This tests that the submit button's text color displays with the correct color when the input is disabled.</p>
-    <input type="submit" style="color: rgba(255, 255, 255, 0.8);" disabled>
+    <input type="submit" value="Submit" style="color: rgba(255, 255, 255, 0.6);" disabled>
+    <button type="submit" style="color: rgba(255, 255, 255, 0.6);" disabled>Submit</button>
 </body>
 </html>
diff --git a/LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state.html b/LayoutTests/fast/forms/form-control-refresh/submit-button-text-color-disabled-state.html
@@ -2,6 +2,7 @@
 <html>
 <body>
     <p>This tests that the submit button's text color displays with the correct color when the input is disabled.</p>
-    <input type="submit" disabled>
+    <input type="submit" value="Submit" disabled>
+    <button type="submit" disabled>Submit</button>
 </body>
 </html>
diff --git a/LayoutTests/platform/ios/TestExpectations b/LayoutTests/platform/ios/TestExpectations
@@ -8146,8 +8146,6 @@ fast/css/accent-color/button.html [ ImageOnlyFailure ]
 fast/css/accent-color/date.html [ ImageOnlyFailure ]
 fast/css/accent-color/select.html [ ImageOnlyFailure ]
 fast/forms/form-control-refresh/submit-button-appearance-matches-button-window-inactive.html [ ImageOnlyFailure ]
-fast/forms/ios/form-control-refresh/button/button-type-submit.html [ ImageOnlyFailure ]
-fast/forms/ios/form-control-refresh/color/paint-within-box.html [ ImageOnlyFailure ]
 fast/forms/ios/form-control-refresh/select/decoration-color.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/css-view-transitions/fractional-translation-from-position.html [ ImageOnlyFailure ]
 
@@ -8219,6 +8217,10 @@ webkit.org/b/297122 [ Release ] imported/w3c/web-platform-tests/css/css-shapes/s
 
 webkit.org/b/297141 [ Debug ] fast/eventsource/eventsource-attribute-listeners.html [ Pass Crash ]
 
+# Inactive window appearance for form controls is not supported on iOS.
+fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-light-mode.html [ Skip ]
+fast/forms/form-control-refresh/accent-color-contrast-does-not-affect-inactive-window-dark-mode.html [ Skip ]
+
 webkit.org/b/297144 fast/forms/state-restore-to-non-edited-controls.html [ Pass Timeout ]
 
 webkit.org/b/297218 http/tests/in-app-browser-privacy/sub-frame-redirect-to-non-app-bound-domain-blocked.html [ Failure ]
diff --git a/Source/WebCore/rendering/RenderTheme.cpp b/Source/WebCore/rendering/RenderTheme.cpp
@@ -1224,9 +1224,9 @@ bool RenderTheme::isIndeterminate(const RenderObject& renderer) const
     return input && input->isCheckbox() && input->matchesIndeterminatePseudoClass();
 }
 
-bool RenderTheme::isSubmitButton(const RenderObject& renderer) const
+bool RenderTheme::isSubmitButton(const Node* node) const
 {
-    RefPtr element = dynamicDowncast<HTMLFormControlElement>(renderer.node());
+    RefPtr element = dynamicDowncast<HTMLFormControlElement>(node);
     return element && element->isSubmitButton();
 }
 
diff --git a/Source/WebCore/rendering/RenderTheme.h b/Source/WebCore/rendering/RenderTheme.h
@@ -414,7 +414,7 @@ class RenderTheme {
     bool isWindowActive(const RenderObject&) const;
     bool isChecked(const RenderObject&) const;
     bool isIndeterminate(const RenderObject&) const;
-    bool isSubmitButton(const RenderObject&) const;
+    bool isSubmitButton(const Node*) const;
     bool isEnabled(const RenderObject&) const;
     bool isFocused(const RenderObject&) const;
     bool isPressed(const RenderObject&) const;
diff --git a/Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm b/Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm
@@ -559,7 +559,7 @@ static inline FontSelectionValue cssWeightOfSystemFont(CTFontRef font)
 #if PLATFORM(MAC)
     switch (box.style().usedAppearance()) {
     case StyleAppearance::Button:
-        return isSubmitButton(box);
+        return isSubmitButton(box.node());
     case StyleAppearance::Checkbox:
     case StyleAppearance::Radio:
         return isChecked(box) || isIndeterminate(box);
@@ -1273,7 +1273,7 @@ static RoundedShape shapeForTextAreaOrTextField(const RenderObject& box, const F
 #if PLATFORM(MAC)
         isWindowActive = states.contains(ControlStyle::State::WindowActive);
 #endif
-        if (RefPtr input = dynamicDowncast<HTMLInputElement>(box.node()); input && input->isSubmitButton() && isWindowActive)
+        if (isSubmitButton(box.node()) && isWindowActive)
             backgroundColor = controlTintColorWithContrast(box.style(), styleColorOptions);
         else
             backgroundColor = colorCompositedOverCanvasColor(CSSValueAppleSystemOpaqueSecondaryFill, styleColorOptions);
@@ -1490,6 +1490,10 @@ static void applyPaddingIfNotExplicitlySet(RenderStyle& style, Style::PaddingBox
     if (!formControlRefreshEnabled(box))
         return false;
 
+    auto& context = paintInfo.context();
+    GraphicsContextStateSaver stateSaver(context);
+    context.clip(rect);
+
     const auto zoomFactor = box.style().zoom();
     const auto strokeThickness = 3.f * zoomFactor;
 
@@ -1507,9 +1511,6 @@ static void applyPaddingIfNotExplicitlySet(RenderStyle& style, Style::PaddingBox
     for (int i = 0; i < numColorStops; ++i)
         gradient->addColorStop({ i * 1.0f / (numColorStops - 1), colorStops[i] });
 
-    auto& context = paintInfo.context();
-    GraphicsContextStateSaver stateSaver(context);
-
     FloatRect strokeRect = rect;
     strokeRect.inflate(-strokeThickness / 2.0f);
 
@@ -2387,10 +2388,6 @@ static void adjustInputElementButtonStyleForVectorBasedControls(RenderStyle& sty
     RenderTheme::adjustButtonStyle(style, element);
 #endif
 
-    auto isSubmitButton = false;
-    if (RefPtr input = dynamicDowncast<HTMLInputElement>(element))
-        isSubmitButton = input->isSubmitButton();
-
     auto isEnabled = true;
     if (RefPtr input = dynamicDowncast<HTMLFormControlElement>(element))
         isEnabled = !input->isDisabledFormControl();
@@ -2405,7 +2402,7 @@ static void adjustInputElementButtonStyleForVectorBasedControls(RenderStyle& sty
     };
 
     if (!style.hasExplicitlySetColor()) {
-        if (isSubmitButton)
+        if (isSubmitButton(element))
             adjustStyleForSubmitButton();
         else
             style.setColor(buttonTextColor(styleColorOptions, isEnabled));
