Changeset 269975 in webkit


Ignore:
Timestamp:
Nov 18, 2020 12:28:17 PM (3 years ago)
Author:
Aditya Keerthi
Message:

[iOS][FCR] Add new look for radio buttons
https://bugs.webkit.org/show_bug.cgi?id=219046
<rdar://problem/71498263>

Reviewed by Wenson Hsieh.

Source/WebCore:

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.

LayoutTests:

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.
Location:
trunk
Files:
11 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r269974 r269975  
     12020-11-18  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for radio buttons
     4        https://bugs.webkit.org/show_bug.cgi?id=219046
     5        <rdar://problem/71498263>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Added tests to verify the stylability of native radio buttons and to
     10        verify that different states are painted with a different appearance.
     11
     12        * fast/forms/ios/form-control-refresh/radio/border-expected-mismatch.html: Added.
     13        * fast/forms/ios/form-control-refresh/radio/border.html: Added.
     14        * fast/forms/ios/form-control-refresh/radio/checked-appearance-expected-mismatch.html: Added.
     15        * fast/forms/ios/form-control-refresh/radio/checked-appearance.html: Added.
     16        * fast/forms/ios/form-control-refresh/radio/disabled-appearance-expected-mismatch.html: Added.
     17        * fast/forms/ios/form-control-refresh/radio/disabled-appearance.html: Added.
     18        * fast/forms/ios/form-control-refresh/radio/ignored-properties-expected.html: Added.
     19        * fast/forms/ios/form-control-refresh/radio/ignored-properties.html: Added.
     20        * fast/forms/ios/form-control-refresh/radio/width-height-expected-mismatch.html: Added.
     21        * fast/forms/ios/form-control-refresh/radio/width-height.html: Added.
     22
    1232020-11-18  Yusuke Suzuki  <ysuzuki@apple.com>
    224
  • trunk/Source/WebCore/ChangeLog

    r269974 r269975  
     12020-11-18  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for radio buttons
     4        https://bugs.webkit.org/show_bug.cgi?id=219046
     5        <rdar://problem/71498263>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Tests: fast/forms/ios/form-control-refresh/radio/border.html
     10               fast/forms/ios/form-control-refresh/radio/checked-appearance.html
     11               fast/forms/ios/form-control-refresh/radio/disabled-appearance.html
     12               fast/forms/ios/form-control-refresh/radio/ignored-properties.html
     13               fast/forms/ios/form-control-refresh/radio/width-height.html
     14
     15        * css/iOSFormControlRefresh.css:
     16        (input:matches([type="checkbox"], [type="radio"])):
     17
     18        Use "border: initial" and "box-sizing: border-box" to match macOS, now
     19        that the native radio button styles on macOS and iOS are similar. This
     20        also aligns with the new iOS checkbox style.
     21
     22        * rendering/RenderThemeIOS.h:
     23        * rendering/RenderThemeIOS.mm:
     24        (WebCore::RenderThemeIOS::paintRadioDecorations):
     25
     26        Move away from using paintRadioDecorations to paintRadio for the new
     27        design. This is necessary to avoid painting custom borders and backgrounds
     28        for native checkboxes, matching macOS. Painting both a CSS background as
     29        well as the native checkbox can lead to background bleeding. Customizations
     30        can still be made using "-webkit-appearance: none".
     31
     32        (WebCore::RenderThemeIOS::paintRadio):
     33
     34        A new implementation for painting radio buttons to match the updated
     35        design. If the button is unchecked, a single circle is painted.
     36        Otherwise, an inner and outer circle are painted.
     37
    1382020-11-18  Yusuke Suzuki  <ysuzuki@apple.com>
    239
  • trunk/Source/WebCore/css/iOSFormControlRefresh.css

    r269913 r269975  
    2525#if defined(ENABLE_IOS_FORM_CONTROL_REFRESH) && ENABLE_IOS_FORM_CONTROL_REFRESH
    2626
    27 input[type="checkbox"] {
     27input:matches([type="checkbox"], [type="radio"]) {
    2828    border: initial;
    2929    box-sizing: border-box;
  • trunk/Source/WebCore/rendering/RenderThemeIOS.h

    r269913 r269975  
    113113#if ENABLE(IOS_FORM_CONTROL_REFRESH)
    114114    bool paintCheckbox(const RenderObject&, const PaintInfo&, const IntRect&) override;
     115    bool paintRadio(const RenderObject&, const PaintInfo&, const IntRect&) override;
    115116#endif
    116117
  • trunk/Source/WebCore/rendering/RenderThemeIOS.mm

    r269913 r269975  
    474474bool RenderThemeIOS::paintRadioDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
    475475{
     476#if ENABLE(IOS_FORM_CONTROL_REFRESH)
     477    if (box.settings().iOSFormControlRefreshEnabled())
     478        return true;
     479#endif
     480
    476481    GraphicsContextStateSaver stateSaver(paintInfo.context());
    477482    CGContextRef cgContext = paintInfo.context().platformContext();
     
    20352040}
    20362041
     2042bool RenderThemeIOS::paintRadio(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
     2043{
     2044    if (!box.settings().iOSFormControlRefreshEnabled())
     2045        return true;
     2046
     2047    auto& context = paintInfo.context();
     2048    GraphicsContextStateSaver stateSaver(context);
     2049
     2050    if (isChecked(box)) {
     2051        context.setFillColor(controlColor);
     2052        context.fillEllipse(rect);
     2053
     2054        // The inner circle is 6 / 14 the size of the surrounding circle,
     2055        // leaving 8 / 14 around it. (8 / 14) / 2 = 2 / 7.
     2056        constexpr float innerInverseRatio = 2 / 7.0f;
     2057
     2058        FloatRect innerCircleRect(rect);
     2059        innerCircleRect.inflateX(-innerCircleRect.width() * innerInverseRatio);
     2060        innerCircleRect.inflateY(-innerCircleRect.height() * innerInverseRatio);
     2061
     2062        context.setFillColor(Color::white);
     2063        context.fillEllipse(innerCircleRect);
     2064    } else {
     2065        context.setFillColor(controlBackgroundColor);
     2066        context.fillEllipse(rect);
     2067    }
     2068
     2069    return false;
     2070}
     2071
    20372072#endif // ENABLE(IOS_FORM_CONTROL_REFRESH)
    20382073
Note: See TracChangeset for help on using the changeset viewer.