Changeset 265157 in webkit


Ignore:
Timestamp:
Jul 31, 2020 1:19:02 PM (4 years ago)
Author:
Aditya Keerthi
Message:

[macOS] Date/time input types should have a textfield appearance
​https://bugs.webkit.org/show_bug.cgi?id=214978

Reviewed by Wenson Hsieh.

Source/WebCore:

On iOS, date/time input types have a menulist-button appearance. However, this appearance
does not match the style of native date controls on macOS. The textfield appearance
with no focus ring brings us closer to a natively styled control.

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

(WebCore::RenderThemeMac::dateInputStyleSheet const):
(WebCore::RenderThemeMac::dateTimeLocalInputStyleSheet const):
(WebCore::RenderThemeMac::monthInputStyleSheet const):
(WebCore::RenderThemeMac::timeInputStyleSheet const):
(WebCore::RenderThemeMac::weekInputStyleSheet const):

LayoutTests:

Rebaselined tests for updated appearance.

  • platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt:
  • platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
  • platform/mac-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt:
Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r265153 r265157  
     12020-07-31  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Date/time input types should have a textfield appearance
     4        https://bugs.webkit.org/show_bug.cgi?id=214978
     5
     6        Reviewed by Wenson Hsieh.
     7
     8        Rebaselined tests for updated appearance.
     9
     10        * platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt:
     11        * platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
     12        * platform/mac-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt:
     13
    1142020-07-31  Hector Lopez  <hector_i_lopez@apple.com>
    215

  • trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt

    r264044 r265157  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (110,2) size 4x18
    7         text run at (110,2) width 4: " "
     6      RenderText {#text} at (110,3) size 4x18
     7        text run at (110,3) width 4: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer at (8,10) size 110x19 clip at (10,12) size 106x15
    10   RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    11     RenderBlock {DIV} at (6,3) size 59x13
     9layer at (8,10) size 110x21 clip at (10,12) size 106x17
     10  RenderFlexibleBox {INPUT} at (0,2) size 110x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11    RenderBlock {DIV} at (7,4) size 59x13
    1212      RenderText {#text} at (0,0) size 59x13
    1313        text run at (0,0) width 59: "Apr 1, 1976"
    14 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    15   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    16     RenderBlock {DIV} at (25,3) size 59x13
     14layer at (122,10) size 110x21 clip at (124,12) size 106x17
     15  RenderFlexibleBox {INPUT} at (114,2) size 110x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     16    RenderBlock {DIV} at (24,4) size 59x13
    1717      RenderText {#text} at (0,0) size 59x13
    1818        text run at (0,0) width 59: "Apr 1, 1976"

  • trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt

    r264044 r265157  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (110,2) size 4x18
    7         text run at (110,2) width 4: " "
     6      RenderText {#text} at (110,3) size 4x18
     7        text run at (110,3) width 4: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer at (8,10) size 110x19 clip at (10,12) size 106x15
    10   RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    11     RenderBlock {DIV} at (6,3) size 43x13
     9layer at (8,10) size 110x21 clip at (10,12) size 106x17
     10  RenderFlexibleBox {INPUT} at (0,2) size 110x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11    RenderBlock {DIV} at (7,4) size 43x13
    1212      RenderText {#text} at (0,0) size 43x13
    1313        text run at (0,0) width 43: "9:41 AM"
    14 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    15   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    16     RenderBlock {DIV} at (41,3) size 43x13
     14layer at (122,10) size 110x21 clip at (124,12) size 106x17
     15  RenderFlexibleBox {INPUT} at (114,2) size 110x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     16    RenderBlock {DIV} at (40,4) size 43x13
    1717      RenderText {#text} at (0,0) size 43x13
    1818        text run at (0,0) width 18: "AM"

  • trunk/LayoutTests/platform/mac-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt

    r264044 r265157  
    88FAIL <input type="email"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
    99FAIL <input type="password"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
    10 FAIL <input type="date"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    11 FAIL <input type="month"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    12 FAIL <input type="week"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    13 FAIL <input type="time"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    14 FAIL <input type="datetime-local"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
     10FAIL <input type="date"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
     11FAIL <input type="month"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
     12FAIL <input type="week"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
     13FAIL <input type="time"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
     14FAIL <input type="datetime-local"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
    1515FAIL <input type="number"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
    1616FAIL <input type="range"> assert_equals: -webkit-appearance expected "auto" but got "slider-horizontal"

  • trunk/Source/WebCore/ChangeLog

    r265156 r265157  
     12020-07-31  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Date/time input types should have a textfield appearance
     4        https://bugs.webkit.org/show_bug.cgi?id=214978
     5
     6        Reviewed by Wenson Hsieh.
     7
     8        On iOS, date/time input types have a menulist-button appearance. However, this appearance
     9        does not match the style of native date controls on macOS. The textfield appearance
     10        with no focus ring brings us closer to a natively styled control.
     11
     12        * rendering/RenderTheme.h:
     13        * rendering/RenderThemeMac.h:
     14        * rendering/RenderThemeMac.mm:
     15        (WebCore::RenderThemeMac::dateInputStyleSheet const):
     16        (WebCore::RenderThemeMac::dateTimeLocalInputStyleSheet const):
     17        (WebCore::RenderThemeMac::monthInputStyleSheet const):
     18        (WebCore::RenderThemeMac::timeInputStyleSheet const):
     19        (WebCore::RenderThemeMac::weekInputStyleSheet const):
     20
    1212020-07-31  Brady Eidson  <beidson@apple.com>
    222

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

    r264525 r265157  
    103103#endif
    104104#if ENABLE(INPUT_TYPE_DATE)
    105     String dateInputStyleSheet() const;
     105    virtual String dateInputStyleSheet() const;
    106106#endif
    107107#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    108     String dateTimeLocalInputStyleSheet() const;
     108    virtual String dateTimeLocalInputStyleSheet() const;
    109109#endif
    110110#if ENABLE(INPUT_TYPE_MONTH)
    111     String monthInputStyleSheet() const;
     111    virtual String monthInputStyleSheet() const;
    112112#endif
    113113#if ENABLE(INPUT_TYPE_TIME)
    114     String timeInputStyleSheet() const;
     114    virtual String timeInputStyleSheet() const;
    115115#endif
    116116#if ENABLE(INPUT_TYPE_WEEK)
    117     String weekInputStyleSheet() const;
     117    virtual String weekInputStyleSheet() const;
    118118#endif
    119119

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

    r264525 r265157  
    110110#endif
    111111
     112#if ENABLE(INPUT_TYPE_DATE)
     113    String dateInputStyleSheet() const final;
     114#endif
     115#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
     116    String dateTimeLocalInputStyleSheet() const final;
     117#endif
     118#if ENABLE(INPUT_TYPE_MONTH)
     119    String monthInputStyleSheet() const final;
     120#endif
     121#if ENABLE(INPUT_TYPE_TIME)
     122    String timeInputStyleSheet() const final;
     123#endif
     124#if ENABLE(INPUT_TYPE_WEEK)
     125    String weekInputStyleSheet() const final;
     126#endif
     127
    112128#if ENABLE(SERVICE_CONTROLS)
    113129    String imageControlsStyleSheet() const final;

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

    r264584 r265157  
    359359    return [[NSData dataWithContentsOfFile:[bundle pathForResource:iconName ofType:iconType inDirectory:directory]] base64EncodedStringWithOptions:0];
    360360}
     361
     362#if ENABLE(INPUT_TYPE_DATE)
     363
     364String RenderThemeMac::dateInputStyleSheet() const
     365{
     366    return "input[type=\"date\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
     367}
     368
     369#endif
     370
     371#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
     372
     373String RenderThemeMac::dateTimeLocalInputStyleSheet() const
     374{
     375    return "input[type=\"datetime-local\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
     376}
     377
     378#endif
     379
     380#if ENABLE(INPUT_TYPE_MONTH)
     381
     382String RenderThemeMac::monthInputStyleSheet() const
     383{
     384    return "input[type=\"month\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
     385}
     386
     387#endif
     388
     389#if ENABLE(INPUT_TYPE_TIME)
     390
     391String RenderThemeMac::timeInputStyleSheet() const
     392{
     393    return "input[type=\"time\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
     394}
     395
     396#endif
     397
     398#if ENABLE(INPUT_TYPE_WEEK)
     399
     400String RenderThemeMac::weekInputStyleSheet() const
     401{
     402    return "input[type=\"week\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
     403}
     404
     405#endif
    361406
    362407#if ENABLE(SERVICE_CONTROLS)
Note: See TracChangeset for help on using the changeset viewer.