[iOS] Search inputs with '-webkit-appearance: textfield' should have …

…a textfield background color https://bugs.webkit.org/show_bug.cgi?id=229883 rdar://82146288 Reviewed by Tim Horton. Source/WebCore: In iOS 15, search inputs have a gray background color by default. Some sites, such as booking.com, request that the input appear like a textfield, by specifying '-webkit-appearance: textfield', over the default 'searchfield'. This request was previously ignored, but there was no observable difference since search inputs and text inputs had the same default styling before iOS 15. Now that the default styling is different, the appearance should be honored, so that sites get the background color they expect. Test: fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html * rendering/RenderThemeIOS.h: * rendering/RenderThemeIOS.mm: (WebCore::RenderThemeIOS::adjustTextFieldStyle const): Exclude any elements that have a textfield appearance by default from the background color adjustment, so that their background color can be customized. LayoutTests: * fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt: Added. * fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html: Added. * platform/ios/fast/css/input-search-padding-expected.txt: Rebaseline. Canonical link: https://commits.webkit.org/241704@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@282451 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Sep 15, 2021 · 4422b35 · 4422b35
1 parent 52e1d47
commit 4422b35
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 1 deletion.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2021-09-15  Aditya Keerthi  <akeerthi@apple.com>
+
+        [iOS] Search inputs with '-webkit-appearance: textfield' should have a textfield background color
+        https://bugs.webkit.org/show_bug.cgi?id=229883
+        rdar://82146288
+
+        Reviewed by Tim Horton.
+
+        * fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt: Added.
+        * fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html: Added.
+        * platform/ios/fast/css/input-search-padding-expected.txt: Rebaseline.
+
 2021-09-15  Martin Robinson  <mrobinson@webkit.org>
 
         offsetLeft on display:inline element in vertical-rl parent can return a negative number

diff --git a/...s/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt b/...s/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt
@@ -0,0 +1,11 @@
+Test that setting -webkit-appearance: textfield on a search input sets the background color to match the text input background color.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS textBackgroundColor is "rgb(255, 255, 255)"
+PASS searchBackgroundColor is textBackgroundColor
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html b/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <script src="../../../../../resources/js-test.js"></script>
+    <style>
+    #search {
+        -webkit-appearance: textfield;
+    }
+    </style>
+</head>
+<body>
+<input type="search" id="search">
+<input type="text" id="text">
+</body>
+<script>
+
+description("Test that setting -webkit-appearance: textfield on a search input sets the background color to match the text input background color.");
+
+searchBackgroundColor = window.getComputedStyle(search).backgroundColor;
+textBackgroundColor = window.getComputedStyle(text).backgroundColor;
+shouldBeEqualToString("textBackgroundColor", "rgb(255, 255, 255)");
+shouldBe("searchBackgroundColor", "textBackgroundColor");
+
+</script>
+</html>
diff --git a/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt b/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt
@@ -11,7 +11,7 @@ layer at (0,0) size 800x600
       RenderBR {BR} at (540,35) size 1x19
       RenderTextControl {INPUT} at (2,95) size 537x89 [bgcolor=#FFFFFF] [border: (1px solid #3C3C4399)]
       RenderBR {BR} at (540,128) size 1x19
-      RenderTextControl {INPUT} at (2,186) size 253x25 [bgcolor=#EEEEEF] [border: (1px solid #FFFFFF)]
+      RenderTextControl {INPUT} at (2,186) size 253x25 [bgcolor=#FFFFFF] [border: (1px solid #FFFFFF)]
         RenderFlexibleBox {DIV} at (5,0) size 243x25
           RenderBlock {DIV} at (0,12) size 0x0
           RenderBlock {DIV} at (0,0) size 243x25

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,31 @@
+2021-09-15  Aditya Keerthi  <akeerthi@apple.com>
+
+        [iOS] Search inputs with '-webkit-appearance: textfield' should have a textfield background color
+        https://bugs.webkit.org/show_bug.cgi?id=229883
+        rdar://82146288
+
+        Reviewed by Tim Horton.
+
+        In iOS 15, search inputs have a gray background color by default.
+        Some sites, such as booking.com, request that the input appear like
+        a textfield, by specifying '-webkit-appearance: textfield', over the
+        default 'searchfield'. This request was previously ignored, but there
+        was no observable difference since search inputs and text inputs had
+        the same default styling before iOS 15.
+
+        Now that the default styling is different, the appearance should be
+        honored, so that sites get the background color they expect.
+
+        Test: fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html
+
+        * rendering/RenderThemeIOS.h:
+        * rendering/RenderThemeIOS.mm:
+        (WebCore::RenderThemeIOS::adjustTextFieldStyle const):
+
+        Exclude any elements that have a textfield appearance by default from
+        the background color adjustment, so that their background color can be
+        customized.
+
 2021-09-15  Carlos Garcia Campos  <cgarcia@igalia.com>
 
         AX: Move platform specific code for isolated tree mode to the platform files

diff --git a/Source/WebCore/rendering/RenderThemeIOS.h b/Source/WebCore/rendering/RenderThemeIOS.h
@@ -91,6 +91,7 @@ class RenderThemeIOS final : public RenderThemeCocoa {
 
     void paintFileUploadIconDecorations(const RenderObject& inputRenderer, const RenderObject& buttonRenderer, const PaintInfo&, const IntRect&, Icon*, FileUploadDecorations) override;
 
+    void adjustTextFieldStyle(RenderStyle&, const Element*) const final;
     void paintTextFieldDecorations(const RenderObject&, const PaintInfo&, const FloatRect&) override;
     void paintTextAreaDecorations(const RenderObject&, const PaintInfo&, const FloatRect&) override;
 

diff --git a/Source/WebCore/rendering/RenderThemeIOS.mm b/Source/WebCore/rendering/RenderThemeIOS.mm
@@ -530,6 +530,24 @@ static void drawJoinedLines(CGContextRef context, const Vector<CGPoint>& points,
     }
 }
 
+void RenderThemeIOS::adjustTextFieldStyle(RenderStyle& style, const Element* element) const
+{
+    if (!element)
+        return;
+
+    // Do not force a background color for elements that have a textfield
+    // appearance by default, so that their background color can be styled.
+    if (is<HTMLInputElement>(*element)) {
+        auto& input = downcast<HTMLInputElement>(*element);
+        // <input type=search> is the only TextFieldInputType that has a
+        // non-textfield appearance value.
+        if (input.isTextField() && !input.isSearchField())
+            return;
+    }
+
+    style.setBackgroundColor(systemColor(CSSValueWebkitControlBackground, element->document().styleColorOptions(&style)));
+}
+
 void RenderThemeIOS::paintTextFieldDecorations(const RenderObject& box, const PaintInfo& paintInfo, const FloatRect& rect)
 {
 #if ENABLE(IOS_FORM_CONTROL_REFRESH)