- Revision
- 270399
- Author
- akeer...@apple.com
- Date
- 2020-12-03 11:07:26 -0800 (Thu, 03 Dec 2020)
Log Message
[iOS][FCR] Add new look for search fields
https://bugs.webkit.org/show_bug.cgi?id=219443
<rdar://problem/71902666>
Reviewed by Wenson Hsieh.
Source/WebCore:
Tests: fast/forms/ios/form-control-refresh/search/background-color.html
fast/forms/ios/form-control-refresh/search/border.html
fast/forms/ios/form-control-refresh/search/font-size.html
fast/forms/ios/form-control-refresh/search/results-attribute.html
fast/forms/ios/form-control-refresh/search/width-height.html
* css/formControlsIOS.css:
(input[type="search"]):
Unlike traditional text fields, the new appearance has no border and a
filled background.
(input[type="search"]::-webkit-search-decoration,):
The new appearance has a magnifying glass glyph in the search field.
On macOS, the glyph changes depending on the value of the "results"
attribute. However, on iOS, the glyph should always be shown.
Consequently, "-webkit-search-decoration", "-webkit-search-results-decoration",
and "-webkit-search-results-button" all specify the same glyph.
* rendering/RenderThemeIOS.mm:
(WebCore::canAdjustBorderRadiusForAppearance):
The old search field forced a pill-like appearance. This is no longer
required under the new appearance.
(WebCore::RenderThemeIOS::adjustRoundBorderRadius):
LayoutTests:
Added tests to verify the stylability of search fields with the new appearance.
* fast/forms/ios/form-control-refresh/search/background-color-expected-mismatch.html: Added.
* fast/forms/ios/form-control-refresh/search/background-color.html: Added.
* fast/forms/ios/form-control-refresh/search/border-expected-mismatch.html: Added.
* fast/forms/ios/form-control-refresh/search/border.html: Added.
* fast/forms/ios/form-control-refresh/search/font-size-expected-mismatch.html: Added.
* fast/forms/ios/form-control-refresh/search/font-size.html: Added.
* fast/forms/ios/form-control-refresh/search/results-attribute-expected.html: Added.
* fast/forms/ios/form-control-refresh/search/results-attribute.html: Added.
* fast/forms/ios/form-control-refresh/search/width-height-expected-mismatch.html: Added.
* fast/forms/ios/form-control-refresh/search/width-height.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (270398 => 270399)
--- trunk/LayoutTests/ChangeLog 2020-12-03 19:01:33 UTC (rev 270398)
+++ trunk/LayoutTests/ChangeLog 2020-12-03 19:07:26 UTC (rev 270399)
@@ -1,3 +1,24 @@
+2020-12-03 Aditya Keerthi <akeer...@apple.com>
+
+ [iOS][FCR] Add new look for search fields
+ https://bugs.webkit.org/show_bug.cgi?id=219443
+ <rdar://problem/71902666>
+
+ Reviewed by Wenson Hsieh.
+
+ Added tests to verify the stylability of search fields with the new appearance.
+
+ * fast/forms/ios/form-control-refresh/search/background-color-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/search/background-color.html: Added.
+ * fast/forms/ios/form-control-refresh/search/border-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/search/border.html: Added.
+ * fast/forms/ios/form-control-refresh/search/font-size-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/search/font-size.html: Added.
+ * fast/forms/ios/form-control-refresh/search/results-attribute-expected.html: Added.
+ * fast/forms/ios/form-control-refresh/search/results-attribute.html: Added.
+ * fast/forms/ios/form-control-refresh/search/width-height-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/search/width-height.html: Added.
+
2020-12-03 Ryan Haddad <ryanhad...@apple.com>
[macOS WK1] imported/w3c/web-platform-tests/css/css-scroll-snap/scroll-target-padding-003.html is a flaky failure
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color-expected-mismatch.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color-expected-mismatch.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/background-color.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,16 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+input[type="search"] {
+ background-color: red;
+}
+
+</style>
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border-expected-mismatch.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border-expected-mismatch.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/border.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,16 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+input[type="search"] {
+ border: 2px solid black;
+}
+
+</style>
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size-expected-mismatch.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size-expected-mismatch.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/font-size.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,16 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+input[type="search"] {
+ font-size: 22px;
+}
+
+</style>
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute-expected.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute-expected.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/results-attribute.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search" results>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height-expected-mismatch.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height-expected-mismatch.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,9 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height.html (0 => 270399)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/search/width-height.html 2020-12-03 19:07:26 UTC (rev 270399)
@@ -0,0 +1,17 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+input[type="search"] {
+ width: 50px;
+ height: 50px;
+}
+
+</style>
+</head>
+<body>
+<input type="search">
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (270398 => 270399)
--- trunk/Source/WebCore/ChangeLog 2020-12-03 19:01:33 UTC (rev 270398)
+++ trunk/Source/WebCore/ChangeLog 2020-12-03 19:07:26 UTC (rev 270399)
@@ -1,5 +1,41 @@
2020-12-03 Aditya Keerthi <akeer...@apple.com>
+ [iOS][FCR] Add new look for search fields
+ https://bugs.webkit.org/show_bug.cgi?id=219443
+ <rdar://problem/71902666>
+
+ Reviewed by Wenson Hsieh.
+
+ Tests: fast/forms/ios/form-control-refresh/search/background-color.html
+ fast/forms/ios/form-control-refresh/search/border.html
+ fast/forms/ios/form-control-refresh/search/font-size.html
+ fast/forms/ios/form-control-refresh/search/results-attribute.html
+ fast/forms/ios/form-control-refresh/search/width-height.html
+
+ * css/formControlsIOS.css:
+ (input[type="search"]):
+
+ Unlike traditional text fields, the new appearance has no border and a
+ filled background.
+
+ (input[type="search"]::-webkit-search-decoration,):
+
+ The new appearance has a magnifying glass glyph in the search field.
+ On macOS, the glyph changes depending on the value of the "results"
+ attribute. However, on iOS, the glyph should always be shown.
+ Consequently, "-webkit-search-decoration", "-webkit-search-results-decoration",
+ and "-webkit-search-results-button" all specify the same glyph.
+
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::canAdjustBorderRadiusForAppearance):
+
+ The old search field forced a pill-like appearance. This is no longer
+ required under the new appearance.
+
+ (WebCore::RenderThemeIOS::adjustRoundBorderRadius):
+
+2020-12-03 Aditya Keerthi <akeer...@apple.com>
+
[iOS][FCR] Add new look for controls with text entry
https://bugs.webkit.org/show_bug.cgi?id=219362
rdar://problem/71813850
Modified: trunk/Source/WebCore/css/formControlsIOS.css (270398 => 270399)
--- trunk/Source/WebCore/css/formControlsIOS.css 2020-12-03 19:01:33 UTC (rev 270398)
+++ trunk/Source/WebCore/css/formControlsIOS.css 2020-12-03 19:07:26 UTC (rev 270399)
@@ -40,4 +40,22 @@
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 42"><path fill="rgb(0, 122, 255)" d="M36.00979 41.8692c1.70898 0 3.17383-.63483 4.49219-2.00201L69.45706 10.6192c1.02539-1.07428 1.61133-2.39264 1.61133-3.95514C71.06839 3.49017 68.52933 1 65.40433 1c-1.51367 0-2.97852.63477-4.10156 1.75781L36.05863 28.4414 10.76566 2.75781C9.64261 1.63476 8.2266 1 6.61527 1c-3.125 0-5.61523 2.49017-5.61523 5.66406 0 1.5625.53711 2.88086 1.61133 3.95514l28.95508 29.24799c1.36719 1.36719 2.7832 2.00201 4.44336 2.00201z"/></svg>');
}
+input[type="search"] {
+ border: initial;
+ background-color: rgb(238, 238, 238);
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-decoration,
+input[type="search"]::-webkit-search-results-button {
+ align-self: flex-start;
+ background-color: darkgray;
+ flex: none;
+ height: 1em;
+ margin: auto 0;
+ margin-inline-end: 0.4em;
+ width: 1em;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73"><path fill="darkgray" d="M29.6875 59.375c6.2988 0 12.1094-1.953 16.9434-5.3222l17.334 17.334c.9277.9277 2.1484 1.3672 3.418 1.3672 2.7343 0 4.7362-2.0996 4.7362-4.7852 0-1.2695-.4394-2.4902-1.3672-3.418L53.5644 47.3145c3.6622-4.9316 5.8106-11.0352 5.8106-17.627C59.375 13.3301 46.045 0 29.6875 0 13.3301 0 0 13.3301 0 29.6875 0 46.045 13.33 59.375 29.6875 59.375zm0-7.2753c-12.2559 0-22.4121-10.1563-22.4121-22.4122 0-12.3046 10.1562-22.4121 22.4121-22.4121C41.9922 7.2754 52.1 17.3829 52.1 29.6875c0 12.256-10.1078 22.4122-22.4125 22.4122z"/></svg>');
+}
+
#endif
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (270398 => 270399)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-12-03 19:01:33 UTC (rev 270398)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-12-03 19:07:26 UTC (rev 270399)
@@ -560,7 +560,7 @@
return { 0, 0, 0, 0 };
}
-static inline bool canAdjustBorderRadiusForAppearance(ControlPart appearance)
+static inline bool canAdjustBorderRadiusForAppearance(ControlPart appearance, const RenderBox& box)
{
switch (appearance) {
case NoControlPart:
@@ -568,6 +568,10 @@
case ApplePayButtonPart:
#endif
return false;
+#if ENABLE(IOS_FORM_CONTROL_REFRESH)
+ case SearchFieldPart:
+ return !box.settings().iOSFormControlRefreshEnabled();
+#endif
default:
return true;
};
@@ -575,7 +579,7 @@
void RenderThemeIOS::adjustRoundBorderRadius(RenderStyle& style, RenderBox& box)
{
- if (!canAdjustBorderRadiusForAppearance(style.appearance()) || style.backgroundLayers().hasImage())
+ if (!canAdjustBorderRadiusForAppearance(style.appearance(), box) || style.backgroundLayers().hasImage())
return;
// FIXME: We should not be relying on border radius for the appearance of our controls <rdar://problem/7675493>.
