Changeset 126250 in webkit


Ignore:
Timestamp:
Aug 21, 2012 7:05:51 PM (12 years ago)
Author:
yosin@chromium.org
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.
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r126249 r126250  
     12012-08-21  Yoshifumi Inoue  <yosin@chromium.org>
     2
     3        [Forms] multiple fields time input UI should not have two focus ring.
     4        https://bugs.webkit.org/show_bug.cgi?id=94579
     5
     6        Reviewed by Hajime Morita.
     7
     8        This patch adds a test case of focus appearance multiple fields time
     9        input UI.
     10
     11        * fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html: Added script to make focus appearance.
     12        * fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html: Added script to set focus to input element.
     13
    1142012-08-21  Adam Barth  <abarth@webkit.org>
    215

  • trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html

    r125849 r126250  
    55<body>
    66<ul>
    7     <li>step=none <span type="time"></span> <span type="time" value="12:34:56.789"></span></li>
     7    <li>step=none <span id="focus" type="time"></span> <span type="time" value="12:34:56.789"></span></li>
    88    <li>step=1 <span type="time" step="1"></span> <span step="1" type="time" value="12:34:56.789"></span></li>
    99    <li>step=0.0001 <span type="time" step="0.001"></span> <span step="0.001" type="time" value="12:34:56.789"></span></li>
    … …  
    1313</body>
    1414<script src="./resources/time-multiple-fields-appearance.js"></script>
     15<script>
     16var focusElment = document.getElementById("focus");
     17focusElment.setAttribute("style", "outline: auto 5px -webkit-focus-ring-color; outline-offset: -2px;");
     18var hourField = focusElment.firstChild.firstChild;
     19hourField.style.backgroundColor = "highlight";
     20hourField.style.color = "highlighttext";
     21</script>
    1522</html>

  • trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html

    r125849 r126250  
    22<body>
    33<ul>
    4     <li>step=none <input type="time"> <input type="time" value="12:34:56.789"></li>
     4    <li>step=none <input id="focus" type="time"> <input type="time" value="12:34:56.789"></li>
    55    <li>step=1 <input type="time" step="1"> <input step="1" type="time" value="12:34:56.789"></li>
    66    <li>step=0.0001 <input type="time" step="0.001"> <input step="0.001" type="time" value="12:34:56.789"></li>
    … …  
    99</ul>
    1010</body>
     11<script>
     12document.getElementById("focus").focus();
     13</script>
    1114</html>

  • trunk/Source/WebCore/ChangeLog

    r126249 r126250  
     12012-08-21  Yoshifumi Inoue  <yosin@chromium.org>
     2
     3        [Forms] multiple fields time input UI should not have two focus ring.
     4        https://bugs.webkit.org/show_bug.cgi?id=94579
     5
     6        Reviewed by Hajime Morita.
     7
     8        This patch adds CSS selectors to override focus style for multiple
     9        fields time input UI.
     10
     11        No new tests. fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html
     12        is updated for including focus state appearance.
     13
     14        * css/html.css:
     15        (input::-webkit-datetime-edit-ampm-field:focus): Override default focus appearance.
     16        (input::-webkit-datetime-edit-hour-field:focus): ditto
     17        (input::-webkit-datetime-edit-millisecond-field:focus): ditto
     18        (input::-webkit-datetime-edit-minute-field:focus): ditto
     19        (input::-webkit-datetime-edit-second-field:focus): ditto
     20
    1212012-08-21  Adam Barth  <abarth@webkit.org>
    222

  • trunk/Source/WebCore/css/html.css

    r125849 r126250  
    531531}
    532532
     533/* Remove focus ring from fields and use highlight color */
     534input::-webkit-datetime-edit-ampm-field:focus,
     535input::-webkit-datetime-edit-hour-field:focus,
     536input::-webkit-datetime-edit-millisecond-fiel:focus,
     537input::-webkit-datetime-edit-minute-field:focus,
     538input::-webkit-datetime-edit-second-field:focus {
     539  background-color: highlight;
     540  color: highlighttext;
     541  outline: none;
     542}
     543
    533544/* This selector is used when step >= 60 second but format contains second field. */
    534545input::-webkit-datetime-edit-second-field[readonly] {
Note: See TracChangeset for help on using the changeset viewer.