Title: [126250] trunk
- Revision
- 126250
- Author
- [email protected]
- Date
- 2012-08-21 19:05:51 -0700 (Tue, 21 Aug 2012)
Log Message
[Forms] multiple fields time input UI should not have two focus ring.
https://bugs.webkit.org/show_bug.cgi?id=94579
Reviewed by Hajime Morita.
Source/WebCore:
This patch adds CSS selectors to override focus style for multiple
fields time input UI.
No new tests. fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html
is updated for including focus state appearance.
* css/html.css:
(input::-webkit-datetime-edit-ampm-field:focus): Override default focus appearance.
(input::-webkit-datetime-edit-hour-field:focus): ditto
(input::-webkit-datetime-edit-millisecond-field:focus): ditto
(input::-webkit-datetime-edit-minute-field:focus): ditto
(input::-webkit-datetime-edit-second-field:focus): ditto
LayoutTests:
This patch adds a test case of focus appearance multiple fields time
input UI.
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html: Added script to make focus appearance.
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html: Added script to set focus to input element.
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (126249 => 126250)
--- trunk/LayoutTests/ChangeLog 2012-08-22 01:50:40 UTC (rev 126249)
+++ trunk/LayoutTests/ChangeLog 2012-08-22 02:05:51 UTC (rev 126250)
@@ -1,3 +1,16 @@
+2012-08-21 Yoshifumi Inoue <[email protected]>
+
+ [Forms] multiple fields time input UI should not have two focus ring.
+ https://bugs.webkit.org/show_bug.cgi?id=94579
+
+ Reviewed by Hajime Morita.
+
+ This patch adds a test case of focus appearance multiple fields time
+ input UI.
+
+ * fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html: Added script to make focus appearance.
+ * fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html: Added script to set focus to input element.
+
2012-08-21 Adam Barth <[email protected]>
V8 shouldn't have its own way of printing cross-origin error messages
Modified: trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html (126249 => 126250)
--- trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html 2012-08-22 01:50:40 UTC (rev 126249)
+++ trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html 2012-08-22 02:05:51 UTC (rev 126250)
@@ -4,7 +4,7 @@
</head>
<body>
<ul>
- <li>step=none <span type="time"></span> <span type="time" value="12:34:56.789"></span></li>
+ <li>step=none <span id="focus" type="time"></span> <span type="time" value="12:34:56.789"></span></li>
<li>step=1 <span type="time" step="1"></span> <span step="1" type="time" value="12:34:56.789"></span></li>
<li>step=0.0001 <span type="time" step="0.001"></span> <span step="0.001" type="time" value="12:34:56.789"></span></li>
<li>step=60 <span type="time" step="60"></span> <span step="60" type="time" value="12:34:56.789"></span></li>
@@ -12,4 +12,11 @@
</ul>
</body>
<script src=""
+<script>
+var focusElment = document.getElementById("focus");
+focusElment.setAttribute("style", "outline: auto 5px -webkit-focus-ring-color; outline-offset: -2px;");
+var hourField = focusElment.firstChild.firstChild;
+hourField.style.backgroundColor = "highlight";
+hourField.style.color = "highlighttext";
+</script>
</html>
Modified: trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html (126249 => 126250)
--- trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html 2012-08-22 01:50:40 UTC (rev 126249)
+++ trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html 2012-08-22 02:05:51 UTC (rev 126250)
@@ -1,11 +1,14 @@
<html>
<body>
<ul>
- <li>step=none <input type="time"> <input type="time" value="12:34:56.789"></li>
+ <li>step=none <input id="focus" type="time"> <input type="time" value="12:34:56.789"></li>
<li>step=1 <input type="time" step="1"> <input step="1" type="time" value="12:34:56.789"></li>
<li>step=0.0001 <input type="time" step="0.001"> <input step="0.001" type="time" value="12:34:56.789"></li>
<li>step=60 <input type="time" step="60"> <input step="60" type="time" value="12:34:56.789"></li>
<li>step=3600 <input type="time" step="3600"> <input step="3600" type="time" value="12:34:56.789"></li>
</ul>
</body>
+<script>
+document.getElementById("focus").focus();
+</script>
</html>
Modified: trunk/Source/WebCore/ChangeLog (126249 => 126250)
--- trunk/Source/WebCore/ChangeLog 2012-08-22 01:50:40 UTC (rev 126249)
+++ trunk/Source/WebCore/ChangeLog 2012-08-22 02:05:51 UTC (rev 126250)
@@ -1,3 +1,23 @@
+2012-08-21 Yoshifumi Inoue <[email protected]>
+
+ [Forms] multiple fields time input UI should not have two focus ring.
+ https://bugs.webkit.org/show_bug.cgi?id=94579
+
+ Reviewed by Hajime Morita.
+
+ This patch adds CSS selectors to override focus style for multiple
+ fields time input UI.
+
+ No new tests. fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html
+ is updated for including focus state appearance.
+
+ * css/html.css:
+ (input::-webkit-datetime-edit-ampm-field:focus): Override default focus appearance.
+ (input::-webkit-datetime-edit-hour-field:focus): ditto
+ (input::-webkit-datetime-edit-millisecond-field:focus): ditto
+ (input::-webkit-datetime-edit-minute-field:focus): ditto
+ (input::-webkit-datetime-edit-second-field:focus): ditto
+
2012-08-21 Adam Barth <[email protected]>
V8 shouldn't have its own way of printing cross-origin error messages
Modified: trunk/Source/WebCore/css/html.css (126249 => 126250)
--- trunk/Source/WebCore/css/html.css 2012-08-22 01:50:40 UTC (rev 126249)
+++ trunk/Source/WebCore/css/html.css 2012-08-22 02:05:51 UTC (rev 126250)
@@ -530,6 +530,17 @@
padding: 0.15em;
}
+/* Remove focus ring from fields and use highlight color */
+input::-webkit-datetime-edit-ampm-field:focus,
+input::-webkit-datetime-edit-hour-field:focus,
+input::-webkit-datetime-edit-millisecond-fiel:focus,
+input::-webkit-datetime-edit-minute-field:focus,
+input::-webkit-datetime-edit-second-field:focus {
+ background-color: highlight;
+ color: highlighttext;
+ outline: none;
+}
+
/* This selector is used when step >= 60 second but format contains second field. */
input::-webkit-datetime-edit-second-field[readonly] {
color: GrayText;
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo/webkit-changes
