⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 274232 in webkit


Ignore:
Timestamp:
Mar 10, 2021, 1:16:59 PM (6 years ago)
Author:
Aditya Keerthi
Message:

[iOS][FCR] Color inputs are painted outside their box
​https://bugs.webkit.org/show_bug.cgi?id=222299
<rdar://problem/74621954>

Reviewed by Wenson Hsieh.

Source/WebCore:

Color inputs have a gradient decoration around their inner swatch. Since
this decoration is painted using a stroke with a non-zero thickness
around the input's box, a portion of the decoration overflows the box.

To fix, use an inset rect to draw the gradient decoration, ensuring the
stroke is drawn within the input's box.

This patch also updates the padding and stroke thickness to match the
latest specifications.

Test: fast/forms/ios/form-control-refresh/color/paint-within-box.html

  • css/html.css:

(input[type="color"]):

Update padding to match specification.

(input[type="color"]::-webkit-color-swatch-wrapper):

Update padding to match specification.

  • css/legacyFormControlsIOS.css:

(input[type="color"]::-webkit-color-swatch-wrapper):

  • rendering/RenderTheme.cpp:

(WebCore::RenderTheme::paintDecorations):

Use the device-pixel-snapped rect when painting the decoration for color
inputs, to ensure the swatch is centered within the input.

We should also consider moving other controls to using the
device-pixel-snapped rect when painting, as some controls still use
integral snapped rects. However, each control should be individually
audited to avoid breakage.

(WebCore::RenderTheme::paintColorWellDecorations):

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

(WebCore::RenderThemeIOS::colorInputStyleSheet):

Update the default width/height of color inputs to match the latest
specification.

(WebCore::RenderThemeIOS::paintColorWellDecorations):

Inset the stroke rect to ensure the gradient is painted within the
input's box.

LayoutTests:

Added a reference test which verifies that color inputs are painted
within their box. This is done by drawing a square over the input
and comparing to a page which contains a square of the same size,
with the input hidden.

Rebaselined tests after change to padding.

  • fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html: Added.
  • fast/forms/ios/form-control-refresh/color/paint-within-box.html: Added.
  • platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt:
  • platform/ios/fast/forms/color/input-appearance-color-expected.txt:
