Diff
Modified: trunk/LayoutTests/ChangeLog (270147 => 270148)
--- trunk/LayoutTests/ChangeLog 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/LayoutTests/ChangeLog 2020-11-21 17:24:24 UTC (rev 270148)
@@ -1,3 +1,17 @@
+2020-11-21 Aditya Keerthi <[email protected]>
+
+ 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.
+
+ 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:
+
2020-11-20 Chris Dumez <[email protected]>
Poor resampling quality when using AudioContext sampleRate parameter
Modified: trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt (270147 => 270148)
--- trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 17:24:24 UTC (rev 270148)
@@ -3,14 +3,14 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (70,4) size 5x18
- text run at (70,4) width 5: " "
+ RenderText {#text} at (68,4) size 5x18
+ text run at (68,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (10,10) size 66x23 clip at (12,12) size 62x19
- RenderFlexibleBox {INPUT} at (2,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (13,13) size 60x17
- RenderBlock {DIV} at (3,3) size 61x17
- RenderBlock {DIV} at (1,1) size 59x15
+layer at (10,10) size 64x23 clip at (12,12) size 60x19
+ RenderFlexibleBox {INPUT} at (2,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 58x17
+ RenderBlock {DIV} at (3,3) size 59x17
+ RenderBlock {DIV} at (1,1) size 57x15
RenderBlock {DIV} at (0,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "09"
@@ -21,28 +21,28 @@
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (36,1) size 4x13
- text run at (36,1) width 4: " "
- RenderBlock {DIV} at (39,0) size 20x15
+ RenderText {#text} at (35,1) size 4x13
+ text run at (35,1) width 4: " "
+ RenderBlock {DIV} at (37,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
-layer at (84,10) size 67x23 clip at (86,12) size 63x19
- RenderFlexibleBox {INPUT} at (76,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (87,13) size 60x17
- RenderBlock {DIV} at (3,3) size 61x17
- RenderBlock {DIV} at (1,1) size 59x15
- RenderBlock {DIV} at (42,0) size 17x15
+layer at (82,10) size 65x23 clip at (84,12) size 61x19
+ RenderFlexibleBox {INPUT} at (74,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (85,13) size 58x17
+ RenderBlock {DIV} at (3,3) size 59x17
+ RenderBlock {DIV} at (1,1) size 57x15
+ RenderBlock {DIV} at (40,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "09"
RenderInline {DIV} at (0,0) size 5x13
- RenderText {#text} at (38,1) size 5x13
- text run at (38,1) width 5 RTL: ":"
- RenderBlock {DIV} at (22,0) size 17x15
+ RenderText {#text} at (36,1) size 5x13
+ text run at (36,1) width 5 RTL: ":"
+ RenderBlock {DIV} at (20,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (19,1) size 4x13
- text run at (19,1) width 4 RTL: " "
+ RenderText {#text} at (18,1) size 4x13
+ text run at (18,1) width 4 RTL: " "
RenderBlock {DIV} at (0,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
Modified: trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt (270147 => 270148)
--- trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 17:24:24 UTC (rev 270148)
@@ -3,14 +3,14 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (70,4) size 5x18
- text run at (70,4) width 5: " "
+ RenderText {#text} at (68,4) size 5x18
+ text run at (68,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (10,10) size 66x23 clip at (12,12) size 62x19
- RenderFlexibleBox {INPUT} at (2,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (13,13) size 60x17
- RenderBlock {DIV} at (3,3) size 61x17
- RenderBlock {DIV} at (1,1) size 59x15
+layer at (10,10) size 64x23 clip at (12,12) size 60x19
+ RenderFlexibleBox {INPUT} at (2,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 58x17
+ RenderBlock {DIV} at (3,3) size 59x17
+ RenderBlock {DIV} at (1,1) size 57x15
RenderBlock {DIV} at (0,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "09"
@@ -21,28 +21,28 @@
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (36,1) size 4x13
- text run at (36,1) width 4: " "
- RenderBlock {DIV} at (39,0) size 20x15
+ RenderText {#text} at (35,1) size 4x13
+ text run at (35,1) width 4: " "
+ RenderBlock {DIV} at (37,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
-layer at (84,10) size 67x23 clip at (86,12) size 63x19
- RenderFlexibleBox {INPUT} at (76,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (87,13) size 60x17
- RenderBlock {DIV} at (3,3) size 61x17
- RenderBlock {DIV} at (1,1) size 59x15
- RenderBlock {DIV} at (42,0) size 17x15
+layer at (82,10) size 65x23 clip at (84,12) size 61x19
+ RenderFlexibleBox {INPUT} at (74,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (85,13) size 58x17
+ RenderBlock {DIV} at (3,3) size 59x17
+ RenderBlock {DIV} at (1,1) size 57x15
+ RenderBlock {DIV} at (40,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "09"
RenderInline {DIV} at (0,0) size 5x13
- RenderText {#text} at (38,1) size 5x13
- text run at (38,1) width 5 RTL: ":"
- RenderBlock {DIV} at (22,0) size 17x15
+ RenderText {#text} at (36,1) size 5x13
+ text run at (36,1) width 5 RTL: ":"
+ RenderBlock {DIV} at (20,0) size 17x15
RenderText {#text} at (1,1) size 15x13
text run at (1,1) width 15: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (19,1) size 4x13
- text run at (19,1) width 4 RTL: " "
+ RenderText {#text} at (18,1) size 4x13
+ text run at (18,1) width 4 RTL: " "
RenderBlock {DIV} at (0,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
Modified: trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt (270147 => 270148)
--- trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt 2020-11-21 17:24:24 UTC (rev 270148)
@@ -3,14 +3,14 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (69,4) size 5x18
- text run at (69,4) width 5: " "
+ RenderText {#text} at (67,4) size 5x18
+ text run at (67,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (10,10) size 66x23 clip at (12,12) size 62x19
- RenderFlexibleBox {INPUT} at (2,2) size 66x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (13,13) size 60x17
- RenderBlock {DIV} at (3,3) size 60x17
- RenderBlock {DIV} at (1,1) size 58x15
+layer at (10,10) size 64x23 clip at (12,12) size 60x19
+ RenderFlexibleBox {INPUT} at (2,2) size 64x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 58x17
+ RenderBlock {DIV} at (3,3) size 58x17
+ RenderBlock {DIV} at (1,1) size 56x15
RenderBlock {DIV} at (0,0) size 16x15
RenderText {#text} at (1,1) size 14x13
text run at (1,1) width 14: "09"
@@ -21,28 +21,28 @@
RenderText {#text} at (1,1) size 14x13
text run at (1,1) width 14: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (35,1) size 4x13
- text run at (35,1) width 4: " "
- RenderBlock {DIV} at (38,0) size 20x15
+ RenderText {#text} at (34,1) size 4x13
+ text run at (34,1) width 4: " "
+ RenderBlock {DIV} at (36,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
-layer at (84,10) size 65x23 clip at (86,12) size 61x19
- RenderFlexibleBox {INPUT} at (75,2) size 67x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (87,13) size 60x17 backgroundClip at (87,13) size 59x17 clip at (87,13) size 59x17
- RenderBlock {DIV} at (3,3) size 60x17
- RenderBlock {DIV} at (1,1) size 58x15
- RenderBlock {DIV} at (41,0) size 17x15
+layer at (82,10) size 63x23 clip at (84,12) size 59x19
+ RenderFlexibleBox {INPUT} at (73,2) size 65x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (85,13) size 58x17 backgroundClip at (85,13) size 57x17 clip at (85,13) size 57x17
+ RenderBlock {DIV} at (3,3) size 58x17
+ RenderBlock {DIV} at (1,1) size 56x15
+ RenderBlock {DIV} at (39,0) size 17x15
RenderText {#text} at (1,1) size 14x13
text run at (1,1) width 14: "09"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (38,1) size 4x13
- text run at (38,1) width 4 RTL: ":"
- RenderBlock {DIV} at (22,0) size 17x15
+ RenderText {#text} at (36,1) size 4x13
+ text run at (36,1) width 4 RTL: ":"
+ RenderBlock {DIV} at (20,0) size 17x15
RenderText {#text} at (1,1) size 14x13
text run at (1,1) width 14: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (19,1) size 4x13
- text run at (19,1) width 4 RTL: " "
+ RenderText {#text} at (18,1) size 4x13
+ text run at (18,1) width 4 RTL: " "
RenderBlock {DIV} at (0,0) size 20x15
RenderText {#text} at (1,1) size 18x13
text run at (1,1) width 18: "AM"
Modified: trunk/Source/WebCore/ChangeLog (270147 => 270148)
--- trunk/Source/WebCore/ChangeLog 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/Source/WebCore/ChangeLog 2020-11-21 17:24:24 UTC (rev 270148)
@@ -1,3 +1,23 @@
+2020-11-21 Aditya Keerthi <[email protected]>
+
+ 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.
+
+ 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):
+
2020-11-21 Antti Koivisto <[email protected]>
[LFC][Integration] Use inline iterator in collectSelectionRects
Modified: trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp (270147 => 270148)
--- trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp 2020-11-21 16:33:23 UTC (rev 270147)
+++ trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp 2020-11-21 17:24:24 UTC (rev 270148)
@@ -170,6 +170,17 @@
static MainThreadNeverDestroyed<const AtomString> textPseudoId("-webkit-datetime-edit-text", AtomString::ConstructFromLiteral);
auto element = HTMLDivElement::create(m_editElement.document());
element->setPseudo(textPseudoId);
+
+ // If the literal begins/ends with a space, the gap between two fields will appear
+ // exaggerated due to the presence of a 1px padding around each field. This can
+ // make spaces appear up to 2px larger between fields. This padding is necessary to
+ // prevent selected fields from appearing squished. To fix, pull fields closer
+ // together by applying a negative margin.
+ if (text.startsWith(' '))
+ element->setInlineStyleProperty(CSSPropertyMarginInlineStart, -1, CSSUnitType::CSS_PX);
+ if (text.endsWith(' '))
+ element->setInlineStyleProperty(CSSPropertyMarginInlineEnd, -1, CSSUnitType::CSS_PX);
+
element->appendChild(Text::create(m_editElement.document(), text));
m_editElement.fieldsWrapperElement().appendChild(element);
}
