Changeset 269913 in webkit


Ignore:
Timestamp:
Nov 17, 2020 10:59:12 AM (3 years ago)
Author:
Aditya Keerthi
Message:

[iOS][FCR] Add new look for checkboxes
​https://bugs.webkit.org/show_bug.cgi?id=218808
<rdar://problem/71286037>

Reviewed by Wenson Hsieh.

Source/WebCore:

Tests: fast/forms/ios/form-control-refresh/checkbox/border.html

fast/forms/ios/form-control-refresh/checkbox/checked-appearance.html
fast/forms/ios/form-control-refresh/checkbox/ignored-properties.html
fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance.html
fast/forms/ios/form-control-refresh/checkbox/width-height.html

  • css/iOSFormControlRefresh.css:

(input[type="checkbox"]):

Use "border: initial" and "box-sizing: border-box" to match macOS, now
that the native checkbox styles on macOS and iOS are similar.

  • rendering/RenderThemeIOS.h:
  • rendering/RenderThemeIOS.mm:

(WebCore::RenderThemeIOS::paintCheckboxDecorations):

Move away from using paintCheckboxDecorations to paintCheckbox 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::paintCheckbox):

A new implementation for painting checkboxes to match the updated
design. The checkmark drawing was generated using SF Symbols.

LayoutTests:

Added tests to verify the stylability of native checkboxes and to verify
that different checkbox states are painted with a different appearance.

  • fast/forms/ios/form-control-refresh/checkbox/border-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/border.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/checked-appearance-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/checked-appearance.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/ignored-properties-expected.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/ignored-properties.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/width-height-expected-mismatch.html: Added.
  • fast/forms/ios/form-control-refresh/checkbox/width-height.html: Added.
