- Revision
- 131421
- Author
- tk...@chromium.org
- Date
- 2012-10-15 23:54:46 -0700 (Mon, 15 Oct 2012)
Log Message
Fix some appearance glitches of multiple fields input elements
https://bugs.webkit.org/show_bug.cgi?id=99412
Reviewed by Kentaro Hara.
Source/WebCore:
1. If CSS-specified width is wider than the intrinsic width of an input,
the spin button and the picker indicator triangle should be put at the
right side of the content area.
2. Remove top, right, and bottom paddings to match input[type=number]
appearance as possible.
3. Remove unnecessary position:relative for spin buttons.
4. Center content vertically if the height is taller than the intrinsic height.
Tests: Update all of rendering tests for input element with multiple fields UI.
* css/html.css:
(input[type="date"]):
- Specify display:-webkit-inline-flex and -webkit-align-items:stretch to center contents.
- Remove top/right/bottom paddings.
(input[type="datetime"]): Ditto.
(input[type="datetime-local"]): Ditto.
(input[type="month"]): Ditto.
(input[type="time"]): Ditto.
(input[type="week"]): Ditto.
(input::-webkit-datetime-edit):
- Switch to the starndard flexible box from the legacy one.
- Add white-space:pre to avoid to collapse white spaces.
(input::-webkit-datetime-edit-gap):
Added. This element is added to push a spin button to the right side.
(input::-webkit-date-and-time-container):
Add -webkit-flex:1 for the input flexible box.
Sort properties.
(input[type="week"]::-webkit-inner-spin-button):
- Use this in date, datetime, datetime-local, and week types.
- Add display:inline-block because other elements in -webkit-datetime-edit is inilne.
- Add position:static to cancel position:relative below.
* html/shadow/DateTimeEditElement.cpp:
(WebCore::DateTimeEditElement::layout):
Add an element with -webkit-datetime-edit-gap before a spin button.
LayoutTests:
All of rendering tests for multiple fields inputs need rebaseline
because of the padding change.
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt:
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html:
Add a fixed height case.
* platform/chromium-mac/fast/forms/date-multiple-fields/date-multiple-fields-appearance-style-expected.png:
* platform/chromium-mac/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.png:
* platform/chromium/TestExpectations:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (131420 => 131421)
--- trunk/LayoutTests/ChangeLog 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/LayoutTests/ChangeLog 2012-10-16 06:54:46 UTC (rev 131421)
@@ -1,3 +1,20 @@
+2012-10-15 Kent Tamura <tk...@chromium.org>
+
+ Fix some appearance glitches of multiple fields input elements
+ https://bugs.webkit.org/show_bug.cgi?id=99412
+
+ Reviewed by Kentaro Hara.
+
+ All of rendering tests for multiple fields inputs need rebaseline
+ because of the padding change.
+
+ * fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt:
+ * fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html:
+ Add a fixed height case.
+ * platform/chromium-mac/fast/forms/date-multiple-fields/date-multiple-fields-appearance-style-expected.png:
+ * platform/chromium-mac/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.png:
+ * platform/chromium/TestExpectations:
+
2012-10-16 Keishi Hattori <kei...@webkit.org>
[Chromium] Mark date-suggestion-picker-appearance.html as need rebaseline
Modified: trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt (131420 => 131421)
--- trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt 2012-10-16 06:54:46 UTC (rev 131421)
@@ -3,3 +3,4 @@
background, color:
font-size:
font-size with fixed input width:
+Fixed input height:
Modified: trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html (131420 => 131421)
--- trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html 2012-10-16 06:54:46 UTC (rev 131421)
@@ -6,11 +6,11 @@
<li>background, color: <input type="time" value="12:34" style="border: 0px; background: green; color: yellow"></li>
<li>font-size: <input type="time" value="12:34" style="font-size: 20pt"></li>
<li>font-size with fixed input width: <input type="time" value="12:34" style="font-size: 20pt; width: 10em;"></li>
+ <li>Fixed input height: <input type="time" value="12:34" style="height: 4em;"></li>
</ul>
-</body>
<script>
-if (window.testRunner) {
+if (window.testRunner)
testRunner.dumpAsText(true);
-}
</script>
+</body>
</html>
Modified: trunk/LayoutTests/platform/chromium/TestExpectations (131420 => 131421)
--- trunk/LayoutTests/platform/chromium/TestExpectations 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/LayoutTests/platform/chromium/TestExpectations 2012-10-16 06:54:46 UTC (rev 131421)
@@ -3892,6 +3892,23 @@
webkit.org/b/99291 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/time-suggestion-picker-appearance-rtl.html [ Pass ImageOnlyFailure ]
webkit.org/b/99421 platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-appearance.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-disabled-readonly.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-appearance-with-scroll-bar.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/time-suggestion-picker-appearance-with-scroll-bar.html [ Pass ImageOnlyFailure ]
+webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/time-suggestion-picker-appearance.html [ Pass ImageOnlyFailure ]
+
webkit.org/b/96549 [ Mac Android ] platform/chromium/virtual/gpu/fast/hidpi/focus-rings.html [ ImageOnlyFailure ]
webkit.org/b/96549 [ Mac ] platform/chromium/virtual/gpu/fast/hidpi/video-controls-in-hidpi.html [ ImageOnlyFailure ]
webkit.org/b/96628 [ Lion ] fast/frames/calculate-order.html [ Failure Pass ]
Modified: trunk/LayoutTests/platform/chromium-mac/fast/forms/date-multiple-fields/date-multiple-fields-appearance-style-expected.png
(Binary files differ)
Modified: trunk/LayoutTests/platform/chromium-mac/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.png
(Binary files differ)
Modified: trunk/Source/WebCore/ChangeLog (131420 => 131421)
--- trunk/Source/WebCore/ChangeLog 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/Source/WebCore/ChangeLog 2012-10-16 06:54:46 UTC (rev 131421)
@@ -1,3 +1,49 @@
+2012-10-15 Kent Tamura <tk...@chromium.org>
+
+ Fix some appearance glitches of multiple fields input elements
+ https://bugs.webkit.org/show_bug.cgi?id=99412
+
+ Reviewed by Kentaro Hara.
+
+ 1. If CSS-specified width is wider than the intrinsic width of an input,
+ the spin button and the picker indicator triangle should be put at the
+ right side of the content area.
+
+ 2. Remove top, right, and bottom paddings to match input[type=number]
+ appearance as possible.
+
+ 3. Remove unnecessary position:relative for spin buttons.
+
+ 4. Center content vertically if the height is taller than the intrinsic height.
+
+ Tests: Update all of rendering tests for input element with multiple fields UI.
+
+ * css/html.css:
+ (input[type="date"]):
+ - Specify display:-webkit-inline-flex and -webkit-align-items:stretch to center contents.
+ - Remove top/right/bottom paddings.
+ (input[type="datetime"]): Ditto.
+ (input[type="datetime-local"]): Ditto.
+ (input[type="month"]): Ditto.
+ (input[type="time"]): Ditto.
+ (input[type="week"]): Ditto.
+ (input::-webkit-datetime-edit):
+ - Switch to the starndard flexible box from the legacy one.
+ - Add white-space:pre to avoid to collapse white spaces.
+ (input::-webkit-datetime-edit-gap):
+ Added. This element is added to push a spin button to the right side.
+ (input::-webkit-date-and-time-container):
+ Add -webkit-flex:1 for the input flexible box.
+ Sort properties.
+ (input[type="week"]::-webkit-inner-spin-button):
+ - Use this in date, datetime, datetime-local, and week types.
+ - Add display:inline-block because other elements in -webkit-datetime-edit is inilne.
+ - Add position:static to cancel position:relative below.
+
+ * html/shadow/DateTimeEditElement.cpp:
+ (WebCore::DateTimeEditElement::layout):
+ Add an element with -webkit-datetime-edit-gap before a spin button.
+
2012-10-15 Yury Semikhatsky <yu...@chromium.org>
Web Inspector: can't click delete button if watch _expression_ is very long
Modified: trunk/Source/WebCore/css/html.css (131420 => 131421)
--- trunk/Source/WebCore/css/html.css 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/Source/WebCore/css/html.css 2012-10-16 06:54:46 UTC (rev 131421)
@@ -479,39 +479,59 @@
#if defined(ENABLE_INPUT_MULTIPLE_FIELDS_UI) && ENABLE_INPUT_MULTIPLE_FIELDS_UI
#if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
input[type="date"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
#if defined(ENABLE_INPUT_TYPE_DATETIME) && ENABLE_INPUT_TYPE_DATETIME
input[type="datetime"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
#if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
input[type="datetime-local"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
#if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
input[type="month"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
#if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
input[type="time"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
#if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
input[type="week"] {
+ -webkit-align-items: stretch;
+ display: -webkit-inline-flex;
font-family: monospace;
+ padding: 0 0 0 1px;
}
#endif
input::-webkit-datetime-edit {
+ -webkit-align-items: center;
+ -webkit-flex: 1;
-webkit-user-modify: read-only !important;
- display: -webkit-box;
- -webkit-box-align: center;
+ display: -webkit-flex;
+ white-space: pre;
}
input::-webkit-datetime-edit-ampm-field {
@@ -591,9 +611,16 @@
padding: 0.15em;
}
+input::-webkit-datetime-edit-gap {
+ -webkit-flex: 1;
+ -webkit-user-modify: read-only !important;
+ display: inline-block;
+}
+
input::-webkit-date-and-time-container {
+ -webkit-align-items: center;
+ -webkit-flex: 1;
display: -webkit-flex;
- -webkit-align-items: center;
}
/* Remove focus ring from fields and use highlight color */
@@ -616,9 +643,15 @@
color: GrayText;
}
+input[type="date"]::-webkit-inner-spin-button,
+input[type="datetime"]::-webkit-inner-spin-button,
+input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button,
-input[type="time"]::-webkit-inner-spin-button {
+input[type="time"]::-webkit-inner-spin-button,
+input[type="week"]::-webkit-inner-spin-button {
+ display: inline-block;
margin-left: 0.2em;
+ position: static;
}
#endif
Modified: trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp (131420 => 131421)
--- trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp 2012-10-16 06:50:00 UTC (rev 131420)
+++ trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp 2012-10-16 06:54:46 UTC (rev 131421)
@@ -396,6 +396,10 @@
}
}
+ DEFINE_STATIC_LOCAL(AtomicString, gapPseudoId, ("-webkit-datetime-edit-gap", AtomicString::ConstructFromLiteral));
+ RefPtr<HTMLDivElement> gapElement = HTMLDivElement::create(document());
+ gapElement->setShadowPseudoId(gapPseudoId);
+ appendChild(gapElement);
RefPtr<SpinButtonElement> spinButton = SpinButtonElement::create(document(), *this);
m_spinButton = spinButton.get();
appendChild(spinButton);
