Diff
Modified: trunk/LayoutTests/ChangeLog (267700 => 267701)
--- trunk/LayoutTests/ChangeLog 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/ChangeLog 2020-09-28 15:37:19 UTC (rev 267701)
@@ -1,3 +1,37 @@
+2020-09-28 Aditya Keerthi <[email protected]>
+
+ [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.
+
+ 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:
+
2020-09-28 Zalan Bujtas <[email protected]>
[LFC][Floats] Add support for clear on float box
Modified: trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-focus-and-blur-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,23 +6,8 @@
<style>
input {
width: 300px;
-}
-
-input::-webkit-datetime-edit-text {
font-size: 30px;
}
-
-input::-webkit-datetime-edit-month-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-day-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-year-field {
- font-size: 30px;
-}
</style>
</head>
<body>
Modified: trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-mouse-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-mouse-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/date/date-editable-components/date-editable-components-mouse-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,23 +6,8 @@
<style>
input {
width: 300px;
-}
-
-input::-webkit-datetime-edit-text {
font-size: 30px;
}
-
-input::-webkit-datetime-edit-month-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-day-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-year-field {
- font-size: 30px;
-}
</style>
</head>
<body>
Modified: trunk/LayoutTests/fast/forms/date/date-pseudo-elements.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/date/date-pseudo-elements.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/date/date-pseudo-elements.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -9,26 +9,18 @@
input::-webkit-datetime-edit-text {
color: yellow;
- font-family: monospace;
- font-size: 15px;
}
input::-webkit-datetime-edit-month-field {
color: red;
- font-family: monospace;
- font-size: 15px;
}
input::-webkit-datetime-edit-day-field {
color: green;
- font-family: monospace;
- font-size: 15px;
}
input::-webkit-datetime-edit-year-field {
color: blue;
- font-family: monospace;
- font-size: 15px;
}
</style>
</head>
Modified: trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-focus-and-blur-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,15 +6,6 @@
<style>
input {
width: 600px;
-}
-
-input::-webkit-datetime-edit-text,
-input::-webkit-datetime-edit-year-field,
-input::-webkit-datetime-edit-month-field,
-input::-webkit-datetime-edit-day-field,
-input::-webkit-datetime-edit-hour-field,
-input::-webkit-datetime-edit-minute-field,
-input::-webkit-datetime-edit-meridiem-field {
font-size: 30px;
}
</style>
Modified: trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-mouse-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,15 +6,6 @@
<style>
input {
width: 600px;
-}
-
-input::-webkit-datetime-edit-text,
-input::-webkit-datetime-edit-year-field,
-input::-webkit-datetime-edit-month-field,
-input::-webkit-datetime-edit-day-field,
-input::-webkit-datetime-edit-hour-field,
-input::-webkit-datetime-edit-minute-field,
-input::-webkit-datetime-edit-meridiem-field {
font-size: 30px;
}
</style>
Modified: trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-focus-and-blur-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,23 +6,8 @@
<style>
input {
width: 300px;
-}
-
-input::-webkit-datetime-edit-text {
font-size: 30px;
}
-
-input::-webkit-datetime-edit-hour-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-minute-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-meridiem-field {
- font-size: 30px;
-}
</style>
</head>
<body>
Modified: trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-mouse-events.html (267700 => 267701)
--- trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-mouse-events.html 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/fast/forms/time/time-editable-components/time-editable-components-mouse-events.html 2020-09-28 15:37:19 UTC (rev 267701)
@@ -6,23 +6,8 @@
<style>
input {
width: 300px;
-}
-
-input::-webkit-datetime-edit-text {
font-size: 30px;
}
-
-input::-webkit-datetime-edit-hour-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-minute-field {
- font-size: 30px;
-}
-
-input::-webkit-datetime-edit-meridiem-field {
- font-size: 30px;
-}
</style>
</head>
<body>
Modified: trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/appearance/default-styles-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -9,7 +9,7 @@
FAIL <input type="password"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
FAIL <input type="date"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
FAIL <input type="month"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
-FAIL <input type="week"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
+FAIL <input type="week"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
FAIL <input type="time"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
FAIL <input type="datetime-local"> assert_equals: -webkit-appearance expected "auto" but got "menulist-button"
FAIL <input type="number"> assert_equals: -webkit-appearance expected "auto" but got "textfield"
Modified: trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -47,12 +47,12 @@
FAIL <input type="month" value="2020-01" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
FAIL <input type="month" value="2020-01" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
FAIL <input type="month" value="2020-01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
-PASS <input type="week" value="2020-W01" style="overflow: visible; appearance: auto;">
-PASS <input type="week" value="2020-W01" style="overflow: hidden; appearance: auto;">
-FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 71
-PASS <input type="week" value="2020-W01" style="overflow: visible; appearance: none;">
-PASS <input type="week" value="2020-W01" style="overflow: hidden; appearance: none;">
-FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 71
+FAIL <input type="week" value="2020-W01" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
+FAIL <input type="week" value="2020-W01" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
+FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
+FAIL <input type="week" value="2020-W01" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
+FAIL <input type="week" value="2020-W01" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
+FAIL <input type="week" value="2020-W01" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
FAIL <input type="time" value="00:00" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
FAIL <input type="time" value="00:00" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 27
FAIL <input type="time" value="00:00" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 33 +/- 3 but got 19
Modified: trunk/LayoutTests/platform/mac-catalina/fast/forms/date/date-input-rendering-basic-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/mac-catalina/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/mac-catalina/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -3,46 +3,46 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (110,2) size 4x18
- text run at (110,2) width 4: " "
+ RenderText {#text} at (83,4) size 5x18
+ text run at (83,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (8,10) size 110x19 clip at (10,12) size 106x15
- RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (11,13) size 65x13 scrollHeight 14
- RenderBlock {DIV} at (3,3) size 66x13
- RenderBlock {DIV} at (0,0) size 66x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 16x15
- RenderText {#text} at (20,0) size 14x13
- text run at (20,0) width 14: "01"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (34,0) size 4x13
- text run at (34,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 29x15
- RenderText {#text} at (38,0) size 27x13
- text run at (38,0) width 27: "1976"
-layer at (122,10) size 110x19 clip at (124,12) size 106x15
- RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (164,13) size 65x13 scrollHeight 14
- RenderBlock {DIV} at (41,3) size 66x13
- RenderBlock {DIV} at (0,0) size 66x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 16x15
- RenderText {#text} at (20,0) size 14x13
- text run at (20,0) width 14: "01"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (34,0) size 4x13
- text run at (34,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 29x15
- RenderText {#text} at (38,0) size 27x13
- text run at (38,0) width 27: "1976"
+layer at (10,10) size 79x23 clip at (12,12) size 75x19
+ RenderFlexibleBox {INPUT} at (2,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 73x17
+ RenderBlock {DIV} at (3,3) size 74x17
+ RenderBlock {DIV} at (1,1) size 72x15
+ RenderBlock {DIV} at (0,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "04"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (16,1) size 5x13
+ text run at (16,1) width 5: "/"
+ RenderBlock {DIV} at (20,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "01"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (36,1) size 5x13
+ text run at (36,1) width 5: "/"
+ RenderBlock {DIV} at (40,0) size 32x15
+ RenderText {#text} at (1,1) size 29x13
+ text run at (1,1) width 29: "1976"
+layer at (97,10) size 79x23 clip at (99,12) size 75x19
+ RenderFlexibleBox {INPUT} at (89,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (100,13) size 73x17
+ RenderBlock {DIV} at (3,3) size 74x17
+ RenderBlock {DIV} at (1,1) size 72x15
+ RenderBlock {DIV} at (54,0) size 18x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "04"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (50,1) size 5x13
+ text run at (50,1) width 5 RTL: "/"
+ RenderBlock {DIV} at (34,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "01"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (30,1) size 5x13
+ text run at (30,1) width 5 RTL: "/"
+ RenderBlock {DIV} at (0,0) size 31x15
+ RenderText {#text} at (1,1) size 29x13
+ text run at (1,1) width 29: "1976"
Added: trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt (0 => 267701)
--- trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac-catalina/fast/forms/time/time-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -0,0 +1,48 @@
+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+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 (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
+ RenderBlock {DIV} at (0,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "09"
+ RenderInline {DIV} at (0,0) size 4x13
+ RenderText {#text} at (16,1) size 4x13
+ text run at (16,1) width 4: ":"
+ RenderBlock {DIV} at (19,0) size 18x15
+ 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 (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
+ 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 (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: " "
+ 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/date/date-input-rendering-basic-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/mac-mojave/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/mac-mojave/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -3,46 +3,46 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (110,2) size 4x18
- text run at (110,2) width 4: " "
+ RenderText {#text} at (83,4) size 5x18
+ text run at (83,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (8,10) size 110x19 clip at (10,12) size 106x15
- RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (11,13) size 65x13 scrollHeight 14
- RenderBlock {DIV} at (3,3) size 66x13
- RenderBlock {DIV} at (0,0) size 66x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 16x15
- RenderText {#text} at (20,0) size 14x13
- text run at (20,0) width 14: "01"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (34,0) size 4x13
- text run at (34,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 29x15
- RenderText {#text} at (38,0) size 27x13
- text run at (38,0) width 27: "1976"
-layer at (122,10) size 110x19 clip at (124,12) size 106x15
- RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (164,13) size 65x13 scrollHeight 14
- RenderBlock {DIV} at (41,3) size 66x13
- RenderBlock {DIV} at (0,0) size 66x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 16x15
- RenderText {#text} at (20,0) size 14x13
- text run at (20,0) width 14: "01"
- RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (34,0) size 4x13
- text run at (34,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 29x15
- RenderText {#text} at (38,0) size 27x13
- text run at (38,0) width 27: "1976"
+layer at (10,10) size 79x23 clip at (12,12) size 75x19
+ RenderFlexibleBox {INPUT} at (2,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 73x17
+ RenderBlock {DIV} at (3,3) size 74x17
+ RenderBlock {DIV} at (1,1) size 72x15
+ RenderBlock {DIV} at (0,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "04"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (16,1) size 5x13
+ text run at (16,1) width 5: "/"
+ RenderBlock {DIV} at (20,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "01"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (36,1) size 5x13
+ text run at (36,1) width 5: "/"
+ RenderBlock {DIV} at (40,0) size 32x15
+ RenderText {#text} at (1,1) size 29x13
+ text run at (1,1) width 29: "1976"
+layer at (97,10) size 79x23 clip at (99,12) size 75x19
+ RenderFlexibleBox {INPUT} at (89,2) size 80x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (100,13) size 73x17
+ RenderBlock {DIV} at (3,3) size 74x17
+ RenderBlock {DIV} at (1,1) size 72x15
+ RenderBlock {DIV} at (54,0) size 18x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "04"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (50,1) size 5x13
+ text run at (50,1) width 5 RTL: "/"
+ RenderBlock {DIV} at (34,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "01"
+ RenderInline {DIV} at (0,0) size 5x13
+ RenderText {#text} at (30,1) size 5x13
+ text run at (30,1) width 5 RTL: "/"
+ RenderBlock {DIV} at (0,0) size 31x15
+ RenderText {#text} at (1,1) size 29x13
+ text run at (1,1) width 29: "1976"
Added: trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt (0 => 267701)
--- trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac-mojave/fast/forms/time/time-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -0,0 +1,48 @@
+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+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 (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
+ RenderBlock {DIV} at (0,0) size 17x15
+ RenderText {#text} at (1,1) size 15x13
+ text run at (1,1) width 15: "09"
+ RenderInline {DIV} at (0,0) size 4x13
+ RenderText {#text} at (16,1) size 4x13
+ text run at (16,1) width 4: ":"
+ RenderBlock {DIV} at (19,0) size 18x15
+ 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 (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
+ 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 (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: " "
+ 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/date/date-input-rendering-basic-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -3,46 +3,46 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (110,2) size 4x18
- text run at (110,2) width 4: " "
+ RenderText {#text} at (80,4) size 5x18
+ text run at (80,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (8,10) size 110x19 clip at (10,12) size 106x15
- RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (11,13) size 64x13 scrollHeight 14
- RenderBlock {DIV} at (3,3) size 65x13
- RenderBlock {DIV} at (0,0) size 65x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
+layer at (10,10) size 77x23 clip at (12,12) size 73x19
+ RenderFlexibleBox {INPUT} at (2,2) size 77x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 71x17
+ RenderBlock {DIV} at (3,3) size 71x17
+ RenderBlock {DIV} at (1,1) size 69x15
+ RenderBlock {DIV} at (0,0) size 16x15
+ RenderText {#text} at (1,1) size 14x13
+ text run at (1,1) width 14: "04"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 15x15
- RenderText {#text} at (20,0) size 13x13
- text run at (20,0) width 13: "01"
- RenderInline {DIV} at (0,0) size 5x13
- RenderText {#text} at (33,0) size 5x13
- text run at (33,0) width 5: "/"
- RenderInline {DIV} at (0,0) size 28x15
- RenderText {#text} at (38,0) size 26x13
- text run at (38,0) width 26: "1976"
-layer at (122,10) size 110x19 clip at (124,12) size 106x15
- RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (165,13) size 64x13 scrollHeight 14
- RenderBlock {DIV} at (42,3) size 65x13
- RenderBlock {DIV} at (0,0) size 65x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "04"
+ RenderText {#text} at (16,1) size 4x13
+ text run at (16,1) width 4: "/"
+ RenderBlock {DIV} at (19,0) size 17x15
+ RenderText {#text} at (1,1) size 14x13
+ text run at (1,1) width 14: "01"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (16,0) size 4x13
- text run at (16,0) width 4: "/"
- RenderInline {DIV} at (0,0) size 15x15
- RenderText {#text} at (20,0) size 13x13
- text run at (20,0) width 13: "01"
+ RenderText {#text} at (35,1) size 4x13
+ text run at (35,1) width 4: "/"
+ RenderBlock {DIV} at (38,0) size 31x15
+ RenderText {#text} at (1,1) size 28x13
+ text run at (1,1) width 28: "1976"
+layer at (95,10) size 77x23 clip at (97,12) size 73x19
+ RenderFlexibleBox {INPUT} at (86,2) size 78x23 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (98,13) size 71x17
+ RenderBlock {DIV} at (3,3) size 71x17
+ RenderBlock {DIV} at (1,1) size 69x15
+ RenderBlock {DIV} at (52,0) size 17x15
+ RenderText {#text} at (1,1) size 14x13
+ text run at (1,1) width 14: "04"
+ RenderInline {DIV} at (0,0) size 4x13
+ RenderText {#text} at (49,1) size 4x13
+ text run at (49,1) width 4 RTL: "/"
+ RenderBlock {DIV} at (33,0) size 17x15
+ RenderText {#text} at (1,1) size 14x13
+ text run at (1,1) width 14: "01"
RenderInline {DIV} at (0,0) size 5x13
- RenderText {#text} at (33,0) size 5x13
- text run at (33,0) width 5: "/"
- RenderInline {DIV} at (0,0) size 28x15
- RenderText {#text} at (38,0) size 26x13
- text run at (38,0) width 26: "1976"
+ RenderText {#text} at (29,1) size 5x13
+ text run at (29,1) width 5 RTL: "/"
+ RenderBlock {DIV} at (0,0) size 30x15
+ RenderText {#text} at (1,1) size 28x13
+ text run at (1,1) width 28: "1976"
Modified: trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/mac-wk2/fast/forms/date/date-pseudo-elements-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -3,46 +3,46 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (110,5) size 4x18
- text run at (110,5) width 4: " "
+ RenderText {#text} at (110,7) size 5x18
+ text run at (110,7) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (8,10) size 110x25 clip at (10,12) size 106x21
- RenderFlexibleBox {INPUT} at (0,2) size 110x25 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (11,13) size 98x19 clip at (12,14) size 96x17 scrollHeight 18
- RenderBlock {DIV} at (3,3) size 99x19 [border: (1px solid #FF0000)]
- RenderBlock {DIV} at (1,1) size 97x17
- RenderInline {DIV} at (0,0) size 21x19 [color=#FF0000]
- RenderText {#text} at (1,0) size 19x17
- text run at (1,0) width 19: "04"
+layer at (10,10) size 106x29 clip at (12,12) size 102x25
+ RenderFlexibleBox {INPUT} at (2,2) size 107x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (13,13) size 100x23 clip at (14,14) size 98x21
+ RenderBlock {DIV} at (3,3) size 101x23 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (2,2) size 97x19
+ RenderBlock {DIV} at (0,0) size 21x19 [color=#FF0000]
+ RenderText {#text} at (1,1) size 19x17
+ text run at (1,1) width 19: "04"
RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
- RenderText {#text} at (20,0) size 10x17
- text run at (20,0) width 10: "/"
- RenderInline {DIV} at (0,0) size 21x19 [color=#008000]
- RenderText {#text} at (30,0) size 19x17
- text run at (30,0) width 19: "01"
+ RenderText {#text} at (20,1) size 10x17
+ text run at (20,1) width 10: "/"
+ RenderBlock {DIV} at (29,0) size 21x19 [color=#008000]
+ RenderText {#text} at (1,1) size 19x17
+ text run at (1,1) width 19: "01"
RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
- RenderText {#text} at (49,0) size 10x17
- text run at (49,0) width 10: "/"
- RenderInline {DIV} at (0,0) size 39x19 [color=#0000FF]
- RenderText {#text} at (59,0) size 37x17
- text run at (59,0) width 37: "1976"
-layer at (122,10) size 110x25 clip at (124,12) size 106x21
- RenderFlexibleBox {INPUT} at (114,2) size 110x25 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (131,13) size 98x19 clip at (132,14) size 96x17 scrollHeight 18
- RenderBlock {DIV} at (8,3) size 99x19 [border: (1px solid #FF0000)]
- RenderBlock {DIV} at (1,1) size 97x17
- RenderInline {DIV} at (0,0) size 21x19 [color=#FF0000]
- RenderText {#text} at (1,0) size 19x17
- text run at (1,0) width 19: "04"
+ RenderText {#text} at (49,1) size 10x17
+ text run at (49,1) width 10: "/"
+ RenderBlock {DIV} at (58,0) size 39x19 [color=#0000FF]
+ RenderText {#text} at (1,1) size 37x17
+ text run at (1,1) width 37: "1976"
+layer at (124,10) size 106x29 clip at (126,12) size 102x25
+ RenderFlexibleBox {INPUT} at (116,2) size 107x29 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+layer at (127,13) size 100x23 clip at (128,14) size 98x21
+ RenderBlock {DIV} at (3,3) size 101x23 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (2,2) size 97x19
+ RenderBlock {DIV} at (76,0) size 21x19 [color=#FF0000]
+ RenderText {#text} at (1,1) size 19x17
+ text run at (1,1) width 19: "04"
RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
- RenderText {#text} at (20,0) size 10x17
- text run at (20,0) width 10: "/"
- RenderInline {DIV} at (0,0) size 21x19 [color=#008000]
- RenderText {#text} at (30,0) size 19x17
- text run at (30,0) width 19: "01"
+ RenderText {#text} at (67,1) size 10x17
+ text run at (67,1) width 10 RTL: "/"
+ RenderBlock {DIV} at (47,0) size 21x19 [color=#008000]
+ RenderText {#text} at (1,1) size 19x17
+ text run at (1,1) width 19: "01"
RenderInline {DIV} at (0,0) size 10x17 [color=#FFFF00]
- RenderText {#text} at (49,0) size 10x17
- text run at (49,0) width 10: "/"
- RenderInline {DIV} at (0,0) size 39x19 [color=#0000FF]
- RenderText {#text} at (59,0) size 37x17
- text run at (59,0) width 37: "1976"
+ RenderText {#text} at (38,1) size 10x17
+ text run at (38,1) width 10 RTL: "/"
+ RenderBlock {DIV} at (0,0) size 39x19 [color=#0000FF]
+ RenderText {#text} at (1,1) size 37x17
+ text run at (1,1) width 37: "1976"
Modified: trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt (267700 => 267701)
--- trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/LayoutTests/platform/mac-wk2/fast/forms/time/time-input-rendering-basic-expected.txt 2020-09-28 15:37:19 UTC (rev 267701)
@@ -3,46 +3,46 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderText {#text} at (110,2) size 4x18
- text run at (110,2) width 4: " "
+ RenderText {#text} at (69,4) size 5x18
+ text run at (69,4) width 5: " "
RenderText {#text} at (0,0) size 0x0
-layer at (8,10) size 110x19 clip at (10,12) size 106x15
- RenderFlexibleBox {INPUT} at (0,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (11,13) size 56x13 scrollHeight 14
- RenderBlock {DIV} at (3,3) size 56x13
- RenderBlock {DIV} at (0,0) size 56x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (1,0) size 15x13
- text run at (1,0) width 15: "09"
+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
+ RenderBlock {DIV} at (0,0) size 16x15
+ 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 (16,0) size 4x13
- text run at (16,0) width 4: ":"
- RenderInline {DIV} at (0,0) size 15x15
- RenderText {#text} at (20,0) size 13x13
- text run at (20,0) width 13: "41"
+ RenderText {#text} at (16,1) size 4x13
+ text run at (16,1) width 4: ":"
+ RenderBlock {DIV} at (19,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 (33,0) size 4x13
- text run at (33,0) width 4: " "
- RenderInline {DIV} at (0,0) size 20x15
- RenderText {#text} at (37,0) size 18x13
- text run at (37,0) width 18: "AM"
-layer at (122,10) size 110x19 clip at (124,12) size 106x15
- RenderFlexibleBox {INPUT} at (114,2) size 110x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (173,13) size 56x13 scrollHeight 14
- RenderBlock {DIV} at (51,3) size 56x13
- RenderBlock {DIV} at (0,0) size 56x13
- RenderInline {DIV} at (0,0) size 17x15
- RenderText {#text} at (23,0) size 15x13
- text run at (23,0) width 15: "09"
+ RenderText {#text} at (35,1) size 4x13
+ text run at (35,1) width 4: " "
+ RenderBlock {DIV} at (38,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
+ 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,0) size 4x13
- text run at (38,0) width 4: ":"
- RenderInline {DIV} at (0,0) size 15x15
- RenderText {#text} at (42,0) size 13x13
- text run at (42,0) width 13: "41"
+ 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 (1,1) size 14x13
+ text run at (1,1) width 14: "41"
RenderInline {DIV} at (0,0) size 4x13
- RenderText {#text} at (19,0) size 4x13
- text run at (19,0) width 4 RTL: " "
- RenderInline {DIV} at (0,0) size 20x15
- RenderText {#text} at (1,0) size 18x13
- text run at (1,0) width 18: "AM"
+ RenderText {#text} at (19,1) size 4x13
+ text run at (19,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 (267700 => 267701)
--- trunk/Source/WebCore/ChangeLog 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/ChangeLog 2020-09-28 15:37:19 UTC (rev 267701)
@@ -1,3 +1,78 @@
+2020-09-28 Aditya Keerthi <[email protected]>
+
+ [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.
+
+ 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.
+
+ 2. 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.
+
+ 3. 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:
+
2020-09-28 Zalan Bujtas <[email protected]>
[LFC][Floats] Add support for clear on float box
Modified: trunk/Source/WebCore/css/html.css (267700 => 267701)
--- trunk/Source/WebCore/css/html.css 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/css/html.css 2020-09-28 15:37:19 UTC (rev 267701)
@@ -479,6 +479,25 @@
flex: none;
}
+#if defined(ENABLE_DATE_AND_TIME_INPUT_TYPES) && ENABLE_DATE_AND_TIME_INPUT_TYPES
+input:matches([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
+ -webkit-appearance: textfield;
+ align-items: center;
+ display: -webkit-inline-flex;
+ overflow: hidden;
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ -webkit-appearance: menulist-button;
+#else
+ -webkit-appearance: textfield;
+ outline: none;
+ font-variant-numeric: tabular-nums;
+ /* FIXME: Font features should be defined in a @font-feature-values rule, so that the feature setting is only applied to the system font. */
+ /* "ss03" enables the raised colon separator on the system font. */
+ font-feature-settings: "ss03";
+#endif
+}
+#endif
+
input::-webkit-date-and-time-value {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
margin-right: 18px;
@@ -493,6 +512,7 @@
input::-webkit-datetime-edit {
display: inline-block;
overflow: hidden;
+ padding: 1px;
}
input::-webkit-datetime-edit-fields-wrapper {
@@ -508,8 +528,10 @@
input::-webkit-datetime-edit-second-field,
input::-webkit-datetime-edit-millisecond-field,
input::-webkit-datetime-edit-meridiem-field {
- display: inline;
+ display: inline-block;
+ font: inherit !important;
padding: 1px;
+ text-align: center;
}
input::-webkit-datetime-edit-year-field:focus,
@@ -522,6 +544,7 @@
input::-webkit-datetime-edit-meridiem-field:focus {
#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
background-color: -apple-system-control-accent;
+ border-radius: 3px;
color: white;
#else
background-color: highlight;
Modified: trunk/Source/WebCore/html/shadow/DateTimeFieldElement.cpp (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeFieldElement.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeFieldElement.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -51,6 +51,7 @@
: HTMLDivElement(divTag, document)
, m_fieldOwner(makeWeakPtr(fieldOwner))
{
+ setHasCustomStyleResolveCallbacks();
}
void DateTimeFieldElement::initialize(const AtomString& pseudo)
Modified: trunk/Source/WebCore/html/shadow/DateTimeFieldElements.cpp (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeFieldElements.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeFieldElements.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -155,7 +155,7 @@
WTF_MAKE_ISO_ALLOCATED_IMPL(DateTimeMillisecondFieldElement);
DateTimeMillisecondFieldElement::DateTimeMillisecondFieldElement(Document& document, FieldOwner& fieldOwner)
- : DateTimeNumericFieldElement(document, fieldOwner, Range(0, 999), "--"_s)
+ : DateTimeNumericFieldElement(document, fieldOwner, Range(0, 999), "---"_s)
{
}
Modified: trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.cpp (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -30,8 +30,12 @@
#if ENABLE(DATE_AND_TIME_INPUT_TYPES)
#include "EventNames.h"
+#include "FontCascade.h"
#include "KeyboardEvent.h"
#include "PlatformLocale.h"
+#include "RenderBlock.h"
+#include "RenderStyle.h"
+#include "StyleResolver.h"
#include <wtf/IsoMallocInlines.h>
namespace WebCore {
@@ -57,6 +61,32 @@
{
}
+Optional<Style::ElementStyle> DateTimeNumericFieldElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle*)
+{
+ auto elementStyle = resolveStyle(&parentStyle);
+ if (!elementStyle.renderStyle)
+ return WTF::nullopt;
+
+ auto& font = elementStyle.renderStyle->fontCascade();
+
+ unsigned length = 2;
+ if (m_range.maximum > 999)
+ length = 4;
+ else if (m_range.maximum > 99)
+ length = 3;
+
+ auto& locale = localeForOwner();
+
+ float width = 0;
+ for (char c = '0'; c <= '9'; ++c) {
+ auto numberString = locale.convertToLocalizedNumber(makeString(pad(c, length, makeString(c))));
+ width = std::max(width, font.width(RenderBlock::constructTextRun(numberString, *elementStyle.renderStyle)));
+ }
+
+ elementStyle.renderStyle->setMinWidth({ width, Fixed });
+ return elementStyle;
+}
+
int DateTimeNumericFieldElement::maximum() const
{
return m_range.maximum;
Modified: trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.h (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.h 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeNumericFieldElement.h 2020-09-28 15:37:19 UTC (rev 267701)
@@ -63,6 +63,8 @@
String visibleValue() const final;
private:
+ Optional<Style::ElementStyle> resolveCustomStyle(const RenderStyle&, const RenderStyle*) final;
+
// DateTimeFieldElement functions:
String value() const final;
void handleKeyboardEvent(KeyboardEvent&) final;
Modified: trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.cpp (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -29,6 +29,10 @@
#if ENABLE(DATE_AND_TIME_INPUT_TYPES)
+#include "FontCascade.h"
+#include "RenderBlock.h"
+#include "RenderStyle.h"
+#include "StyleResolver.h"
#include <wtf/IsoMallocInlines.h>
#include <wtf/text/StringBuilder.h>
#include <wtf/text/TextBreakIterator.h>
@@ -54,6 +58,22 @@
ASSERT(!m_symbols.isEmpty());
}
+Optional<Style::ElementStyle> DateTimeSymbolicFieldElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle*)
+{
+ auto elementStyle = resolveStyle(&parentStyle);
+ if (!elementStyle.renderStyle)
+ return WTF::nullopt;
+
+ auto& font = elementStyle.renderStyle->fontCascade();
+
+ float width = 0;
+ for (auto& symbol : m_symbols)
+ width = std::max(width, font.width(RenderBlock::constructTextRun(symbol, *elementStyle.renderStyle)));
+
+ elementStyle.renderStyle->setMinWidth({ width, Fixed });
+ return elementStyle;
+}
+
bool DateTimeSymbolicFieldElement::hasValue() const
{
return m_selectedIndex >= 0;
Modified: trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.h (267700 => 267701)
--- trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.h 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/html/shadow/DateTimeSymbolicFieldElement.h 2020-09-28 15:37:19 UTC (rev 267701)
@@ -47,6 +47,8 @@
private:
static constexpr int invalidIndex = -1;
+ Optional<Style::ElementStyle> resolveCustomStyle(const RenderStyle&, const RenderStyle*) final;
+
String visibleEmptyValue() const;
// DateTimeFieldElement functions:
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (267700 => 267701)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -1025,61 +1025,6 @@
#endif // ENABLE(INPUT_TYPE_COLOR)
-#if PLATFORM(IOS_FAMILY)
-#define DATE_INPUT_WIDTH ""
-#else
-#define DATE_INPUT_WIDTH "width: 10em; "
-#endif
-
-#if ENABLE(INPUT_TYPE_DATE)
-
-String RenderTheme::dateInputStyleSheet() const
-{
- return "input[type=\"date\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
-
-String RenderTheme::dateTimeLocalInputStyleSheet() const
-{
- return "input[type=\"datetime-local\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_MONTH)
-
-String RenderTheme::monthInputStyleSheet() const
-{
- return "input[type=\"month\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_TIME)
-
-String RenderTheme::timeInputStyleSheet() const
-{
- return "input[type=\"time\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_WEEK)
-
-String RenderTheme::weekInputStyleSheet() const
-{
-#if PLATFORM(IOS_FAMILY)
- return emptyString();
-#else
- return "input[type=\"week\"] { align-items: center; -webkit-appearance: menulist-button; display: -webkit-inline-flex; overflow: hidden; " DATE_INPUT_WIDTH "} "_s;
-#endif
-}
-
-#endif
-
#if ENABLE(DATALIST_ELEMENT)
String RenderTheme::dataListStyleSheet() const
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (267700 => 267701)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2020-09-28 15:37:19 UTC (rev 267701)
@@ -101,21 +101,6 @@
#if ENABLE(INPUT_TYPE_COLOR)
String colorInputStyleSheet() const;
#endif
-#if ENABLE(INPUT_TYPE_DATE)
- virtual String dateInputStyleSheet() const;
-#endif
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
- virtual String dateTimeLocalInputStyleSheet() const;
-#endif
-#if ENABLE(INPUT_TYPE_MONTH)
- virtual String monthInputStyleSheet() const;
-#endif
-#if ENABLE(INPUT_TYPE_TIME)
- virtual String timeInputStyleSheet() const;
-#endif
-#if ENABLE(INPUT_TYPE_WEEK)
- virtual String weekInputStyleSheet() const;
-#endif
// A method to obtain the baseline position for a "leaf" control. This will only be used if a baseline
// position cannot be determined by examining child content. Checkboxes and radio buttons are examples of
Modified: trunk/Source/WebCore/rendering/RenderThemeMac.h (267700 => 267701)
--- trunk/Source/WebCore/rendering/RenderThemeMac.h 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.h 2020-09-28 15:37:19 UTC (rev 267701)
@@ -107,22 +107,6 @@
String mediaControlsBase64StringForIconNameAndType(const String&, const String&) final;
#endif
-#if ENABLE(INPUT_TYPE_DATE)
- String dateInputStyleSheet() const final;
-#endif
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
- String dateTimeLocalInputStyleSheet() const final;
-#endif
-#if ENABLE(INPUT_TYPE_MONTH)
- String monthInputStyleSheet() const final;
-#endif
-#if ENABLE(INPUT_TYPE_TIME)
- String timeInputStyleSheet() const final;
-#endif
-#if ENABLE(INPUT_TYPE_WEEK)
- String weekInputStyleSheet() const final;
-#endif
-
#if ENABLE(SERVICE_CONTROLS)
String imageControlsStyleSheet() const final;
#endif
Modified: trunk/Source/WebCore/rendering/RenderThemeMac.mm (267700 => 267701)
--- trunk/Source/WebCore/rendering/RenderThemeMac.mm 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.mm 2020-09-28 15:37:19 UTC (rev 267701)
@@ -356,51 +356,6 @@
return [[NSData dataWithContentsOfFile:[bundle pathForResource:iconName ofType:iconType inDirectory:directory]] base64EncodedStringWithOptions:0];
}
-#if ENABLE(INPUT_TYPE_DATE)
-
-String RenderThemeMac::dateInputStyleSheet() const
-{
- return "input[type=\"date\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
-
-String RenderThemeMac::dateTimeLocalInputStyleSheet() const
-{
- return "input[type=\"datetime-local\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 18em; outline: none; } "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_MONTH)
-
-String RenderThemeMac::monthInputStyleSheet() const
-{
- return "input[type=\"month\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_TIME)
-
-String RenderThemeMac::timeInputStyleSheet() const
-{
- return "input[type=\"time\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
-}
-
-#endif
-
-#if ENABLE(INPUT_TYPE_WEEK)
-
-String RenderThemeMac::weekInputStyleSheet() const
-{
- return "input[type=\"week\"] { -webkit-appearance: textfield; align-items: center; display: -webkit-inline-flex; overflow: hidden; width: 10em; outline: none; } "_s;
-}
-
-#endif
-
#if ENABLE(SERVICE_CONTROLS)
String RenderThemeMac::imageControlsStyleSheet() const
Modified: trunk/Source/WebCore/style/UserAgentStyle.cpp (267700 => 267701)
--- trunk/Source/WebCore/style/UserAgentStyle.cpp 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/style/UserAgentStyle.cpp 2020-09-28 15:37:19 UTC (rev 267701)
@@ -84,21 +84,6 @@
#if ENABLE(INPUT_TYPE_COLOR)
StyleSheetContents* UserAgentStyle::colorInputStyleSheet;
#endif
-#if ENABLE(INPUT_TYPE_DATE)
-StyleSheetContents* UserAgentStyle::dateInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
-StyleSheetContents* UserAgentStyle::dateTimeLocalInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_MONTH)
-StyleSheetContents* UserAgentStyle::monthInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_TIME)
-StyleSheetContents* UserAgentStyle::timeInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_WEEK)
-StyleSheetContents* UserAgentStyle::weekInputStyleSheet;
-#endif
#if PLATFORM(IOS_FAMILY)
#define DEFAULT_OUTLINE_WIDTH "3px"
@@ -282,36 +267,6 @@
addToDefaultStyle(*colorInputStyleSheet);
}
#endif // ENABLE(INPUT_TYPE_COLOR)
-#if ENABLE(INPUT_TYPE_DATE)
- else if (!dateInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isDateField()) {
- dateInputStyleSheet = parseUASheet(RenderTheme::singleton().dateInputStyleSheet());
- addToDefaultStyle(*dateInputStyleSheet);
- }
-#endif // ENABLE(INPUT_TYPE_DATE)
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
- else if (!dateTimeLocalInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isDateTimeLocalField()) {
- dateTimeLocalInputStyleSheet = parseUASheet(RenderTheme::singleton().dateTimeLocalInputStyleSheet());
- addToDefaultStyle(*dateTimeLocalInputStyleSheet);
- }
-#endif // ENABLE(INPUT_TYPE_DATETIMELOCAL)
-#if ENABLE(INPUT_TYPE_MONTH)
- else if (!monthInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isMonthField()) {
- monthInputStyleSheet = parseUASheet(RenderTheme::singleton().monthInputStyleSheet());
- addToDefaultStyle(*monthInputStyleSheet);
- }
-#endif // ENABLE(INPUT_TYPE_MONTH)
-#if ENABLE(INPUT_TYPE_TIME)
- else if (!timeInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isTimeField()) {
- timeInputStyleSheet = parseUASheet(RenderTheme::singleton().timeInputStyleSheet());
- addToDefaultStyle(*timeInputStyleSheet);
- }
-#endif // ENABLE(INPUT_TYPE_TIME)
-#if ENABLE(INPUT_TYPE_WEEK)
- else if (!weekInputStyleSheet && is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isWeekField()) {
- weekInputStyleSheet = parseUASheet(RenderTheme::singleton().weekInputStyleSheet());
- addToDefaultStyle(*weekInputStyleSheet);
- }
-#endif // ENABLE(INPUT_TYPE_WEEK)
} else if (is<SVGElement>(element)) {
if (!svgStyleSheet) {
// SVG rules.
Modified: trunk/Source/WebCore/style/UserAgentStyle.h (267700 => 267701)
--- trunk/Source/WebCore/style/UserAgentStyle.h 2020-09-28 15:00:14 UTC (rev 267700)
+++ trunk/Source/WebCore/style/UserAgentStyle.h 2020-09-28 15:37:19 UTC (rev 267701)
@@ -54,21 +54,6 @@
#if ENABLE(INPUT_TYPE_COLOR)
static StyleSheetContents* colorInputStyleSheet;
#endif
-#if ENABLE(INPUT_TYPE_DATE)
- static StyleSheetContents* dateInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_DATETIMELOCAL)
- static StyleSheetContents* dateTimeLocalInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_MONTH)
- static StyleSheetContents* monthInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_TIME)
- static StyleSheetContents* timeInputStyleSheet;
-#endif
-#if ENABLE(INPUT_TYPE_WEEK)
- static StyleSheetContents* weekInputStyleSheet;
-#endif
static StyleSheetContents* mediaQueryStyleSheet;
