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

Changeset 267701 in webkit


Ignore:
Timestamp:
Sep 28, 2020, 8:37:19 AM (6 years ago)
Author:
Aditya Keerthi
Message:

[macOS] Update the appearance of editable date/time controls to match the system
​https://bugs.webkit.org/show_bug.cgi?id=216616
<rdar://problem/69004603>

Reviewed by Devin Rousso.

Source/WebCore:

The default appearance of editable components within the date/time
control should closely match NSDatePicker.

  1. Focused components should have rounded corners

This is achieved by adding the border-radius property to the
datetime-edit fields.

  1. Use a raised colon separator for time inputs

The colon should be raised as it is surrounded two numbers. However,
since the colon is rendered in its own <div>, it remains lowered. To
raise the colon, the "ss03" font-feature-setting is enabled. Note that
this can cause issues with fonts that use "ss03" for a different purpose.
However, since we do not have support for the @font-feature-values rule
in CSS, there is currently no way to workaround this problem. Instead,
the issue should be fixed once we gain CSS support.

  1. Components should have a fixed width, and the width of the control should match the content

Since the control is not guaranteed to use a monospace font, the current
design results in editable components being resized each time the value
changes. To fix this issue, the display type was changed to inline-block
and the min-width of a component is computed at runtime. See below for
more details.

  • css/html.css:

Added UA stylesheet code that was removed from RenderTheme.

(input::-webkit-datetime-edit):
(input::-webkit-datetime-edit-year-field,):

Display inline-block allows us to set a fixed width for individual
components. The text is center-aligned so that changes are not
jarring. Finally, the font property is now "inherit !important",
as it does not make sense for the font used in a component to
differ from the control's font.

(input::-webkit-datetime-edit-year-field:focus,): Add rounded corners on focus.

  • html/shadow/DateTimeFieldElement.cpp:

(WebCore::DateTimeFieldElement::DateTimeFieldElement):

  • html/shadow/DateTimeFieldElements.cpp: Call setHasCustomStyleResolveCallbacks() to compute min-width.

(WebCore::DateTimeMillisecondFieldElement::DateTimeMillisecondFieldElement): Drive-by fix - milliseconds component has 3 digits.

  • html/shadow/DateTimeNumericFieldElement.cpp:

(WebCore::DateTimeNumericFieldElement::resolveCustomStyle):

The min-width of a numeric field should be the largest possible width
depending on the font, the largest digit character in the font and the
length of the field. Ten possible values are tested (0-9).

  • html/shadow/DateTimeNumericFieldElement.h:
  • html/shadow/DateTimeSymbolicFieldElement.cpp:

(WebCore::DateTimeSymbolicFieldElement::resolveCustomStyle):

The min-width of a symbolic field should be the largest symbol given
a font. Two (meridiem) to twelve (month) values may be tested.

  • html/shadow/DateTimeSymbolicFieldElement.h:
  • rendering/RenderTheme.cpp:
  • rendering/RenderTheme.h: Moved code to html.css.
  • rendering/RenderThemeMac.h:
  • rendering/RenderThemeMac.mm: Moved code to html.css.
  • style/UserAgentStyle.cpp:

(WebCore::Style::UserAgentStyle::ensureDefaultStyleSheetsForElement): Moved code to html.css.

  • style/UserAgentStyle.h:

LayoutTests:

Updated stylesheets so that font properties are not set on inner elements
of the control and rebaselined existing tests.

  • fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html:
  • fast/forms/date/date-editable-components/date-editable-components-mouse-events.html:
  • fast/forms/date/date-pseudo-elements.html:
  • fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html:
  • fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html:
  • fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html:
  • fast/forms/time/time-editable-components/time-editable-components-mouse-events.html:
  • platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt:
  • platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt:

The newly failing tests for <input type=week> are a false negative.
Previously, the style for this input type was empty, causing some
tests to incorrectly pass. The new failures are consistent with the
other date/time inputs, see the rest of the expectations for specifics.

  • platform/mac-catalina/fast/forms/date/date-input-rendering-basic-expected.txt:
  • platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt: Added.
  • platform/mac-mojave/fast/forms/date/date-input-rendering-basic-expected.txt:
  • platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt: Added.
  • platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt:
  • platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt:
  • platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
