- Revision
- 282451
- Author
- [email protected]
- Date
- 2021-09-15 06:46:47 -0700 (Wed, 15 Sep 2021)
Log Message
[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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (282450 => 282451)
--- trunk/LayoutTests/ChangeLog 2021-09-15 13:44:21 UTC (rev 282450)
+++ trunk/LayoutTests/ChangeLog 2021-09-15 13:46:47 UTC (rev 282451)
@@ -1,3 +1,15 @@
+2021-09-15 Aditya Keerthi <[email protected]>
+
+ [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 <[email protected]>
offsetLeft on display:inline element in vertical-rl parent can return a negative number
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt (0 => 282451)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt 2021-09-15 13:46:47 UTC (rev 282451)
@@ -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
+
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html (0 => 282451)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html 2021-09-15 13:46:47 UTC (rev 282451)
@@ -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=""
+ <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>
Modified: trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt (282450 => 282451)
--- trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-09-15 13:44:21 UTC (rev 282450)
+++ trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-09-15 13:46:47 UTC (rev 282451)
@@ -11,7 +11,7 @@
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
Modified: trunk/Source/WebCore/ChangeLog (282450 => 282451)
--- trunk/Source/WebCore/ChangeLog 2021-09-15 13:44:21 UTC (rev 282450)
+++ trunk/Source/WebCore/ChangeLog 2021-09-15 13:46:47 UTC (rev 282451)
@@ -1,3 +1,31 @@
+2021-09-15 Aditya Keerthi <[email protected]>
+
+ [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 <[email protected]>
AX: Move platform specific code for isolated tree mode to the platform files
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (282450 => 282451)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2021-09-15 13:44:21 UTC (rev 282450)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2021-09-15 13:46:47 UTC (rev 282451)
@@ -91,6 +91,7 @@
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;
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (282450 => 282451)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2021-09-15 13:44:21 UTC (rev 282450)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2021-09-15 13:46:47 UTC (rev 282451)
@@ -530,6 +530,24 @@
}
}
+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)
