Changeset 270148 in webkit


Ignore:
Timestamp:
Nov 21, 2020 9:24:24 AM (3 years ago)
Author:
Aditya Keerthi
Message:

Space between minute and meridiem fields in time inputs is too large
​https://bugs.webkit.org/show_bug.cgi?id=219217
<rdar://problem/71637133>

Reviewed by Devin Rousso.

Source/WebCore:

The space between minute and meridiem fields in time inputs appears two
CSS pixels larger than a space character. This appearance is due to the
presence of a 1px padding on field elements, which exists to prevent
selected fields from appearing squished.

To fix, apply a negative margin on each side of the element that has a
space character. This pulls fields closer together and negates the
effect of the field padding on the appearance of the space.

  • html/shadow/DateTimeEditElement.cpp:

(WebCore::DateTimeEditBuilder::visitLiteral):

LayoutTests:

Rebaselined tests to match new appearance.

  • platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt:
  • platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt:
  • platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r270141 r270148  
     12020-11-21  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        Space between minute and meridiem fields in time inputs is too large
     4        https://bugs.webkit.org/show_bug.cgi?id=219217
     5        <rdar://problem/71637133>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Rebaselined tests to match new appearance.
     10
     11        * platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt:
     12        * platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt:
     13        * platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt:
     14
    1152020-11-20  Chris Dumez  <cdumez@apple.com>
    216

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

    r267701 r270148  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (70,4) size 5x18
    7         text run at (70,4) width 5: " "
     6      RenderText {#text} at (68,4) size 5x18
     7        text run at (68,4) width 5: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer at (10,10) size 66x23 clip at (12,12) size 62x19
    10   RenderFlexibleBox {INPUT} at (2,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    11 layer at (13,13) size 60x17
    12   RenderBlock {DIV} at (3,3) size 61x17
    13     RenderBlock {DIV} at (1,1) size 59x15
     9layer at (10,10) size 64x23 clip at (12,12) size 60x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 58x17
     12  RenderBlock {DIV} at (3,3) size 59x17
     13    RenderBlock {DIV} at (1,1) size 57x15
    1414      RenderBlock {DIV} at (0,0) size 17x15
    1515        RenderText {#text} at (1,1) size 15x13
    … …  
    2222          text run at (1,1) width 15: "41"
    2323      RenderInline {DIV} at (0,0) size 4x13
    24         RenderText {#text} at (36,1) size 4x13
    25           text run at (36,1) width 4: " "
    26       RenderBlock {DIV} at (39,0) size 20x15
     24        RenderText {#text} at (35,1) size 4x13
     25          text run at (35,1) width 4: " "
     26      RenderBlock {DIV} at (37,0) size 20x15
    2727        RenderText {#text} at (1,1) size 18x13
    2828          text run at (1,1) width 18: "AM"
    29 layer at (84,10) size 67x23 clip at (86,12) size 63x19
    30   RenderFlexibleBox {INPUT} at (76,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (87,13) size 60x17
    32   RenderBlock {DIV} at (3,3) size 61x17
    33     RenderBlock {DIV} at (1,1) size 59x15
    34       RenderBlock {DIV} at (42,0) size 17x15
     29layer at (82,10) size 65x23 clip at (84,12) size 61x19
     30  RenderFlexibleBox {INPUT} at (74,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (85,13) size 58x17
     32  RenderBlock {DIV} at (3,3) size 59x17
     33    RenderBlock {DIV} at (1,1) size 57x15
     34      RenderBlock {DIV} at (40,0) size 17x15
    3535        RenderText {#text} at (1,1) size 15x13
    3636          text run at (1,1) width 15: "09"
    3737      RenderInline {DIV} at (0,0) size 5x13
    38         RenderText {#text} at (38,1) size 5x13
    39           text run at (38,1) width 5 RTL: ":"
    40       RenderBlock {DIV} at (22,0) size 17x15
     38        RenderText {#text} at (36,1) size 5x13
     39          text run at (36,1) width 5 RTL: ":"
     40      RenderBlock {DIV} at (20,0) size 17x15
    4141        RenderText {#text} at (1,1) size 15x13
    4242          text run at (1,1) width 15: "41"
    4343      RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (19,1) size 4x13
    45           text run at (19,1) width 4 RTL: " "
     44        RenderText {#text} at (18,1) size 4x13
     45          text run at (18,1) width 4 RTL: " "
    4646      RenderBlock {DIV} at (0,0) size 20x15
    4747        RenderText {#text} at (1,1) size 18x13

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

    r267701 r270148  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (70,4) size 5x18
    7         text run at (70,4) width 5: " "
     6      RenderText {#text} at (68,4) size 5x18
     7        text run at (68,4) width 5: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer at (10,10) size 66x23 clip at (12,12) size 62x19
    10   RenderFlexibleBox {INPUT} at (2,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    11 layer at (13,13) size 60x17
    12   RenderBlock {DIV} at (3,3) size 61x17
    13     RenderBlock {DIV} at (1,1) size 59x15
     9layer at (10,10) size 64x23 clip at (12,12) size 60x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 58x17
     12  RenderBlock {DIV} at (3,3) size 59x17
     13    RenderBlock {DIV} at (1,1) size 57x15
    1414      RenderBlock {DIV} at (0,0) size 17x15
    1515        RenderText {#text} at (1,1) size 15x13
    … …  
    2222          text run at (1,1) width 15: "41"
    2323      RenderInline {DIV} at (0,0) size 4x13
    24         RenderText {#text} at (36,1) size 4x13
    25           text run at (36,1) width 4: " "
    26       RenderBlock {DIV} at (39,0) size 20x15
     24        RenderText {#text} at (35,1) size 4x13
     25          text run at (35,1) width 4: " "
     26      RenderBlock {DIV} at (37,0) size 20x15
    2727        RenderText {#text} at (1,1) size 18x13
    2828          text run at (1,1) width 18: "AM"
    29 layer at (84,10) size 67x23 clip at (86,12) size 63x19
    30   RenderFlexibleBox {INPUT} at (76,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
    31 layer at (87,13) size 60x17
    32   RenderBlock {DIV} at (3,3) size 61x17
    33     RenderBlock {DIV} at (1,1) size 59x15
    34       RenderBlock {DIV} at (42,0) size 17x15
     29layer at (82,10) size 65x23 clip at (84,12) size 61x19
     30  RenderFlexibleBox {INPUT} at (74,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (85,13) size 58x17
     32  RenderBlock {DIV} at (3,3) size 59x17
     33    RenderBlock {DIV} at (1,1) size 57x15
     34      RenderBlock {DIV} at (40,0) size 17x15
    3535        RenderText {#text} at (1,1) size 15x13
    3636          text run at (1,1) width 15: "09"
    3737      RenderInline {DIV} at (0,0) size 5x13
    38         RenderText {#text} at (38,1) size 5x13
    39           text run at (38,1) width 5 RTL: ":"
    40       RenderBlock {DIV} at (22,0) size 17x15
     38        RenderText {#text} at (36,1) size 5x13
     39          text run at (36,1) width 5 RTL: ":"
     40      RenderBlock {DIV} at (20,0) size 17x15
    4141        RenderText {#text} at (1,1) size 15x13
    4242          text run at (1,1) width 15: "41"
    4343      RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (19,1) size 4x13
    45           text run at (19,1) width 4 RTL: " "
     44        RenderText {#text} at (18,1) size 4x13
     45          text run at (18,1) width 4 RTL: " "
    4646      RenderBlock {DIV} at (0,0) size 20x15
    4747        RenderText {#text} at (1,1) size 18x13

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

    r267701 r270148  
    44  RenderBlock {HTML} at (0,0) size 800x600
    55    RenderBody {BODY} at (8,8) size 784x584
    6       RenderText {#text} at (69,4) size 5x18
    7         text run at (69,4) width 5: " "
     6      RenderText {#text} at (67,4) size 5x18
     7        text run at (67,4) width 5: " "
    88      RenderText {#text} at (0,0) size 0x0
    9 layer 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)]
    11 layer at (13,13) size 60x17
    12   RenderBlock {DIV} at (3,3) size 60x17
    13     RenderBlock {DIV} at (1,1) size 58x15
     9layer at (10,10) size 64x23 clip at (12,12) size 60x19
     10  RenderFlexibleBox {INPUT} at (2,2) size 64x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     11layer at (13,13) size 58x17
     12  RenderBlock {DIV} at (3,3) size 58x17
     13    RenderBlock {DIV} at (1,1) size 56x15
    1414      RenderBlock {DIV} at (0,0) size 16x15
    1515        RenderText {#text} at (1,1) size 14x13
    … …  
    2222          text run at (1,1) width 14: "41"
    2323      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 20x15
     24        RenderText {#text} at (34,1) size 4x13
     25          text run at (34,1) width 4: " "
     26      RenderBlock {DIV} at (36,0) size 20x15
    2727        RenderText {#text} at (1,1) size 18x13
    2828          text run at (1,1) width 18: "AM"
    29 layer 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)]
    31 layer 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
     29layer at (82,10) size 63x23 clip at (84,12) size 59x19
     30  RenderFlexibleBox {INPUT} at (73,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
     31layer at (85,13) size 58x17 backgroundClip at (85,13) size 57x17 clip at (85,13) size 57x17
     32  RenderBlock {DIV} at (3,3) size 58x17
     33    RenderBlock {DIV} at (1,1) size 56x15
     34      RenderBlock {DIV} at (39,0) size 17x15
    3535        RenderText {#text} at (1,1) size 14x13
    3636          text run at (1,1) width 14: "09"
    3737      RenderInline {DIV} at (0,0) size 4x13
    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
     38        RenderText {#text} at (36,1) size 4x13
     39          text run at (36,1) width 4 RTL: ":"
     40      RenderBlock {DIV} at (20,0) size 17x15
    4141        RenderText {#text} at (1,1) size 14x13
    4242          text run at (1,1) width 14: "41"
    4343      RenderInline {DIV} at (0,0) size 4x13
    44         RenderText {#text} at (19,1) size 4x13
    45           text run at (19,1) width 4 RTL: " "
     44        RenderText {#text} at (18,1) size 4x13
     45          text run at (18,1) width 4 RTL: " "
    4646      RenderBlock {DIV} at (0,0) size 20x15
    4747        RenderText {#text} at (1,1) size 18x13

  • trunk/Source/WebCore/ChangeLog

    r270147 r270148  
     12020-11-21  Aditya Keerthi  <akeerthi@apple.com>
     2
     3        Space between minute and meridiem fields in time inputs is too large
     4        https://bugs.webkit.org/show_bug.cgi?id=219217
     5        <rdar://problem/71637133>
     6
     7        Reviewed by Devin Rousso.
     8
     9        The space between minute and meridiem fields in time inputs appears two
     10        CSS pixels larger than a space character. This appearance is due to the
     11        presence of a 1px padding on field elements, which exists to prevent
     12        selected fields from appearing squished.
     13
     14        To fix, apply a negative margin on each side of the element that has a
     15        space character. This pulls fields closer together and negates the
     16        effect of the field padding on the appearance of the space.
     17
     18        * html/shadow/DateTimeEditElement.cpp:
     19        (WebCore::DateTimeEditBuilder::visitLiteral):
     20
    1212020-11-21  Antti Koivisto  <antti@apple.com>
    222

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

    r267699 r270148  
    171171    auto element = HTMLDivElement::create(m_editElement.document());
    172172    element->setPseudo(textPseudoId);
     173
     174    // If the literal begins/ends with a space, the gap between two fields will appear
     175    // exaggerated due to the presence of a 1px padding around each field. This can
     176    // make spaces appear up to 2px larger between fields. This padding is necessary to
     177    // prevent selected fields from appearing squished. To fix, pull fields closer
     178    // together by applying a negative margin.
     179    if (text.startsWith(' '))
     180        element->setInlineStyleProperty(CSSPropertyMarginInlineStart, -1, CSSUnitType::CSS_PX);
     181    if (text.endsWith(' '))
     182        element->setInlineStyleProperty(CSSPropertyMarginInlineEnd, -1, CSSUnitType::CSS_PX);
     183
    173184    element->appendChild(Text::create(m_editElement.document(), text));
    174185    m_editElement.fieldsWrapperElement().appendChild(element);
Note: See TracChangeset for help on using the changeset viewer.