Diff
Modified: trunk/LayoutTests/ChangeLog (269974 => 269975)
--- trunk/LayoutTests/ChangeLog 2020-11-18 20:22:16 UTC (rev 269974)
+++ trunk/LayoutTests/ChangeLog 2020-11-18 20:28:17 UTC (rev 269975)
@@ -1,3 +1,25 @@
+2020-11-18 Aditya Keerthi <[email protected]>
+
+ [iOS][FCR] Add new look for radio buttons
+ https://bugs.webkit.org/show_bug.cgi?id=219046
+ <rdar://problem/71498263>
+
+ Reviewed by Wenson Hsieh.
+
+ Added tests to verify the stylability of native radio buttons and to
+ verify that different states are painted with a different appearance.
+
+ * fast/forms/ios/form-control-refresh/radio/border-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/border.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/checked-appearance-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/checked-appearance.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/disabled-appearance-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/disabled-appearance.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/ignored-properties-expected.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/ignored-properties.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/width-height-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/radio/width-height.html: Added.
+
2020-11-18 Yusuke Suzuki <[email protected]>
Unreviewed, relanding r269940
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border-expected-mismatch.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border-expected-mismatch.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/border.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio"] {
+ border: 10px;
+}
+
+</style>
+</head>
+<body>
+<input type="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance-expected-mismatch.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance-expected-mismatch.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/checked-appearance.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance-expected-mismatch.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance-expected-mismatch.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/disabled-appearance.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked disabled>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties-expected.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties-expected.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/ignored-properties.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -0,0 +1,19 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+input[type="radio"] {
+ color: red;
+ background-color: red;
+ font-family: Arial;
+ font-size: 8px;
+}
+
+</style>
+</head>
+<body>
+<input type="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height-expected-mismatch.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height-expected-mismatch.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height.html (0 => 269975)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/radio/width-height.html 2020-11-18 20:28:17 UTC (rev 269975)
@@ -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="radio"] {
+ width: 50px;
+ height: 50px;
+}
+
+</style>
+</head>
+<body>
+<input type="radio" checked>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (269974 => 269975)
--- trunk/Source/WebCore/ChangeLog 2020-11-18 20:22:16 UTC (rev 269974)
+++ trunk/Source/WebCore/ChangeLog 2020-11-18 20:28:17 UTC (rev 269975)
@@ -1,3 +1,40 @@
+2020-11-18 Aditya Keerthi <[email protected]>
+
+ [iOS][FCR] Add new look for radio buttons
+ https://bugs.webkit.org/show_bug.cgi?id=219046
+ <rdar://problem/71498263>
+
+ Reviewed by Wenson Hsieh.
+
+ Tests: fast/forms/ios/form-control-refresh/radio/border.html
+ fast/forms/ios/form-control-refresh/radio/checked-appearance.html
+ fast/forms/ios/form-control-refresh/radio/disabled-appearance.html
+ fast/forms/ios/form-control-refresh/radio/ignored-properties.html
+ fast/forms/ios/form-control-refresh/radio/width-height.html
+
+ * css/iOSFormControlRefresh.css:
+ (input:matches([type="checkbox"], [type="radio"])):
+
+ Use "border: initial" and "box-sizing: border-box" to match macOS, now
+ that the native radio button styles on macOS and iOS are similar. This
+ also aligns with the new iOS checkbox style.
+
+ * rendering/RenderThemeIOS.h:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::paintRadioDecorations):
+
+ Move away from using paintRadioDecorations to paintRadio for the new
+ design. This is necessary to avoid painting custom borders and backgrounds
+ for native checkboxes, matching macOS. Painting both a CSS background as
+ well as the native checkbox can lead to background bleeding. Customizations
+ can still be made using "-webkit-appearance: none".
+
+ (WebCore::RenderThemeIOS::paintRadio):
+
+ A new implementation for painting radio buttons to match the updated
+ design. If the button is unchecked, a single circle is painted.
+ Otherwise, an inner and outer circle are painted.
+
2020-11-18 Yusuke Suzuki <[email protected]>
Unreviewed, relanding r269940
Modified: trunk/Source/WebCore/css/iOSFormControlRefresh.css (269974 => 269975)
--- trunk/Source/WebCore/css/iOSFormControlRefresh.css 2020-11-18 20:22:16 UTC (rev 269974)
+++ trunk/Source/WebCore/css/iOSFormControlRefresh.css 2020-11-18 20:28:17 UTC (rev 269975)
@@ -24,7 +24,7 @@
#if defined(ENABLE_IOS_FORM_CONTROL_REFRESH) && ENABLE_IOS_FORM_CONTROL_REFRESH
-input[type="checkbox"] {
+input:matches([type="checkbox"], [type="radio"]) {
border: initial;
box-sizing: border-box;
}
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (269974 => 269975)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-11-18 20:22:16 UTC (rev 269974)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-11-18 20:28:17 UTC (rev 269975)
@@ -112,6 +112,7 @@
#if ENABLE(IOS_FORM_CONTROL_REFRESH)
bool paintCheckbox(const RenderObject&, const PaintInfo&, const IntRect&) override;
+ bool paintRadio(const RenderObject&, const PaintInfo&, const IntRect&) override;
#endif
bool supportsFocusRing(const RenderStyle&) const final;
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (269974 => 269975)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-11-18 20:22:16 UTC (rev 269974)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-11-18 20:28:17 UTC (rev 269975)
@@ -473,6 +473,11 @@
bool RenderThemeIOS::paintRadioDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
{
+#if ENABLE(IOS_FORM_CONTROL_REFRESH)
+ if (box.settings().iOSFormControlRefreshEnabled())
+ return true;
+#endif
+
GraphicsContextStateSaver stateSaver(paintInfo.context());
CGContextRef cgContext = paintInfo.context().platformContext();
@@ -2034,6 +2039,36 @@
return false;
}
+bool RenderThemeIOS::paintRadio(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
+{
+ if (!box.settings().iOSFormControlRefreshEnabled())
+ return true;
+
+ auto& context = paintInfo.context();
+ GraphicsContextStateSaver stateSaver(context);
+
+ if (isChecked(box)) {
+ context.setFillColor(controlColor);
+ context.fillEllipse(rect);
+
+ // The inner circle is 6 / 14 the size of the surrounding circle,
+ // leaving 8 / 14 around it. (8 / 14) / 2 = 2 / 7.
+ constexpr float innerInverseRatio = 2 / 7.0f;
+
+ FloatRect innerCircleRect(rect);
+ innerCircleRect.inflateX(-innerCircleRect.width() * innerInverseRatio);
+ innerCircleRect.inflateY(-innerCircleRect.height() * innerInverseRatio);
+
+ context.setFillColor(Color::white);
+ context.fillEllipse(innerCircleRect);
+ } else {
+ context.setFillColor(controlBackgroundColor);
+ context.fillEllipse(rect);
+ }
+
+ return false;
+}
+
#endif // ENABLE(IOS_FORM_CONTROL_REFRESH)
} // namespace WebCore