Location:
trunk
Files:
2 added
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r274225 r274232  
     12021-03-10  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Color inputs are painted outside their box
     4        https://bugs.webkit.org/show_bug.cgi?id=222299
     5        <rdar://problem/74621954>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Added a reference test which verifies that color inputs are painted
     10        within their box. This is done by drawing a square over the input
     11        and comparing to a page which contains a square of the same size,
     12        with the input hidden.
     13
     14        Rebaselined tests after change to padding.
     15
     16        * fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html: Added.
     17        * fast/forms/ios/form-control-refresh/color/paint-within-box.html: Added.
     18        * platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt:
     19        * platform/ios/fast/forms/color/input-appearance-color-expected.txt:
     20
    1212021-03-10  Robert Jenner  <jenner@apple.com>
    222

  • trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt

    r273154 r274232  
    7878FAIL <input type="range" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 71 +/- 3 but got 61
    7979FAIL <input type="range" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 71 +/- 3 but got 61
    80 FAIL <input type="color" value="#000000" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
    81 FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
     80FAIL <input type="color" value="#000000" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
     81FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
    8282FAIL <input type="color" value="#000000" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 71
    83 FAIL <input type="color" value="#000000" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
    84 FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
     83FAIL <input type="color" value="#000000" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
     84FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
    8585FAIL <input type="color" value="#000000" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 71
    8686PASS <input type="checkbox" style="overflow: visible; appearance: auto;">

  • trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt

    r273154 r274232  
    77        RenderText {#text} at (0,0) size 164x22
    88          text run at (0,0) width 164: "Default Appearance"
    9       RenderBlock (anonymous) at (0,41) size 784x44
     9      RenderBlock (anonymous) at (0,41) size 784x49
    1010        RenderText {#text} at (0,0) size 457x19
    1111          text run at (0,0) width 457: "List color controls have different appearance if ENABLE(DATALIST)."
    1212        RenderBR {BR} at (456,0) size 1x19
    13         RenderBlock {INPUT} at (0,20) size 23x23 [bgcolor=#FFFFFF]
    14           RenderFlexibleBox {DIV} at (3,3) size 17x17
    15             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#000000]
    16         RenderBlock {INPUT} at (23,20) size 23x23 [bgcolor=#FFFFFF]
    17           RenderFlexibleBox {DIV} at (3,3) size 17x17
    18             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#000000]
     13        RenderBlock {INPUT} at (0,20) size 28x28 [bgcolor=#FFFFFF]
     14          RenderFlexibleBox {DIV} at (3,3) size 22x22
     15            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#000000]
     16        RenderBlock {INPUT} at (28,20) size 28x28 [bgcolor=#FFFFFF]
     17          RenderFlexibleBox {DIV} at (3,3) size 22x22
     18            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#000000]
    1919        RenderText {#text} at (0,0) size 0x0
    20       RenderBlock {H3} at (0,103) size 784x24
     20      RenderBlock {H3} at (0,108) size 784x24
    2121        RenderText {#text} at (0,0) size 162x22
    2222          text run at (0,0) width 162: "Different Font Sizes"
    23       RenderBlock (anonymous) at (0,145) size 784x47
     23      RenderBlock (anonymous) at (0,150) size 784x49
    2424        RenderText {#text} at (0,0) size 590x19
    2525          text run at (0,0) width 590: "List color controls have different sizes depending on font sizes. Normal color controls don't."
    2626        RenderBR {BR} at (589,0) size 1x19
    27         RenderBlock {INPUT} at (0,23) size 23x23 [bgcolor=#FFFFFF]
    28           RenderFlexibleBox {DIV} at (5,5) size 13x13
    29             RenderBlock {DIV} at (0,0) size 13x13 [bgcolor=#00FF00]
    30         RenderText {#text} at (23,25) size 4x19
    31           text run at (23,25) width 4: " "
    32         RenderBlock {INPUT} at (27,21) size 23x23 [bgcolor=#FFFFFF]
    33           RenderFlexibleBox {DIV} at (3,3) size 17x17
    34             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
    35         RenderText {#text} at (50,25) size 4x19
    36           text run at (50,25) width 4: " "
    37         RenderBlock {INPUT} at (54,20) size 23x23 [bgcolor=#FFFFFF]
    38           RenderFlexibleBox {DIV} at (2,2) size 19x19
    39             RenderBlock {DIV} at (0,0) size 19x19 [bgcolor=#00FF00]
    40         RenderText {#text} at (77,25) size 4x19
    41           text run at (77,25) width 4: " "
    42         RenderBlock {INPUT} at (81,23) size 23x23 [bgcolor=#FFFFFF]
    43           RenderFlexibleBox {DIV} at (5,5) size 13x13
    44             RenderBlock {DIV} at (0,0) size 13x13 [bgcolor=#00FF00]
    45         RenderText {#text} at (104,25) size 4x19
    46           text run at (104,25) width 4: " "
    47         RenderBlock {INPUT} at (108,21) size 23x23 [bgcolor=#FFFFFF]
    48           RenderFlexibleBox {DIV} at (3,3) size 17x17
    49             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
    50         RenderText {#text} at (131,25) size 4x19
    51           text run at (131,25) width 4: " "
    52         RenderBlock {INPUT} at (135,20) size 23x23 [bgcolor=#FFFFFF]
    53           RenderFlexibleBox {DIV} at (2,2) size 19x19
    54             RenderBlock {DIV} at (0,0) size 19x19 [bgcolor=#00FF00]
     27        RenderBlock {INPUT} at (0,20) size 28x28 [bgcolor=#FFFFFF]
     28          RenderFlexibleBox {DIV} at (3,3) size 22x22
     29            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     30        RenderText {#text} at (28,28) size 4x19
     31          text run at (28,28) width 4: " "
     32        RenderBlock {INPUT} at (32,20) size 28x28 [bgcolor=#FFFFFF]
     33          RenderFlexibleBox {DIV} at (3,3) size 22x22
     34            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     35        RenderText {#text} at (60,28) size 4x19
     36          text run at (60,28) width 4: " "
     37        RenderBlock {INPUT} at (64,20) size 28x28 [bgcolor=#FFFFFF]
     38          RenderFlexibleBox {DIV} at (3,3) size 22x22
     39            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     40        RenderText {#text} at (92,28) size 4x19
     41          text run at (92,28) width 4: " "
     42        RenderBlock {INPUT} at (96,20) size 28x28 [bgcolor=#FFFFFF]
     43          RenderFlexibleBox {DIV} at (3,3) size 22x22
     44            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     45        RenderText {#text} at (124,28) size 4x19
     46          text run at (124,28) width 4: " "
     47        RenderBlock {INPUT} at (128,20) size 28x28 [bgcolor=#FFFFFF]
     48          RenderFlexibleBox {DIV} at (3,3) size 22x22
     49            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     50        RenderText {#text} at (156,28) size 4x19
     51          text run at (156,28) width 4: " "
     52        RenderBlock {INPUT} at (160,20) size 28x28 [bgcolor=#FFFFFF]
     53          RenderFlexibleBox {DIV} at (3,3) size 22x22
     54            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
    5555        RenderText {#text} at (0,0) size 0x0
    56       RenderBlock {H3} at (0,209) size 784x24
     56      RenderBlock {H3} at (0,216) size 784x24
    5757        RenderText {#text} at (0,0) size 122x22
    5858          text run at (0,0) width 122: "Various Colors"
    59       RenderBlock (anonymous) at (0,251) size 784x25
    60         RenderBlock {INPUT} at (0,0) size 23x23 [bgcolor=#FFFFFF]
    61           RenderFlexibleBox {DIV} at (3,3) size 17x17
    62             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#FF0000]
    63         RenderText {#text} at (23,4) size 4x19
    64           text run at (23,4) width 4: " "
    65         RenderBlock {INPUT} at (27,0) size 23x23 [bgcolor=#FFFFFF]
    66           RenderFlexibleBox {DIV} at (3,3) size 17x17
    67             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
    68         RenderText {#text} at (50,4) size 4x19
    69           text run at (50,4) width 4: " "
    70         RenderBlock {INPUT} at (54,0) size 23x23 [bgcolor=#FFFFFF]
    71           RenderFlexibleBox {DIV} at (3,3) size 17x17
    72             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#0000FF]
    73         RenderText {#text} at (77,4) size 4x19
    74           text run at (77,4) width 4: " "
    75         RenderBlock {INPUT} at (81,0) size 23x23 [bgcolor=#FFFFFF]
    76           RenderFlexibleBox {DIV} at (3,3) size 17x17
    77             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#EC008C]
    78         RenderText {#text} at (104,4) size 4x19
    79           text run at (104,4) width 4: " "
    80         RenderBlock {INPUT} at (108,0) size 23x23 [bgcolor=#FFFFFF]
    81           RenderFlexibleBox {DIV} at (3,3) size 17x17
    82             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#40E0D0]
    83         RenderText {#text} at (131,4) size 4x19
    84           text run at (131,4) width 4: " "
    85         RenderBlock {INPUT} at (135,0) size 23x23 [bgcolor=#FFFFFF]
    86           RenderFlexibleBox {DIV} at (3,3) size 17x17
    87             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#FF0000]
    88         RenderText {#text} at (158,4) size 4x19
    89           text run at (158,4) width 4: " "
    90         RenderBlock {INPUT} at (162,0) size 23x23 [bgcolor=#FFFFFF]
    91           RenderFlexibleBox {DIV} at (3,3) size 17x17
    92             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
    93         RenderText {#text} at (185,4) size 4x19
    94           text run at (185,4) width 4: " "
    95         RenderBlock {INPUT} at (189,0) size 23x23 [bgcolor=#FFFFFF]
    96           RenderFlexibleBox {DIV} at (3,3) size 17x17
    97             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#0000FF]
    98         RenderText {#text} at (212,4) size 4x19
    99           text run at (212,4) width 4: " "
    100         RenderBlock {INPUT} at (216,0) size 23x23 [bgcolor=#FFFFFF]
    101           RenderFlexibleBox {DIV} at (3,3) size 17x17
    102             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#EC008C]
    103         RenderText {#text} at (239,4) size 4x19
    104           text run at (239,4) width 4: " "
    105         RenderBlock {INPUT} at (243,0) size 23x23 [bgcolor=#FFFFFF]
    106           RenderFlexibleBox {DIV} at (3,3) size 17x17
    107             RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#40E0D0]
     59      RenderBlock (anonymous) at (0,258) size 784x29
     60        RenderBlock {INPUT} at (0,0) size 28x28 [bgcolor=#FFFFFF]
     61          RenderFlexibleBox {DIV} at (3,3) size 22x22
     62            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#FF0000]
     63        RenderText {#text} at (28,8) size 4x19
     64          text run at (28,8) width 4: " "
     65        RenderBlock {INPUT} at (32,0) size 28x28 [bgcolor=#FFFFFF]
     66          RenderFlexibleBox {DIV} at (3,3) size 22x22
     67            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     68        RenderText {#text} at (60,8) size 4x19
     69          text run at (60,8) width 4: " "
     70        RenderBlock {INPUT} at (64,0) size 28x28 [bgcolor=#FFFFFF]
     71          RenderFlexibleBox {DIV} at (3,3) size 22x22
     72            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#0000FF]
     73        RenderText {#text} at (92,8) size 4x19
     74          text run at (92,8) width 4: " "
     75        RenderBlock {INPUT} at (96,0) size 28x28 [bgcolor=#FFFFFF]
     76          RenderFlexibleBox {DIV} at (3,3) size 22x22
     77            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#EC008C]
     78        RenderText {#text} at (124,8) size 4x19
     79          text run at (124,8) width 4: " "
     80        RenderBlock {INPUT} at (128,0) size 28x28 [bgcolor=#FFFFFF]
     81          RenderFlexibleBox {DIV} at (3,3) size 22x22
     82            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#40E0D0]
     83        RenderText {#text} at (156,8) size 4x19
     84          text run at (156,8) width 4: " "
     85        RenderBlock {INPUT} at (160,0) size 28x28 [bgcolor=#FFFFFF]
     86          RenderFlexibleBox {DIV} at (3,3) size 22x22
     87            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#FF0000]
     88        RenderText {#text} at (188,8) size 4x19
     89          text run at (188,8) width 4: " "
     90        RenderBlock {INPUT} at (192,0) size 28x28 [bgcolor=#FFFFFF]
     91          RenderFlexibleBox {DIV} at (3,3) size 22x22
     92            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
     93        RenderText {#text} at (220,8) size 4x19
     94          text run at (220,8) width 4: " "
     95        RenderBlock {INPUT} at (224,0) size 28x28 [bgcolor=#FFFFFF]
     96          RenderFlexibleBox {DIV} at (3,3) size 22x22
     97            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#0000FF]
     98        RenderText {#text} at (252,8) size 4x19
     99          text run at (252,8) width 4: " "
     100        RenderBlock {INPUT} at (256,0) size 28x28 [bgcolor=#FFFFFF]
     101          RenderFlexibleBox {DIV} at (3,3) size 22x22
     102            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#EC008C]
     103        RenderText {#text} at (284,8) size 4x19
     104          text run at (284,8) width 4: " "
     105        RenderBlock {INPUT} at (288,0) size 28x28 [bgcolor=#FFFFFF]
     106          RenderFlexibleBox {DIV} at (3,3) size 22x22
     107            RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#40E0D0]
    108108        RenderText {#text} at (0,0) size 0x0
    109       RenderBlock {H3} at (0,294) size 784x24
     109      RenderBlock {H3} at (0,305) size 784x24
    110110        RenderText {#text} at (0,0) size 118x22
    111111          text run at (0,0) width 118: "Arbitrary Size"
    112       RenderBlock (anonymous) at (0,336) size 784x31
     112      RenderBlock (anonymous) at (0,347) size 784x31
    113113        RenderBlock {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF]
    114114          RenderFlexibleBox {DIV} at (3,3) size 94x24
    115             RenderBlock {DIV} at (0,0) size 94x24 [bgcolor=#FF0000]
     115            RenderBlock {DIV} at (2,2) size 90x20 [bgcolor=#FF0000]

  • trunk/Source/WebCore/ChangeLog

    r274227 r274232  
     12021-03-10  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [iOS][FCR] Color inputs are painted outside their box
     4        https://bugs.webkit.org/show_bug.cgi?id=222299
     5        <rdar://problem/74621954>
     6
     7        Reviewed by Wenson Hsieh.
     8
     9        Color inputs have a gradient decoration around their inner swatch. Since
     10        this decoration is painted using a stroke with a non-zero thickness
     11        around the input's box, a portion of the decoration overflows the box.
     12
     13        To fix, use an inset rect to draw the gradient decoration, ensuring the
     14        stroke is drawn within the input's box.
     15
     16        This patch also updates the padding and stroke thickness to match the
     17        latest specifications.
     18
     19        Test: fast/forms/ios/form-control-refresh/color/paint-within-box.html
     20
     21        * css/html.css:
     22        (input[type="color"]):
     23
     24        Update padding to match specification.
     25
     26        (input[type="color"]::-webkit-color-swatch-wrapper):
     27
     28        Update padding to match specification.
     29
     30        * css/legacyFormControlsIOS.css:
     31        (input[type="color"]::-webkit-color-swatch-wrapper):
     32        * rendering/RenderTheme.cpp:
     33        (WebCore::RenderTheme::paintDecorations):
     34
     35        Use the device-pixel-snapped rect when painting the decoration for color
     36        inputs, to ensure the swatch is centered within the input.
     37
     38        We should also consider moving other controls to using the
     39        device-pixel-snapped rect when painting, as some controls still use
     40        integral snapped rects. However, each control should be individually
     41        audited to avoid breakage.
     42
     43        (WebCore::RenderTheme::paintColorWellDecorations):
     44        * rendering/RenderTheme.h:
     45        * rendering/RenderThemeIOS.h:
     46        * rendering/RenderThemeIOS.mm:
     47        (WebCore::RenderThemeIOS::colorInputStyleSheet):
     48
     49        Update the default width/height of color inputs to match the latest
     50        specification.
     51
     52        (WebCore::RenderThemeIOS::paintColorWellDecorations):
     53
     54        Inset the stroke rect to ensure the gradient is painted within the
     55        input's box.
     56
    1572021-03-09  Darin Adler  <darin@apple.com>
    258

  • trunk/Source/WebCore/css/html.css

    r273839 r274232  
    997997#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    998998input[type="color"] {
    999     padding: 0.3em;
     999    padding: 3px;
    10001000}
    10011001#endif
    … …  
    10051005#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    10061006    border-radius: inherit;
    1007     padding: 0;
     1007    padding: 2px;
    10081008#else
    10091009    padding: 4px 2px 5px;

  • trunk/Source/WebCore/css/legacyFormControlsIOS.css

    r273947 r274232  
    9292input[type="color"]::-webkit-color-swatch-wrapper {
    9393    border-radius: initial;
     94    padding: 0;
    9495}
    9596

  • trunk/Source/WebCore/rendering/RenderTheme.cpp

    r274170 r274232  
    486486        return;
    487487
     488    // FIXME: Investigate whether all controls can use a device-pixel-snapped rect
     489    // rather than an integral-snapped rect.
     490
    488491    IntRect integralSnappedRect = snappedIntRect(rect);
    489492    FloatRect devicePixelSnappedRect = snapRectToDevicePixels(rect, box.document().deviceScaleFactor());
    … …  
    514517#if ENABLE(INPUT_TYPE_COLOR)
    515518    case ColorWellPart:
    516         paintColorWellDecorations(box, paintInfo, integralSnappedRect);
     519        paintColorWellDecorations(box, paintInfo, devicePixelSnappedRect);
    517520        break;
    518521#endif
    … …  
    10031006
    10041007#if ENABLE(INPUT_TYPE_COLOR)
    1005 void RenderTheme::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
    1006 {
    1007     paintButtonDecorations(box, paintInfo, rect);
     1008void RenderTheme::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const FloatRect& rect)
     1009{
     1010    paintButtonDecorations(box, paintInfo, snappedIntRect(LayoutRect(rect)));
    10081011}
    10091012#endif

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

    r272881 r274232  
    313313    virtual void paintButtonDecorations(const RenderObject&, const PaintInfo&, const IntRect&) { }
    314314#if ENABLE(INPUT_TYPE_COLOR)
    315     virtual void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const IntRect&);
     315    virtual void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const FloatRect&);
    316316#endif
    317317

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

    r272881 r274232  
    132132    void adjustColorWellStyle(RenderStyle&, const Element*) const final;
    133133    bool paintColorWell(const RenderObject&, const PaintInfo&, const IntRect&) final;
    134     void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const IntRect&) final;
     134    void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const FloatRect&) final;
    135135#endif
    136136#endif

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

    r273211 r274232  
    24352435        return RenderTheme::colorInputStyleSheet(settings);
    24362436
    2437     return "input[type=\"color\"] { -webkit-appearance: color-well; width: 23px; height: 23px; outline: none; border: initial; border-radius: 50%; } "_s;
     2437    return "input[type=\"color\"] { -webkit-appearance: color-well; width: 28px; height: 28px; outline: none; border: initial; border-radius: 50%; } "_s;
    24382438}
    24392439
    … …  
    24542454}
    24552455
    2456 void RenderThemeIOS::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
     2456void RenderThemeIOS::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const FloatRect& rect)
    24572457{
    24582458    if (!box.settings().iOSFormControlRefreshEnabled()) {
    … …  
    24612461    }
    24622462
    2463     constexpr int strokeThickness = 2;
     2463    constexpr int strokeThickness = 3;
    24642464    constexpr DisplayP3<float> colorStops[] = {
    24652465        { 1, 1, 0, 1 },
    … …  
    24822482    GraphicsContextStateSaver stateSaver(context);
    24832483
     2484    FloatRect strokeRect = rect;
     2485    strokeRect.inflate(-strokeThickness / 2.0f);
     2486
    24842487    context.setStrokeThickness(strokeThickness);
    24852488    context.setStrokeStyle(SolidStroke);
    24862489    context.setStrokeGradient(WTFMove(gradient));
    2487     context.strokeEllipse(rect);
     2490    context.strokeEllipse(strokeRect);
    24882491}
    24892492
Note: See TracChangeset for help on using the changeset viewer.