Rendering issue with checkbox in flexbox layout

https://bugs.webkit.org/show_bug.cgi?id=255419
<rdar://problem/108026194>

Reviewed by Antti Koivisto.

Form controls with appearance are supposed to set their minimum (intrinsic) widths so that they don't get overlapped (e.g. by getting sized to 0px)
in over-constrained situations.

* LayoutTests/fast/flexbox/overlapped-form-controls-expected.html: Added.
* LayoutTests/fast/flexbox/overlapped-form-controls.html: Added.
* Source/WebCore/platform/Theme.cpp:
(WebCore::Theme::minimumControlSize const):

Canonical link: https://commits.webkit.org/263052@main

LayoutTests/fast/flexbox/overlapped-form-controls-expected.html

@@ -0,0 +1,10 @@
+<style>
+div {
+  position: absolute;
+}
+input {
+  outline: solid 1px black;
+}
+</style>
+<div><input type="checkbox"></div>
+<div style="top: 100px;"><input type="radio"></div>

LayoutTests/fast/flexbox/overlapped-form-controls.html

@@ -0,0 +1,15 @@
+<style>
+div {
+  max-width: 30px;
+  display: flex;
+  color: transparent;
+  font-family: Ahem;
+  font-size: 10px;
+  position: absolute;
+}
+input {
+  outline: solid 1px black;
+}
+</style>
+<div><input type="checkbox">PASS if form control is not overlapped.</div>
+<div style="top: 100px;"><input type="radio">PASS if form control is not overlapped.</div>

Source/WebCore/platform/Theme.cpp

@@ -51,7 +51,8 @@ LengthSize Theme::controlSize(StyleAppearance, const FontCascade&, const LengthS
 LengthSize Theme::minimumControlSize(StyleAppearance appearance, const FontCascade& fontCascade, const LengthSize& zoomedSize, const LengthSize& nonShrinkableZoomedSize, float zoom) const
 {
     auto minSize = minimumControlSize(appearance, fontCascade, zoomedSize, zoom);
-    if (appearance == StyleAppearance::Radio) {
+    // Other StyleAppearance types are composed controls with shadow subtree.
+    if (appearance == StyleAppearance::Radio || appearance == StyleAppearance::Checkbox) {
         if (zoomedSize.width.isIntrinsicOrAuto())
             minSize.width = nonShrinkableZoomedSize.width;
         if (zoomedSize.height.isIntrinsicOrAuto())

Source/WebCore/rendering/RenderThemeIOS.h

@@ -204,6 +204,7 @@ class RenderThemeIOS final : public RenderThemeCocoa {
     Color controlTintColor(const RenderStyle&, OptionSet<StyleColorOptions>) const;
 
     void adjustStyleForAlternateFormControlDesignTransition(RenderStyle&, const Element*) const;
+    void adjustMinimumIntrinsicSizeForAppearance(StyleAppearance, RenderStyle&) const;
 };
 
 }

Source/WebCore/rendering/RenderThemeIOS.mm

@@ -342,6 +342,7 @@ static IOSGradientRef gradientWithName(IOSGradientType gradientType)
 void RenderThemeIOS::adjustCheckboxStyle(RenderStyle& style, const Element* element) const
 {
     adjustStyleForAlternateFormControlDesignTransition(style, element);
+    adjustMinimumIntrinsicSizeForAppearance(StyleAppearance::Checkbox, style);
 
     if (!style.width().isIntrinsicOrAuto() && !style.height().isAuto())
         return;
@@ -488,9 +489,19 @@ static void drawJoinedLines(CGContextRef context, const Vector<CGPoint>& points,
     return RenderTheme::isControlStyled(style, userAgentStyle);
 }
 
+void RenderThemeIOS::adjustMinimumIntrinsicSizeForAppearance(StyleAppearance appearance, RenderStyle& style) const
+{
+    auto minControlSize = Theme::singleton().minimumControlSize(appearance, style.fontCascade(), { style.minWidth(), style.minHeight() }, { style.width(), style.height() }, style.effectiveZoom());
+    if (minControlSize.width.value() > style.minWidth().value())
+        style.setMinWidth(WTFMove(minControlSize.width));
+    if (minControlSize.height.value() > style.minHeight().value())
+        style.setMinHeight(WTFMove(minControlSize.height));
+}
+
 void RenderThemeIOS::adjustRadioStyle(RenderStyle& style, const Element* element) const
 {
     adjustStyleForAlternateFormControlDesignTransition(style, element);
+    adjustMinimumIntrinsicSizeForAppearance(StyleAppearance::Radio, style);
 
     if (!style.width().isIntrinsicOrAuto() && !style.height().isAuto())
         return;