REGRESSION (258177@main): Radio buttons are shifted up on facebook.co…

…m account sign up/creation page https://bugs.webkit.org/show_bug.cgi?id=258754 rdar://111343119 Reviewed by Wenson Hsieh. On macOS, "toggle buttons", which include radio button and checkboxes, are only drawn at fixed sizes. When painted into a rect larger than their natural size, the control is automatically vertically centered. 258177@main incorrectly adjusted the rect used to paint these controls to equal the natural size, rather the size of the element itself. Radio buttons on facebook.com have a tall size. Consequently, the control is painted at the top of the box, rather than in the center. Fix by ensuring the rect used for painting uses the full size of the element. * LayoutTests/TestExpectations: * LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered-expected.html: Added. * LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered.html: Added. * LayoutTests/fast/forms/fixed-size-radio-vertically-centered-expected.html: Added. * LayoutTests/fast/forms/fixed-size-radio-vertically-centered.html: Added. * LayoutTests/platform/mac-wk2/TestExpectations: * Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.h: * Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.mm: (WebCore::ToggleButtonMac::rectForBounds const): Implement `rectForBounds` so that the rect used for painting is accurately reported. (WebCore::ToggleButtonMac::draw): Do not constain the paint rect to the natural size of the control. Canonical link: https://commits.webkit.org/265694@main
WebKit · Jul 2, 2023 · 462aff8 · 462aff8
1 parent 6816789
commit 462aff8
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 16 deletions.
diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -140,6 +140,10 @@ fast/forms/search/search-padding-cancel-results-buttons.html [ Skip ]
 fast/forms/search/search-results-hidden-crash.html [ Skip ]
 fast/forms/search/search-recent-searches.html [ Skip ]
 
+# Only macOS has fixed size controls.
+fast/forms/fixed-size-checkbox-vertically-centered.html [ Skip ]
+fast/forms/fixed-size-radio-vertically-centered.html [ Skip ]
+
 # Only applicable on platforms with dark mode support
 css-dark-mode [ Skip ]
 fast/css/apple-system-control-colors.html [ Skip ]

diff --git a/LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered-expected.html b/LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+input[type="checkbox"] {
+    margin-top: 44px;
+    width: 16px;
+    height: 16px;
+}
+
+</style>
+</head>
+<body>
+<input type="checkbox">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered.html b/LayoutTests/fast/forms/fixed-size-checkbox-vertically-centered.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+input[type="checkbox"] {
+    width: 100px;
+    height: 100px;
+}
+
+</style>
+</head>
+<body>
+<input type="checkbox">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/fixed-size-radio-vertically-centered-expected.html b/LayoutTests/fast/forms/fixed-size-radio-vertically-centered-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+input[type="radio"] {
+    margin-top: 44px;
+    width: 18px;
+    height: 18px;
+}
+
+</style>
+</head>
+<body>
+<input type="radio">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/fixed-size-radio-vertically-centered.html b/LayoutTests/fast/forms/fixed-size-radio-vertically-centered.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+input[type="radio"] {
+    width: 100px;
+    height: 100px;
+}
+
+</style>
+</head>
+<body>
+<input type="radio">
+</body>
+</html>
diff --git a/LayoutTests/platform/mac-wk2/TestExpectations b/LayoutTests/platform/mac-wk2/TestExpectations
@@ -38,6 +38,9 @@ fast/events/autoscroll-main-document.html [ Pass ]
 
 fast/forms/enterkeyhint-attribute-values.html [ Pass ]
 
+fast/forms/fixed-size-checkbox-vertically-centered.html [ Pass ]
+fast/forms/fixed-size-radio-vertically-centered.html [ Pass ]
+
 accessibility/smart-invert.html [ Pass ]
 webkit.org/b/189818 accessibility/smart-invert-reference.html [ Pass ImageOnlyFailure ]
 fast/media/mq-inverted-colors-live-update.html [ Pass ]

diff --git a/Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.h b/Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.h
@@ -41,6 +41,8 @@ class ToggleButtonMac final : public ButtonControlMac {
     IntSize cellSize(NSControlSize, const ControlStyle&) const override;
     IntOutsets cellOutsets(NSControlSize, const ControlStyle&) const override;
 
+    FloatRect rectForBounds(const FloatRect& bounds, const ControlStyle&) const override;
+
     void draw(GraphicsContext&, const FloatRoundedRect& borderRect, float deviceScaleFactor, const ControlStyle&) override;
 };
 

diff --git a/Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.mm b/Source/WebCore/platform/graphics/mac/controls/ToggleButtonMac.mm
@@ -95,28 +95,25 @@
     return (m_owningPart.type() == StyleAppearance::Checkbox ? checkboxOutsets : radioOutsets)[controlSize];
 }
 
-void ToggleButtonMac::draw(GraphicsContext& context, const FloatRoundedRect& borderRect, float deviceScaleFactor, const ControlStyle& style)
+FloatRect ToggleButtonMac::rectForBounds(const FloatRect& bounds, const ControlStyle& style) const
 {
-    LocalDefaultSystemAppearance localAppearance(style.states.contains(ControlStyle::State::DarkAppearance), style.accentColor);
-
-    GraphicsContextStateSaver stateSaver(context);
-
     auto controlSize = [m_buttonCell controlSize];
 
-    auto zoomedSize = cellSize(controlSize, style);
-    zoomedSize.scale(style.zoomFactor);
+    FloatSize size = cellSize(controlSize, style);
+    size.scale(style.zoomFactor);
 
     auto outsets = cellOutsets(controlSize, style);
-    auto zoomedOutsets = FloatBoxExtent {
-        outsets.top() * style.zoomFactor,
-        outsets.right() * style.zoomFactor,
-        outsets.bottom() * style.zoomFactor,
-        outsets.left() * style.zoomFactor
-    };
 
-    auto logicalRect = borderRect.rect();
-    logicalRect.setSize(zoomedSize);
-    logicalRect.expand(zoomedOutsets);
+    return inflatedRect(bounds, size, outsets, style);
+}
+
+void ToggleButtonMac::draw(GraphicsContext& context, const FloatRoundedRect& borderRect, float deviceScaleFactor, const ControlStyle& style)
+{
+    LocalDefaultSystemAppearance localAppearance(style.states.contains(ControlStyle::State::DarkAppearance), style.accentColor);
+
+    GraphicsContextStateSaver stateSaver(context);
+
+    auto logicalRect = rectForBounds(borderRect.rect(), style);
 
     if (style.zoomFactor != 1) {
         logicalRect.scale(1 / style.zoomFactor);