- Revision
- 283002
- Author
- [email protected]
- Date
- 2021-09-23 13:14:28 -0700 (Thu, 23 Sep 2021)
Log Message
Cherry-pick r282451. rdar://problem/83460818
[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.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@282451 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Added Paths
Diff
Modified: branches/safari-612-branch/LayoutTests/ChangeLog (283001 => 283002)
--- branches/safari-612-branch/LayoutTests/ChangeLog 2021-09-23 20:14:24 UTC (rev 283001)
+++ branches/safari-612-branch/LayoutTests/ChangeLog 2021-09-23 20:14:28 UTC (rev 283002)
@@ -1,5 +1,58 @@
2021-09-23 Russell Epstein <[email protected]>
+ Cherry-pick r282451. rdar://problem/83460818
+
+ [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.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@282451 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 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-23 Russell Epstein <[email protected]>
+
Cherry-pick r282063. rdar://problem/83460750
REGRESSION (r280017): Calling getBoundingClientRect() on an empty element with "break-before: column" in columns returns a rect with all zeros
Added: branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt (0 => 283002)
--- branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt (rev 0)
+++ branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background-expected.txt 2021-09-23 20:14:28 UTC (rev 283002)
@@ -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: branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html (0 => 283002)
--- branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html (rev 0)
+++ branches/safari-612-branch/LayoutTests/fast/forms/ios/form-control-refresh/search/textfield-appearance-background.html 2021-09-23 20:14:28 UTC (rev 283002)
@@ -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: branches/safari-612-branch/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt (283001 => 283002)
--- branches/safari-612-branch/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-09-23 20:14:24 UTC (rev 283001)
+++ branches/safari-612-branch/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-09-23 20:14:28 UTC (rev 283002)
@@ -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: branches/safari-612-branch/Source/WebCore/ChangeLog (283001 => 283002)
--- branches/safari-612-branch/Source/WebCore/ChangeLog 2021-09-23 20:14:24 UTC (rev 283001)
+++ branches/safari-612-branch/Source/WebCore/ChangeLog 2021-09-23 20:14:28 UTC (rev 283002)
@@ -1,5 +1,74 @@
2021-09-23 Russell Epstein <[email protected]>
+ Cherry-pick r282451. rdar://problem/83460818
+
+ [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.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@282451 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 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-23 Russell Epstein <[email protected]>
+
Cherry-pick r282063. rdar://problem/83460750
REGRESSION (r280017): Calling getBoundingClientRect() on an empty element with "break-before: column" in columns returns a rect with all zeros
Modified: branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.h (283001 => 283002)
--- branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.h 2021-09-23 20:14:24 UTC (rev 283001)
+++ branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.h 2021-09-23 20:14:28 UTC (rev 283002)
@@ -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: branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.mm (283001 => 283002)
--- branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.mm 2021-09-23 20:14:24 UTC (rev 283001)
+++ branches/safari-612-branch/Source/WebCore/rendering/RenderThemeIOS.mm 2021-09-23 20:14:28 UTC (rev 283002)
@@ -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)