Location:
trunk
Files:
4 added
29 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r267700 r267701  
     12020-09-28  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Update the appearance of editable date/time controls to match the system
     4        https://bugs.webkit.org/show_bug.cgi?id=216616
     5        <rdar://problem/69004603>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Updated stylesheets so that font properties are not set on inner elements
     10        of the control and rebaselined existing tests.
     11
     12        * fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html:
     13        * fast/forms/date/date-editable-components/date-editable-components-mouse-events.html:
     14        * fast/forms/date/date-pseudo-elements.html:
     15        * fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html:
     16        * fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html:
     17        * fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html:
     18        * fast/forms/time/time-editable-components/time-editable-components-mouse-events.html:
     19        * platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt:
     20        * platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt:
     21
     22        The newly failing tests for <input type=week> are a false negative.
     23        Previously, the style for this input type was empty, causing some
     24        tests to incorrectly pass. The new failures are consistent with the
     25        other date/time inputs, see the rest of the expectations for specifics.
     26
     27        * platform/mac-catalina/fast/forms/date/date-input-rendering-basic-expected.txt:
     28        * platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt: Added.
     29        * platform/mac-mojave/fast/forms/date/date-input-rendering-basic-expected.txt:
     30        * platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt: Added.
     31        * platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt:
     32        * platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt:
     33        * platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
     34
    1352020-09-28  Zalan Bujtas  <zalan@apple.com>
    236

  • trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html

    r266514 r267701  
    77input {
    88    width: 300px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text {
    12     font-size: 30px;
    13 }
    14 
    15 input::-webkit-datetime-edit-month-field {
    16     font-size: 30px;
    17 }
    18 
    19 input::-webkit-datetime-edit-day-field {
    20     font-size: 30px;
    21 }
    22 
    23 input::-webkit-datetime-edit-year-field {
    249    font-size: 30px;
    2510}

  • trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-mouse-events.html

    r266514 r267701  
    77input {
    88    width: 300px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text {
    12     font-size: 30px;
    13 }
    14 
    15 input::-webkit-datetime-edit-month-field {
    16     font-size: 30px;
    17 }
    18 
    19 input::-webkit-datetime-edit-day-field {
    20     font-size: 30px;
    21 }
    22 
    23 input::-webkit-datetime-edit-year-field {
    249    font-size: 30px;
    2510}

  • trunk/LayoutTests/fast/forms/date/date-pseudo-elements.html

    r266351 r267701  
    1010input::-webkit-datetime-edit-text {
    1111    color: yellow;
    12     font-family: monospace;
    13     font-size: 15px;
    1412}
    1513
    1614input::-webkit-datetime-edit-month-field {
    1715    color: red;
    18     font-family: monospace;
    19     font-size: 15px;
    2016}
    2117
    2218input::-webkit-datetime-edit-day-field {
    2319    color: green;
    24     font-family: monospace;
    25     font-size: 15px;
    2620}
    2721
    2822input::-webkit-datetime-edit-year-field {
    2923    color: blue;
    30     font-family: monospace;
    31     font-size: 15px;
    3224}
    3325</style>

  • trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html

    r266830 r267701  
    77input {
    88    width: 600px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text,
    12 input::-webkit-datetime-edit-year-field,
    13 input::-webkit-datetime-edit-month-field,
    14 input::-webkit-datetime-edit-day-field,
    15 input::-webkit-datetime-edit-hour-field,
    16 input::-webkit-datetime-edit-minute-field,
    17 input::-webkit-datetime-edit-meridiem-field {
    189    font-size: 30px;
    1910}

  • trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html

    r266830 r267701  
    77input {
    88    width: 600px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text,
    12 input::-webkit-datetime-edit-year-field,
    13 input::-webkit-datetime-edit-month-field,
    14 input::-webkit-datetime-edit-day-field,
    15 input::-webkit-datetime-edit-hour-field,
    16 input::-webkit-datetime-edit-minute-field,
    17 input::-webkit-datetime-edit-meridiem-field {
    189    font-size: 30px;
    1910}

  • trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html

    r266779 r267701  
    77input {
    88    width: 300px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text {
    12     font-size: 30px;
    13 }
    14 
    15 input::-webkit-datetime-edit-hour-field {
    16     font-size: 30px;
    17 }
    18 
    19 input::-webkit-datetime-edit-minute-field {
    20     font-size: 30px;
    21 }
    22 
    23 input::-webkit-datetime-edit-meridiem-field {
    249    font-size: 30px;
    2510}

  • trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-mouse-events.html

    r266779 r267701  
    77input {
    88    width: 300px;
    9 }
    10 
    11 input::-webkit-datetime-edit-text {
    12     font-size: 30px;
    13 }
    14 
    15 input::-webkit-datetime-edit-hour-field {
    16     font-size: 30px;
    17 }
    18 
    19 input::-webkit-datetime-edit-minute-field {
    20     font-size: 30px;
    21 }
    22 
    23 input::-webkit-datetime-edit-meridiem-field {
    249    font-size: 30px;
    2510}

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

    r249886 r267701  
    1010FAIL <input type="date"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    1111FAIL <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 "textfield"
     12FAIL <input type="week"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    1313FAIL <input type="time"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
    1414FAIL <input type="datetime-local"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"

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

    r267658 r267701  
    4848FAIL <input type="month" value="2020-01" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
    4949FAIL <input type="month" value="2020-01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
    50 PASS <input type="week" value="2020-W01" style="overflow: visible; appearance: auto;">
    51 PASS <input type="week" value="2020-W01" style="overflow: hidden; appearance: auto;">
    52 FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 71
    53 PASS <input type="week" value="2020-W01" style="overflow: visible; appearance: none;">
    54 PASS <input type="week" value="2020-W01" style="overflow: hidden; appearance: none;">
    55 FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 71
     50FAIL <input type="week" value="2020-W01" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
     51FAIL <input type="week" value="2020-W01" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
     52FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
     53FAIL <input type="week" value="2020-W01" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
     54FAIL <input type="week" value="2020-W01" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
     55FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
    5656FAIL <input type="time" value="00:00" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
    5757FAIL <input type="time" value="00:00" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27

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

    r266500 r267701  
    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 (83,4) size 5x18
     7        text run at (83,4) width 5: " "
    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 layer at (11,13) size 65x13 scrollHeight 14
    12   RenderBlock {DIV} at (3,3) size 66x13
    13     RenderBlock {DIV} at (0,0) size 66x13
    14       RenderInline {DIV} at (0,0) size 17x15
    15         RenderText {#text} at (1,0) size 15x13
    16           text run at (1,0) width 15: "04"
    17       RenderInline {DIV} at (0,0) size 4x13
    18         RenderText {#text} at (16,0) size 4x13
    19           text run at (16,0) width 4: "/"
    20       RenderInline {DIV} at (0,0) size 16x15
    21         RenderText {#text} at (20,0) size 14x13
    22           text run at (20,0) width 14: "01"
    23       RenderInline {DIV} at (0,0) size 4x13
    24         RenderText {#text} at (34,0) size 4x13
    25           text run at (34,0) width 4: "/"
    26       RenderInline {DIV} at (0,0) size 29x15
    27         RenderText {#text} at (38,0) size 27x13
    28           text run at (38,0) width 27: "1976"
    29 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    30   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (164,13) size 65x13 scrollHeight 14
    32   RenderBlock {DIV} at (41,3) size 66x13
    33     RenderBlock {DIV} at (0,0) size 66x13
    34       RenderInline {DIV} at (0,0) size 17x15
    35         RenderText {#text} at (1,0) size 15x13
    36           text run at (1,0) width 15: "04"
    37       RenderInline {DIV} at (0,0) size 4x13
    38         RenderText {#text} at (16,0) size 4x13
    39           text run at (16,0) width 4: "/"
    40       RenderInline {DIV} at (0,0) size 16x15
    41         RenderText {#text} at (20,0) size 14x13
    42           text run at (20,0) width 14: "01"
    43       RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (34,0) size 4x13
    45           text run at (34,0) width 4: "/"
    46       RenderInline {DIV} at (0,0) size 29x15
    47         RenderText {#text} at (38,0) size 27x13
    48           text run at (38,0) width 27: "1976"
     9layer at (10,10) size 79x23 clip at (12,12) size 75x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 73x17
     12  RenderBlock {DIV} at (3,3) size 74x17
     13    RenderBlock {DIV} at (1,1) size 72x15
     14      RenderBlock {DIV} at (0,0) size 17x15
     15        RenderText {#text} at (1,1) size 15x13
     16          text run at (1,1) width 15: "04"
     17      RenderInline {DIV} at (0,0) size 5x13
     18        RenderText {#text} at (16,1) size 5x13
     19          text run at (16,1) width 5: "/"
     20      RenderBlock {DIV} at (20,0) size 17x15
     21        RenderText {#text} at (1,1) size 15x13
     22          text run at (1,1) width 15: "01"
     23      RenderInline {DIV} at (0,0) size 5x13
     24        RenderText {#text} at (36,1) size 5x13
     25          text run at (36,1) width 5: "/"
     26      RenderBlock {DIV} at (40,0) size 32x15
     27        RenderText {#text} at (1,1) size 29x13
     28          text run at (1,1) width 29: "1976"
     29layer at (97,10) size 79x23 clip at (99,12) size 75x19
     30  RenderFlexibleBox {INPUT} at (89,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (100,13) size 73x17
     32  RenderBlock {DIV} at (3,3) size 74x17
     33    RenderBlock {DIV} at (1,1) size 72x15
     34      RenderBlock {DIV} at (54,0) size 18x15
     35        RenderText {#text} at (1,1) size 15x13
     36          text run at (1,1) width 15: "04"
     37      RenderInline {DIV} at (0,0) size 5x13
     38        RenderText {#text} at (50,1) size 5x13
     39          text run at (50,1) width 5 RTL: "/"
     40      RenderBlock {DIV} at (34,0) size 17x15
     41        RenderText {#text} at (1,1) size 15x13
     42          text run at (1,1) width 15: "01"
     43      RenderInline {DIV} at (0,0) size 5x13
     44        RenderText {#text} at (30,1) size 5x13
     45          text run at (30,1) width 5 RTL: "/"
     46      RenderBlock {DIV} at (0,0) size 31x15
     47        RenderText {#text} at (1,1) size 29x13
     48          text run at (1,1) width 29: "1976"

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

    r266500 r267701  
    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 (83,4) size 5x18
     7        text run at (83,4) width 5: " "
    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 layer at (11,13) size 65x13 scrollHeight 14
    12   RenderBlock {DIV} at (3,3) size 66x13
    13     RenderBlock {DIV} at (0,0) size 66x13
    14       RenderInline {DIV} at (0,0) size 17x15
    15         RenderText {#text} at (1,0) size 15x13
    16           text run at (1,0) width 15: "04"
    17       RenderInline {DIV} at (0,0) size 4x13
    18         RenderText {#text} at (16,0) size 4x13
    19           text run at (16,0) width 4: "/"
    20       RenderInline {DIV} at (0,0) size 16x15
    21         RenderText {#text} at (20,0) size 14x13
    22           text run at (20,0) width 14: "01"
    23       RenderInline {DIV} at (0,0) size 4x13
    24         RenderText {#text} at (34,0) size 4x13
    25           text run at (34,0) width 4: "/"
    26       RenderInline {DIV} at (0,0) size 29x15
    27         RenderText {#text} at (38,0) size 27x13
    28           text run at (38,0) width 27: "1976"
    29 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    30   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (164,13) size 65x13 scrollHeight 14
    32   RenderBlock {DIV} at (41,3) size 66x13
    33     RenderBlock {DIV} at (0,0) size 66x13
    34       RenderInline {DIV} at (0,0) size 17x15
    35         RenderText {#text} at (1,0) size 15x13
    36           text run at (1,0) width 15: "04"
    37       RenderInline {DIV} at (0,0) size 4x13
    38         RenderText {#text} at (16,0) size 4x13
    39           text run at (16,0) width 4: "/"
    40       RenderInline {DIV} at (0,0) size 16x15
    41         RenderText {#text} at (20,0) size 14x13
    42           text run at (20,0) width 14: "01"
    43       RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (34,0) size 4x13
    45           text run at (34,0) width 4: "/"
    46       RenderInline {DIV} at (0,0) size 29x15
    47         RenderText {#text} at (38,0) size 27x13
    48           text run at (38,0) width 27: "1976"
     9layer at (10,10) size 79x23 clip at (12,12) size 75x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 73x17
     12  RenderBlock {DIV} at (3,3) size 74x17
     13    RenderBlock {DIV} at (1,1) size 72x15
     14      RenderBlock {DIV} at (0,0) size 17x15
     15        RenderText {#text} at (1,1) size 15x13
     16          text run at (1,1) width 15: "04"
     17      RenderInline {DIV} at (0,0) size 5x13
     18        RenderText {#text} at (16,1) size 5x13
     19          text run at (16,1) width 5: "/"
     20      RenderBlock {DIV} at (20,0) size 17x15
     21        RenderText {#text} at (1,1) size 15x13
     22          text run at (1,1) width 15: "01"
     23      RenderInline {DIV} at (0,0) size 5x13
     24        RenderText {#text} at (36,1) size 5x13
     25          text run at (36,1) width 5: "/"
     26      RenderBlock {DIV} at (40,0) size 32x15
     27        RenderText {#text} at (1,1) size 29x13
     28          text run at (1,1) width 29: "1976"
     29layer at (97,10) size 79x23 clip at (99,12) size 75x19
     30  RenderFlexibleBox {INPUT} at (89,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (100,13) size 73x17
     32  RenderBlock {DIV} at (3,3) size 74x17
     33    RenderBlock {DIV} at (1,1) size 72x15
     34      RenderBlock {DIV} at (54,0) size 18x15
     35        RenderText {#text} at (1,1) size 15x13
     36          text run at (1,1) width 15: "04"
     37      RenderInline {DIV} at (0,0) size 5x13
     38        RenderText {#text} at (50,1) size 5x13
     39          text run at (50,1) width 5 RTL: "/"
     40      RenderBlock {DIV} at (34,0) size 17x15
     41        RenderText {#text} at (1,1) size 15x13
     42          text run at (1,1) width 15: "01"
     43      RenderInline {DIV} at (0,0) size 5x13
     44        RenderText {#text} at (30,1) size 5x13
     45          text run at (30,1) width 5 RTL: "/"
     46      RenderBlock {DIV} at (0,0) size 31x15
     47        RenderText {#text} at (1,1) size 29x13
     48          text run at (1,1) width 29: "1976"

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

    r266500 r267701  
    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 (80,4) size 5x18
     7        text run at (80,4) width 5: " "
    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 layer at (11,13) size 64x13 scrollHeight 14
    12   RenderBlock {DIV} at (3,3) size 65x13
    13     RenderBlock {DIV} at (0,0) size 65x13
    14       RenderInline {DIV} at (0,0) size 17x15
    15         RenderText {#text} at (1,0) size 15x13
    16           text run at (1,0) width 15: "04"
     9layer at (10,10) size 77x23 clip at (12,12) size 73x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 77x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 71x17
     12  RenderBlock {DIV} at (3,3) size 71x17
     13    RenderBlock {DIV} at (1,1) size 69x15
     14      RenderBlock {DIV} at (0,0) size 16x15
     15        RenderText {#text} at (1,1) size 14x13
     16          text run at (1,1) width 14: "04"
    1717      RenderInline {DIV} at (0,0) size 4x13
    18         RenderText {#text} at (16,0) size 4x13
    19           text run at (16,0) width 4: "/"
    20       RenderInline {DIV} at (0,0) size 15x15
    21         RenderText {#text} at (20,0) size 13x13
    22           text run at (20,0) width 13: "01"
     18        RenderText {#text} at (16,1) size 4x13
     19          text run at (16,1) width 4: "/"
     20      RenderBlock {DIV} at (19,0) size 17x15
     21        RenderText {#text} at (1,1) size 14x13
     22          text run at (1,1) width 14: "01"
     23      RenderInline {DIV} at (0,0) size 4x13
     24        RenderText {#text} at (35,1) size 4x13
     25          text run at (35,1) width 4: "/"
     26      RenderBlock {DIV} at (38,0) size 31x15
     27        RenderText {#text} at (1,1) size 28x13
     28          text run at (1,1) width 28: "1976"
     29layer at (95,10) size 77x23 clip at (97,12) size 73x19
     30  RenderFlexibleBox {INPUT} at (86,2) size 78x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (98,13) size 71x17
     32  RenderBlock {DIV} at (3,3) size 71x17
     33    RenderBlock {DIV} at (1,1) size 69x15
     34      RenderBlock {DIV} at (52,0) size 17x15
     35        RenderText {#text} at (1,1) size 14x13
     36          text run at (1,1) width 14: "04"
     37      RenderInline {DIV} at (0,0) size 4x13
     38        RenderText {#text} at (49,1) size 4x13
     39          text run at (49,1) width 4 RTL: "/"
     40      RenderBlock {DIV} at (33,0) size 17x15
     41        RenderText {#text} at (1,1) size 14x13
     42          text run at (1,1) width 14: "01"
    2343      RenderInline {DIV} at (0,0) size 5x13
    24         RenderText {#text} at (33,0) size 5x13
    25           text run at (33,0) width 5: "/"
    26       RenderInline {DIV} at (0,0) size 28x15
    27         RenderText {#text} at (38,0) size 26x13
    28           text run at (38,0) width 26: "1976"
    29 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    30   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (165,13) size 64x13 scrollHeight 14
    32   RenderBlock {DIV} at (42,3) size 65x13
    33     RenderBlock {DIV} at (0,0) size 65x13
    34       RenderInline {DIV} at (0,0) size 17x15
    35         RenderText {#text} at (1,0) size 15x13
    36           text run at (1,0) width 15: "04"
    37       RenderInline {DIV} at (0,0) size 4x13
    38         RenderText {#text} at (16,0) size 4x13
    39           text run at (16,0) width 4: "/"
    40       RenderInline {DIV} at (0,0) size 15x15
    41         RenderText {#text} at (20,0) size 13x13
    42           text run at (20,0) width 13: "01"
    43       RenderInline {DIV} at (0,0) size 5x13
    44         RenderText {#text} at (33,0) size 5x13
    45           text run at (33,0) width 5: "/"
    46       RenderInline {DIV} at (0,0) size 28x15
    47         RenderText {#text} at (38,0) size 26x13
    48           text run at (38,0) width 26: "1976"
     44        RenderText {#text} at (29,1) size 5x13
     45          text run at (29,1) width 5 RTL: "/"
     46      RenderBlock {DIV} at (0,0) size 30x15
     47        RenderText {#text} at (1,1) size 28x13
     48          text run at (1,1) width 28: "1976"

  • trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt

    r266351 r267701  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (110,5) size 4x18
    7         text run at (110,5) width 4: " "
     6      RenderText {#text} at (110,7) size 5x18
     7        text run at (110,7) width 5: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer at (8,10) size 110x25 clip at (10,12) size 106x21
    10   RenderFlexibleBox {INPUT} at (0,2) size 110x25 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    11 layer at (11,13) size 98x19 clip at (12,14) size 96x17 scrollHeight 18
    12   RenderBlock {DIV} at (3,3) size 99x19 [border: (1px solid #FF0000)]
    13     RenderBlock {DIV} at (1,1) size 97x17
    14       RenderInline {DIV} at (0,0) size 21x19 [color=#FF0000]
    15         RenderText {#text} at (1,0) size 19x17
    16           text run at (1,0) width 19: "04"
     9layer at (10,10) size 106x29 clip at (12,12) size 102x25
     10  RenderFlexibleBox {INPUT} at (2,2) size 107x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 100x23 clip at (14,14) size 98x21
     12  RenderBlock {DIV} at (3,3) size 101x23 [border: (1px solid #FF0000)]
     13    RenderBlock {DIV} at (2,2) size 97x19
     14      RenderBlock {DIV} at (0,0) size 21x19 [color=#FF0000]
     15        RenderText {#text} at (1,1) size 19x17
     16          text run at (1,1) width 19: "04"
    1717      RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
    18         RenderText {#text} at (20,0) size 10x17
    19           text run at (20,0) width 10: "/"
    20       RenderInline {DIV} at (0,0) size 21x19 [color=#008000]
    21         RenderText {#text} at (30,0) size 19x17
    22           text run at (30,0) width 19: "01"
     18        RenderText {#text} at (20,1) size 10x17
     19          text run at (20,1) width 10: "/"
     20      RenderBlock {DIV} at (29,0) size 21x19 [color=#008000]
     21        RenderText {#text} at (1,1) size 19x17
     22          text run at (1,1) width 19: "01"
    2323      RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
    24         RenderText {#text} at (49,0) size 10x17
    25           text run at (49,0) width 10: "/"
    26       RenderInline {DIV} at (0,0) size 39x19 [color=#0000FF]
    27         RenderText {#text} at (59,0) size 37x17
    28           text run at (59,0) width 37: "1976"
    29 layer at (122,10) size 110x25 clip at (124,12) size 106x21
    30   RenderFlexibleBox {INPUT} at (114,2) size 110x25 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (131,13) size 98x19 clip at (132,14) size 96x17 scrollHeight 18
    32   RenderBlock {DIV} at (8,3) size 99x19 [border: (1px solid #FF0000)]
    33     RenderBlock {DIV} at (1,1) size 97x17
    34       RenderInline {DIV} at (0,0) size 21x19 [color=#FF0000]
    35         RenderText {#text} at (1,0) size 19x17
    36           text run at (1,0) width 19: "04"
     24        RenderText {#text} at (49,1) size 10x17
     25          text run at (49,1) width 10: "/"
     26      RenderBlock {DIV} at (58,0) size 39x19 [color=#0000FF]
     27        RenderText {#text} at (1,1) size 37x17
     28          text run at (1,1) width 37: "1976"
     29layer at (124,10) size 106x29 clip at (126,12) size 102x25
     30  RenderFlexibleBox {INPUT} at (116,2) size 107x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (127,13) size 100x23 clip at (128,14) size 98x21
     32  RenderBlock {DIV} at (3,3) size 101x23 [border: (1px solid #FF0000)]
     33    RenderBlock {DIV} at (2,2) size 97x19
     34      RenderBlock {DIV} at (76,0) size 21x19 [color=#FF0000]
     35        RenderText {#text} at (1,1) size 19x17
     36          text run at (1,1) width 19: "04"
    3737      RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
    38         RenderText {#text} at (20,0) size 10x17
    39           text run at (20,0) width 10: "/"
    40       RenderInline {DIV} at (0,0) size 21x19 [color=#008000]
    41         RenderText {#text} at (30,0) size 19x17
    42           text run at (30,0) width 19: "01"
     38        RenderText {#text} at (67,1) size 10x17
     39          text run at (67,1) width 10 RTL: "/"
     40      RenderBlock {DIV} at (47,0) size 21x19 [color=#008000]
     41        RenderText {#text} at (1,1) size 19x17
     42          text run at (1,1) width 19: "01"
    4343      RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
    44         RenderText {#text} at (49,0) size 10x17
    45           text run at (49,0) width 10: "/"
    46       RenderInline {DIV} at (0,0) size 39x19 [color=#0000FF]
    47         RenderText {#text} at (59,0) size 37x17
    48           text run at (59,0) width 37: "1976"
     44        RenderText {#text} at (38,1) size 10x17
     45          text run at (38,1) width 10 RTL: "/"
     46      RenderBlock {DIV} at (0,0) size 39x19 [color=#0000FF]
     47        RenderText {#text} at (1,1) size 37x17
     48          text run at (1,1) width 37: "1976"

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

    r266779 r267701  
    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 (69,4) size 5x18
     7        text run at (69,4) width 5: " "
    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 layer at (11,13) size 56x13 scrollHeight 14
    12   RenderBlock {DIV} at (3,3) size 56x13
    13     RenderBlock {DIV} at (0,0) size 56x13
    14       RenderInline {DIV} at (0,0) size 17x15
    15         RenderText {#text} at (1,0) size 15x13
    16           text run at (1,0) width 15: "09"
     9layer at (10,10) size 66x23 clip at (12,12) size 62x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 66x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 60x17
     12  RenderBlock {DIV} at (3,3) size 60x17
     13    RenderBlock {DIV} at (1,1) size 58x15
     14      RenderBlock {DIV} at (0,0) size 16x15
     15        RenderText {#text} at (1,1) size 14x13
     16          text run at (1,1) width 14: "09"
    1717      RenderInline {DIV} at (0,0) size 4x13
    18         RenderText {#text} at (16,0) size 4x13
    19           text run at (16,0) width 4: ":"
    20       RenderInline {DIV} at (0,0) size 15x15
    21         RenderText {#text} at (20,0) size 13x13
    22           text run at (20,0) width 13: "41"
     18        RenderText {#text} at (16,1) size 4x13
     19          text run at (16,1) width 4: ":"
     20      RenderBlock {DIV} at (19,0) size 17x15
     21        RenderText {#text} at (1,1) size 14x13
     22          text run at (1,1) width 14: "41"
    2323      RenderInline {DIV} at (0,0) size 4x13
    24         RenderText {#text} at (33,0) size 4x13
    25           text run at (33,0) width 4: " "
    26       RenderInline {DIV} at (0,0) size 20x15
    27         RenderText {#text} at (37,0) size 18x13
    28           text run at (37,0) width 18: "AM"
    29 layer at (122,10) size 110x19 clip at (124,12) size 106x15
    30   RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (173,13) size 56x13 scrollHeight 14
    32   RenderBlock {DIV} at (51,3) size 56x13
    33     RenderBlock {DIV} at (0,0) size 56x13
    34       RenderInline {DIV} at (0,0) size 17x15
    35         RenderText {#text} at (23,0) size 15x13
    36           text run at (23,0) width 15: "09"
     24        RenderText {#text} at (35,1) size 4x13
     25          text run at (35,1) width 4: " "
     26      RenderBlock {DIV} at (38,0) size 20x15
     27        RenderText {#text} at (1,1) size 18x13
     28          text run at (1,1) width 18: "AM"
     29layer at (84,10) size 65x23 clip at (86,12) size 61x19
     30  RenderFlexibleBox {INPUT} at (75,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (87,13) size 60x17 backgroundClip at (87,13) size 59x17 clip at (87,13) size 59x17
     32  RenderBlock {DIV} at (3,3) size 60x17
     33    RenderBlock {DIV} at (1,1) size 58x15
     34      RenderBlock {DIV} at (41,0) size 17x15
     35        RenderText {#text} at (1,1) size 14x13
     36          text run at (1,1) width 14: "09"
    3737      RenderInline {DIV} at (0,0) size 4x13
    38         RenderText {#text} at (38,0) size 4x13
    39           text run at (38,0) width 4: ":"
    40       RenderInline {DIV} at (0,0) size 15x15
    41         RenderText {#text} at (42,0) size 13x13
    42           text run at (42,0) width 13: "41"
     38        RenderText {#text} at (38,1) size 4x13
     39          text run at (38,1) width 4 RTL: ":"
     40      RenderBlock {DIV} at (22,0) size 17x15
     41        RenderText {#text} at (1,1) size 14x13
     42          text run at (1,1) width 14: "41"
    4343      RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (19,0) size 4x13
    45           text run at (19,0) width 4 RTL: " "
    46       RenderInline {DIV} at (0,0) size 20x15
    47         RenderText {#text} at (1,0) size 18x13
    48           text run at (1,0) width 18: "AM"
     44        RenderText {#text} at (19,1) size 4x13
     45          text run at (19,1) width 4 RTL: " "
     46      RenderBlock {DIV} at (0,0) size 20x15
     47        RenderText {#text} at (1,1) size 18x13
     48          text run at (1,1) width 18: "AM"

  • trunk/Source/WebCore/ChangeLog

    r267700 r267701  
     12020-09-28  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        [macOS] Update the appearance of editable date/time controls to match the system
     4        https://bugs.webkit.org/show_bug.cgi?id=216616
     5        <rdar://problem/69004603>
     6
     7        Reviewed by Devin Rousso.
     8
     9        The default appearance of editable components within the date/time
     10        control should closely match NSDatePicker.
     11
     12        1. Focused components should have rounded corners
     13
     14        This is achieved by adding the border-radius property to the
     15        datetime-edit fields.
     16
     17        2. Use a raised colon separator for time inputs
     18
     19        The colon should be raised as it is surrounded two numbers. However,
     20        since the colon is rendered in its own <div>, it remains lowered. To
     21        raise the colon, the "ss03" font-feature-setting is enabled. Note that
     22        this can cause issues with fonts that use "ss03" for a different purpose.
     23        However, since we do not have support for the @font-feature-values rule
     24        in CSS, there is currently no way to workaround this problem. Instead,
     25        the issue should be fixed once we gain CSS support.
     26
     27        3. Components should have a fixed width, and the width of the control should match the content
     28
     29        Since the control is not guaranteed to use a monospace font, the current
     30        design results in editable components being resized each time the value
     31        changes. To fix this issue, the display type was changed to inline-block
     32        and the min-width of a component is computed at runtime. See below for
     33        more details.
     34
     35        * css/html.css:
     36
     37        Added UA stylesheet code that was removed from RenderTheme.
     38
     39        (input::-webkit-datetime-edit):
     40        (input::-webkit-datetime-edit-year-field,):
     41
     42        Display inline-block allows us to set a fixed width for individual
     43        components. The text is center-aligned so that changes are not
     44        jarring. Finally, the font property is now "inherit !important",
     45        as it does not make sense for the font used in a component to
     46        differ from the control's font.
     47
     48        (input::-webkit-datetime-edit-year-field:focus,): Add rounded corners on focus.
     49        * html/shadow/DateTimeFieldElement.cpp:
     50        (WebCore::DateTimeFieldElement::DateTimeFieldElement):
     51        * html/shadow/DateTimeFieldElements.cpp: Call setHasCustomStyleResolveCallbacks() to compute min-width.
     52        (WebCore::DateTimeMillisecondFieldElement::DateTimeMillisecondFieldElement): Drive-by fix - milliseconds component has 3 digits.
     53        * html/shadow/DateTimeNumericFieldElement.cpp:
     54        (WebCore::DateTimeNumericFieldElement::resolveCustomStyle):
     55
     56        The min-width of a numeric field should be the largest possible width
     57        depending on the font, the largest digit character in the font and the
     58        length of the field. Ten possible values are tested (0-9).
     59
     60        * html/shadow/DateTimeNumericFieldElement.h:
     61        * html/shadow/DateTimeSymbolicFieldElement.cpp:
     62        (WebCore::DateTimeSymbolicFieldElement::resolveCustomStyle):
     63
     64        The min-width of a symbolic field should be the largest symbol given
     65        a font. Two (meridiem) to twelve (month) values may be tested.
     66
     67        * html/shadow/DateTimeSymbolicFieldElement.h:
     68        * rendering/RenderTheme.cpp:
     69        * rendering/RenderTheme.h: Moved code to html.css.
     70        * rendering/RenderThemeMac.h:
     71        * rendering/RenderThemeMac.mm: Moved code to html.css.
     72        * style/UserAgentStyle.cpp:
     73        (WebCore::Style::UserAgentStyle::ensureDefaultStyleSheetsForElement): Moved code to html.css.
     74        * style/UserAgentStyle.h:
     75
    1762020-09-28  Zalan Bujtas  <zalan@apple.com>
    277

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

    r267166 r267701  
    480480}
    481481
     482#if defined(ENABLE_DATE_AND_TIME_INPUT_TYPES) && ENABLE_DATE_AND_TIME_INPUT_TYPES
     483input:matches([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
     484    -webkit-appearance: textfield;
     485    align-items: center;
     486    display: -webkit-inline-flex;
     487    overflow: hidden;
     488#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
     489    -webkit-appearance: menulist-button;
     490#else
     491    -webkit-appearance: textfield;
     492    outline: none;
     493    font-variant-numeric: tabular-nums;
     494    /* FIXME: Font features should be defined in a @font-feature-values rule, so that the feature setting is only applied to the system font. */
     495    /* "ss03" enables the raised colon separator on the system font. */
     496    font-feature-settings: "ss03";
     497#endif
     498}
     499#endif
     500
    482501input::-webkit-date-and-time-value {
    483502#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    … …  
    494513    display: inline-block;
    495514    overflow: hidden;
     515    padding: 1px;
    496516}
    497517
    … …  
    509529input::-webkit-datetime-edit-millisecond-field,
    510530input::-webkit-datetime-edit-meridiem-field {
    511     display: inline;
     531    display: inline-block;
     532    font: inherit !important;
    512533    padding: 1px;
     534    text-align: center;
    513535}
    514536
    … …  
    523545#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
    524546    background-color: -apple-system-control-accent;
     547    border-radius: 3px;
    525548    color: white;
    526549#else

  • trunk/Source/WebCore/html/shadow/DateTimeFieldElement.cpp

    r267699 r267701  
    5252    , m_fieldOwner(makeWeakPtr(fieldOwner))
    5353{
     54    setHasCustomStyleResolveCallbacks();
    5455}
    5556

  • trunk/Source/WebCore/html/shadow/DateTimeFieldElements.cpp

    r267074 r267701  
    156156
    157157DateTimeMillisecondFieldElement::DateTimeMillisecondFieldElement(Document& document, FieldOwner& fieldOwner)
    158     : DateTimeNumericFieldElement(document, fieldOwner, Range(0, 999), "--"_s)
     158    : DateTimeNumericFieldElement(document, fieldOwner, Range(0, 999), "---"_s)
    159159{
    160160}

  • trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.cpp

    r267699 r267701  
    3131
    3232#include "EventNames.h"
     33#include "FontCascade.h"
    3334#include "KeyboardEvent.h"
    3435#include "PlatformLocale.h"
     36#include "RenderBlock.h"
     37#include "RenderStyle.h"
     38#include "StyleResolver.h"
    3539#include <wtf/IsoMallocInlines.h>
    3640
    … …  
    5660    , m_placeholder(placeholder)
    5761{
     62}
     63
     64Optional<Style::ElementStyle> DateTimeNumericFieldElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle*)
     65{
     66    auto elementStyle = resolveStyle(&parentStyle);
     67    if (!elementStyle.renderStyle)
     68        return WTF::nullopt;
     69
     70    auto& font = elementStyle.renderStyle->fontCascade();
     71
     72    unsigned length = 2;
     73    if (m_range.maximum > 999)
     74        length = 4;
     75    else if (m_range.maximum > 99)
     76        length = 3;
     77
     78    auto& locale = localeForOwner();
     79
     80    float width = 0;
     81    for (char c = '0'; c <= '9'; ++c) {
     82        auto numberString = locale.convertToLocalizedNumber(makeString(pad(c, length, makeString(c))));
     83        width = std::max(width, font.width(RenderBlock::constructTextRun(numberString, *elementStyle.renderStyle)));
     84    }
     85
     86    elementStyle.renderStyle->setMinWidth({ width, Fixed });
     87    return elementStyle;
    5888}
    5989

  • trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.h

    r267699 r267701  
    6464
    6565private:
     66    Optional<Style::ElementStyle> resolveCustomStyle(const RenderStyle&, const RenderStyle*) final;
     67
    6668    // DateTimeFieldElement functions:
    6769    String value() const final;

  • trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.cpp

    r266779 r267701  
    3030#if ENABLE(DATE_AND_TIME_INPUT_TYPES)
    3131
     32#include "FontCascade.h"
     33#include "RenderBlock.h"
     34#include "RenderStyle.h"
     35#include "StyleResolver.h"
    3236#include <wtf/IsoMallocInlines.h>
    3337#include <wtf/text/StringBuilder.h>
    … …  
    5357{
    5458    ASSERT(!m_symbols.isEmpty());
     59}
     60
     61Optional<Style::ElementStyle> DateTimeSymbolicFieldElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle*)
     62{
     63    auto elementStyle = resolveStyle(&parentStyle);
     64    if (!elementStyle.renderStyle)
     65        return WTF::nullopt;
     66
     67    auto& font = elementStyle.renderStyle->fontCascade();
     68
     69    float width = 0;
     70    for (auto& symbol : m_symbols)
     71        width = std::max(width, font.width(RenderBlock::constructTextRun(symbol, *elementStyle.renderStyle)));
     72
     73    elementStyle.renderStyle->setMinWidth({ width, Fixed });
     74    return elementStyle;
    5575}
    5676

  • trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.h

    r266779 r267701  
    4848    static constexpr int invalidIndex = -1;
    4949
     50    Optional<Style::ElementStyle> resolveCustomStyle(const RenderStyle&, const RenderStyle*) final;
     51
    5052    String visibleEmptyValue() const;
    5153

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

    r267166 r267701  
    10251025
    10261026#endif // ENABLE(INPUT_TYPE_COLOR)
    1027 
    1028 #if PLATFORM(IOS_FAMILY)
    1029 #define DATE_INPUT_WIDTH ""
    1030 #else
    1031 #define DATE_INPUT_WIDTH "width: 10em; "
    1032 #endif
    1033 
    1034 #if ENABLE(INPUT_TYPE_DATE)
    1035 
    1036 String RenderTheme::dateInputStyleSheet() const
    1037 {
    1038     return "input[type=\"date\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
    1039 }
    1040 
    1041 #endif
    1042 
    1043 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    1044 
    1045 String RenderTheme::dateTimeLocalInputStyleSheet() const
    1046 {
    1047     return "input[type=\"datetime-local\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
    1048 }
    1049 
    1050 #endif
    1051 
    1052 #if ENABLE(INPUT_TYPE_MONTH)
    1053 
    1054 String RenderTheme::monthInputStyleSheet() const
    1055 {
    1056     return "input[type=\"month\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
    1057 }
    1058 
    1059 #endif
    1060 
    1061 #if ENABLE(INPUT_TYPE_TIME)
    1062 
    1063 String RenderTheme::timeInputStyleSheet() const
    1064 {
    1065     return "input[type=\"time\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
    1066 }
    1067 
    1068 #endif
    1069 
    1070 #if ENABLE(INPUT_TYPE_WEEK)
    1071 
    1072 String RenderTheme::weekInputStyleSheet() const
    1073 {
    1074 #if PLATFORM(IOS_FAMILY)
    1075     return emptyString();
    1076 #else
    1077     return "input[type=\"week\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
    1078 #endif
    1079 }
    1080 
    1081 #endif
    10821027
    10831028#if ENABLE(DATALIST_ELEMENT)

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

    r267166 r267701  
    101101#if ENABLE(INPUT_TYPE_COLOR)
    102102    String colorInputStyleSheet() const;
    103 #endif
    104 #if ENABLE(INPUT_TYPE_DATE)
    105     virtual String dateInputStyleSheet() const;
    106 #endif
    107 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    108     virtual String dateTimeLocalInputStyleSheet() const;
    109 #endif
    110 #if ENABLE(INPUT_TYPE_MONTH)
    111     virtual String monthInputStyleSheet() const;
    112 #endif
    113 #if ENABLE(INPUT_TYPE_TIME)
    114     virtual String timeInputStyleSheet() const;
    115 #endif
    116 #if ENABLE(INPUT_TYPE_WEEK)
    117     virtual String weekInputStyleSheet() const;
    118103#endif
    119104

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

    r267166 r267701  
    108108#endif
    109109
    110 #if ENABLE(INPUT_TYPE_DATE)
    111     String dateInputStyleSheet() const final;
    112 #endif
    113 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    114     String dateTimeLocalInputStyleSheet() const final;
    115 #endif
    116 #if ENABLE(INPUT_TYPE_MONTH)
    117     String monthInputStyleSheet() const final;
    118 #endif
    119 #if ENABLE(INPUT_TYPE_TIME)
    120     String timeInputStyleSheet() const final;
    121 #endif
    122 #if ENABLE(INPUT_TYPE_WEEK)
    123     String weekInputStyleSheet() const final;
    124 #endif
    125 
    126110#if ENABLE(SERVICE_CONTROLS)
    127111    String imageControlsStyleSheet() const final;

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

    r267166 r267701  
    356356    return [[NSData dataWithContentsOfFile:[bundle pathForResource:iconName ofType:iconType inDirectory:directory]] base64EncodedStringWithOptions:0];
    357357}
    358 
    359 #if ENABLE(INPUT_TYPE_DATE)
    360 
    361 String RenderThemeMac::dateInputStyleSheet() const
    362 {
    363     return "input[type=\"date\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
    364 }
    365 
    366 #endif
    367 
    368 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    369 
    370 String RenderThemeMac::dateTimeLocalInputStyleSheet() const
    371 {
    372     return "input[type=\"datetime-local\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 18em; outline: none; } "_s;
    373 }
    374 
    375 #endif
    376 
    377 #if ENABLE(INPUT_TYPE_MONTH)
    378 
    379 String RenderThemeMac::monthInputStyleSheet() const
    380 {
    381     return "input[type=\"month\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
    382 }
    383 
    384 #endif
    385 
    386 #if ENABLE(INPUT_TYPE_TIME)
    387 
    388 String RenderThemeMac::timeInputStyleSheet() const
    389 {
    390     return "input[type=\"time\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
    391 }
    392 
    393 #endif
    394 
    395 #if ENABLE(INPUT_TYPE_WEEK)
    396 
    397 String RenderThemeMac::weekInputStyleSheet() const
    398 {
    399     return "input[type=\"week\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
    400 }
    401 
    402 #endif
    403358
    404359#if ENABLE(SERVICE_CONTROLS)

  • trunk/Source/WebCore/style/UserAgentStyle.cpp

    r267576 r267701  
    8585StyleSheetContents* UserAgentStyle::colorInputStyleSheet;
    8686#endif
    87 #if ENABLE(INPUT_TYPE_DATE)
    88 StyleSheetContents* UserAgentStyle::dateInputStyleSheet;
    89 #endif
    90 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    91 StyleSheetContents* UserAgentStyle::dateTimeLocalInputStyleSheet;
    92 #endif
    93 #if ENABLE(INPUT_TYPE_MONTH)
    94 StyleSheetContents* UserAgentStyle::monthInputStyleSheet;
    95 #endif
    96 #if ENABLE(INPUT_TYPE_TIME)
    97 StyleSheetContents* UserAgentStyle::timeInputStyleSheet;
    98 #endif
    99 #if ENABLE(INPUT_TYPE_WEEK)
    100 StyleSheetContents* UserAgentStyle::weekInputStyleSheet;
    101 #endif
    10287
    10388#if PLATFORM(IOS_FAMILY)
    … …  
    283268        }
    284269#endif // ENABLE(INPUT_TYPE_COLOR)
    285 #if ENABLE(INPUT_TYPE_DATE)
    286         else if (!dateInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isDateField()) {
    287             dateInputStyleSheet = parseUASheet(RenderTheme::singleton().dateInputStyleSheet());
    288             addToDefaultStyle(*dateInputStyleSheet);
    289         }
    290 #endif // ENABLE(INPUT_TYPE_DATE)
    291 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    292         else if (!dateTimeLocalInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isDateTimeLocalField()) {
    293             dateTimeLocalInputStyleSheet = parseUASheet(RenderTheme::singleton().dateTimeLocalInputStyleSheet());
    294             addToDefaultStyle(*dateTimeLocalInputStyleSheet);
    295         }
    296 #endif // ENABLE(INPUT_TYPE_DATETIMELOCAL)
    297 #if ENABLE(INPUT_TYPE_MONTH)
    298         else if (!monthInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isMonthField()) {
    299             monthInputStyleSheet = parseUASheet(RenderTheme::singleton().monthInputStyleSheet());
    300             addToDefaultStyle(*monthInputStyleSheet);
    301         }
    302 #endif // ENABLE(INPUT_TYPE_MONTH)
    303 #if ENABLE(INPUT_TYPE_TIME)
    304         else if (!timeInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isTimeField()) {
    305             timeInputStyleSheet = parseUASheet(RenderTheme::singleton().timeInputStyleSheet());
    306             addToDefaultStyle(*timeInputStyleSheet);
    307         }
    308 #endif // ENABLE(INPUT_TYPE_TIME)
    309 #if ENABLE(INPUT_TYPE_WEEK)
    310         else if (!weekInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isWeekField()) {
    311             weekInputStyleSheet = parseUASheet(RenderTheme::singleton().weekInputStyleSheet());
    312             addToDefaultStyle(*weekInputStyleSheet);
    313         }
    314 #endif // ENABLE(INPUT_TYPE_WEEK)
    315270    } else if (is<SVGElement>(element)) {
    316271        if (!svgStyleSheet) {

  • trunk/Source/WebCore/style/UserAgentStyle.h

    r263977 r267701  
    5555    static StyleSheetContents* colorInputStyleSheet;
    5656#endif
    57 #if ENABLE(INPUT_TYPE_DATE)
    58     static StyleSheetContents* dateInputStyleSheet;
    59 #endif
    60 #if ENABLE(INPUT_TYPE_DATETIMELOCAL)
    61     static StyleSheetContents* dateTimeLocalInputStyleSheet;
    62 #endif
    63 #if ENABLE(INPUT_TYPE_MONTH)
    64     static StyleSheetContents* monthInputStyleSheet;
    65 #endif
    66 #if ENABLE(INPUT_TYPE_TIME)
    67     static StyleSheetContents* timeInputStyleSheet;
    68 #endif
    69 #if ENABLE(INPUT_TYPE_WEEK)
    70     static StyleSheetContents* weekInputStyleSheet;
    71 #endif
    7257
    7358    static StyleSheetContents* mediaQueryStyleSheet;
Note: See TracChangeset for help on using the changeset viewer.