Location:
trunk
Files:
12 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r269903 r269913  
     12020-11-17  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for checkboxes
     4        https://bugs.webkit.org/show_bug.cgi?id=218808
     5        <rdar://problem/71286037>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Added tests to verify the stylability of native checkboxes and to verify
     10        that different checkbox states are painted with a different appearance.
     11
     12        * fast/forms/ios/form-control-refresh/checkbox/border-expected-mismatch.html: Added.
     13        * fast/forms/ios/form-control-refresh/checkbox/border.html: Added.
     14        * fast/forms/ios/form-control-refresh/checkbox/checked-appearance-expected-mismatch.html: Added.
     15        * fast/forms/ios/form-control-refresh/checkbox/checked-appearance.html: Added.
     16        * fast/forms/ios/form-control-refresh/checkbox/ignored-properties-expected.html: Added.
     17        * fast/forms/ios/form-control-refresh/checkbox/ignored-properties.html: Added.
     18        * fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance-expected-mismatch.html: Added.
     19        * fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance.html: Added.
     20        * fast/forms/ios/form-control-refresh/checkbox/width-height-expected-mismatch.html: Added.
     21        * fast/forms/ios/form-control-refresh/checkbox/width-height.html: Added.
     22
    1232020-11-17  Lauro Moura  <lmoura@igalia.com>
    224

  • trunk/Source/WebCore/ChangeLog

    r269912 r269913  
     12020-11-17  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Add new look for checkboxes
     4        https://bugs.webkit.org/show_bug.cgi?id=218808
     5        <rdar://problem/71286037>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Tests: fast/forms/ios/form-control-refresh/checkbox/border.html
     10               fast/forms/ios/form-control-refresh/checkbox/checked-appearance.html
     11               fast/forms/ios/form-control-refresh/checkbox/ignored-properties.html
     12               fast/forms/ios/form-control-refresh/checkbox/indeterminate-appearance.html
     13               fast/forms/ios/form-control-refresh/checkbox/width-height.html
     14
     15        * css/iOSFormControlRefresh.css:
     16        (input[type="checkbox"]):
     17
     18        Use "border: initial" and "box-sizing: border-box" to match macOS, now
     19        that the native checkbox styles on macOS and iOS are similar.
     20
     21        * rendering/RenderThemeIOS.h:
     22        * rendering/RenderThemeIOS.mm:
     23        (WebCore::RenderThemeIOS::paintCheckboxDecorations):
     24
     25        Move away from using paintCheckboxDecorations to paintCheckbox for the
     26        new design. This is necessary to avoid painting custom borders and
     27        backgrounds for native checkboxes, matching macOS. Painting both a
     28        CSS background as well as the native checkbox can lead to background
     29        bleeding. Customizations can still be made using "-webkit-appearance: none".
     30
     31        (WebCore::RenderThemeIOS::paintCheckbox):
     32
     33        A new implementation for painting checkboxes to match the updated
     34        design. The checkmark drawing was generated using SF Symbols.
     35
    1362020-11-17  Zalan Bujtas  <zalan@apple.com>
    237

  • trunk/Source/WebCore/css/iOSFormControlRefresh.css

    r269775 r269913  
    2424
    2525#if defined(ENABLE_IOS_FORM_CONTROL_REFRESH) && ENABLE_IOS_FORM_CONTROL_REFRESH
     26
     27input[type="checkbox"] {
     28    border: initial;
     29    box-sizing: border-box;
     30}
     31
    2632#endif

  • trunk/Source/WebCore/rendering/RenderThemeIOS.h

    r267760 r269913  
    111111    bool paintSearchFieldDecorations(const RenderObject&, const PaintInfo&, const IntRect&) override;
    112112
     113#if ENABLE(IOS_FORM_CONTROL_REFRESH)
     114    bool paintCheckbox(const RenderObject&, const PaintInfo&, const IntRect&) override;
     115#endif
     116
    113117    bool supportsFocusRing(const RenderStyle&) const final;
    114118

  • trunk/Source/WebCore/rendering/RenderThemeIOS.mm

    r269614 r269913  
    6767#import "RenderView.h"
    6868#import "RuntimeEnabledFeatures.h"
     69#import "Settings.h"
    6970#import "UTIUtilities.h"
    7071#import "UserAgentScripts.h"
    … …  
    375376bool RenderThemeIOS::paintCheckboxDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
    376377{
     378#if ENABLE(IOS_FORM_CONTROL_REFRESH)
     379    if (box.settings().iOSFormControlRefreshEnabled())
     380        return true;
     381#endif
     382
    377383    bool checked = isChecked(box);
    378384    bool indeterminate = isIndeterminate(box);
    … …  
    19651971#endif
    19661972
     1973#if ENABLE(IOS_FORM_CONTROL_REFRESH)
     1974
     1975// Colors
     1976constexpr auto controlColor = SRGBA<uint8_t> { 0, 122, 255 };
     1977constexpr auto controlBackgroundColor = SRGBA<uint8_t> { 238, 238, 238 };
     1978
     1979bool RenderThemeIOS::paintCheckbox(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
     1980{
     1981    if (!box.settings().iOSFormControlRefreshEnabled())
     1982        return true;
     1983
     1984    auto& context = paintInfo.context();
     1985    GraphicsContextStateSaver stateSaver { context };
     1986
     1987    constexpr auto checkboxHeight = 16.0f;
     1988    constexpr auto checkboxCornerRadius = 5.0f;
     1989
     1990    FloatRoundedRect checkboxRect(rect, FloatRoundedRect::Radii(checkboxCornerRadius * rect.height() / checkboxHeight));
     1991
     1992    auto checked = isChecked(box);
     1993    auto indeterminate = isIndeterminate(box);
     1994    if (checked || indeterminate) {
     1995        context.fillRoundedRect(checkboxRect, controlColor);
     1996
     1997        Path path;
     1998        if (checked) {
     1999            path.moveTo({ 28.174f, 68.652f });
     2000            path.addBezierCurveTo({ 31.006f, 68.652f }, { 33.154f, 67.578f }, { 34.668f, 65.332f });
     2001            path.addLineTo({ 70.02f, 11.28f });
     2002            path.addBezierCurveTo({ 71.094f, 9.62f }, { 71.582f, 8.107f }, { 71.582f, 6.642f });
     2003            path.addBezierCurveTo({ 71.582f, 2.784f }, { 68.652f, 0.001f }, { 64.697f, 0.001f });
     2004            path.addBezierCurveTo({ 62.012f, 0.001f }, { 60.352f, 0.978f }, { 58.691f, 3.565f });
     2005            path.addLineTo({ 28.027f, 52.1f });
     2006            path.addLineTo({ 12.354f, 32.52f });
     2007            path.addBezierCurveTo({ 10.84f, 30.664f }, { 9.18f, 29.834f }, { 6.884f, 29.834f });
     2008            path.addBezierCurveTo({ 2.882f, 29.834f }, { 0.0f, 32.666f }, { 0.0f, 36.572f });
     2009            path.addBezierCurveTo({ 0.0f, 38.282f }, { 0.537f, 39.795f }, { 2.002f, 41.504f });
     2010            path.addLineTo({ 21.826f, 65.625f });
     2011            path.addBezierCurveTo({ 23.536f, 67.675f }, { 25.536f, 68.652f }, { 28.174f, 68.652f });
     2012
     2013            const FloatSize checkmarkSize(72.0f, 69.0f);
     2014            float scale = (0.65f * rect.width()) / checkmarkSize.width();
     2015
     2016            AffineTransform transform;
     2017            transform.translate(rect.center() - (checkmarkSize * scale * 0.5f));
     2018            transform.scale(scale);
     2019            path.transform(transform);
     2020        } else {
     2021            const FloatSize indeterminateBarRoundingRadii(1.25f, 1.25f);
     2022            constexpr float indeterminateBarPadding = 2.5f;
     2023            float height = 0.12f * rect.height();
     2024
     2025            FloatRect indeterminateBarRect(rect.x() + indeterminateBarPadding, rect.center().y() - height / 2.0f, rect.width() - indeterminateBarPadding * 2, height);
     2026            path.addRoundedRect(indeterminateBarRect, indeterminateBarRoundingRadii);
     2027        }
     2028
     2029        context.setFillColor(Color::white);
     2030        context.fillPath(path);
     2031    } else
     2032        context.fillRoundedRect(checkboxRect, controlBackgroundColor);
     2033
     2034    return false;
     2035}
     2036
     2037#endif // ENABLE(IOS_FORM_CONTROL_REFRESH)
     2038
    19672039} // namespace WebCore
    19682040
Note: See TracChangeset for help on using the changeset viewer.