Changeset 131421 in webkit


Ignore:
Timestamp:
Oct 15, 2012 11:54:46 PM (12 years ago)
Author:
tkent@chromium.org
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.

  1. Remove top, right, and bottom paddings to match input[type=number]

appearance as possible.

  1. Remove unnecessary position:relative for spin buttons.
  1. 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:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r131420 r131421  
     12012-10-15  Kent Tamura  <tkent@chromium.org>
     2
     3        Fix some appearance glitches of multiple fields input elements
     4        https://bugs.webkit.org/show_bug.cgi?id=99412
     5
     6        Reviewed by Kentaro Hara.
     7
     8        All of rendering tests for multiple fields inputs need rebaseline
     9        because of the padding change.
     10
     11        * fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt:
     12        * fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html:
     13        Add a fixed height case.
     14        * platform/chromium-mac/fast/forms/date-multiple-fields/date-multiple-fields-appearance-style-expected.png:
     15        * platform/chromium-mac/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.png:
     16        * platform/chromium/TestExpectations:
     17
    1182012-10-16  Keishi Hattori  <keishi@webkit.org>
    219

  • trunk/LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-appearance-style-expected.txt

    r127396 r131421  
    44font-size:
    55font-size with fixed input width:
     6Fixed input height:

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

    r127396 r131421  
    77    <li>font-size: <input type="time" value="12:34" style="font-size: 20pt"></li>
    88    <li>font-size with fixed input width: <input type="time" value="12:34" style="font-size: 20pt; width: 10em;"></li>
     9    <li>Fixed input height: <input type="time" value="12:34" style="height: 4em;"></li>
    910</ul>
     11<script>
     12if (window.testRunner)
     13    testRunner.dumpAsText(true);
     14</script>
    1015</body>
    11 <script>
    12 if (window.testRunner) {
    13     testRunner.dumpAsText(true);
    14 }
    15 </script>
    1616</html>

  • trunk/LayoutTests/platform/chromium/TestExpectations

    r131420 r131421  
    38933893webkit.org/b/99421 platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-appearance.html [ Pass ImageOnlyFailure ]
    38943894
     3895webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
     3896webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
     3897webkit.org/b/99412 fast/forms/date-multiple-fields/date-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
     3898webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
     3899webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
     3900webkit.org/b/99412 fast/forms/month-multiple-fields/month-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
     3901webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-disabled-readonly.html [ Pass ImageOnlyFailure ]
     3902webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
     3903webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
     3904webkit.org/b/99412 fast/forms/time-multiple-fields/time-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
     3905webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-pseudo-classes.html [ Pass ImageOnlyFailure ]
     3906webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-pseudo-elements.html [ Pass ImageOnlyFailure ]
     3907webkit.org/b/99412 fast/forms/week-multiple-fields/week-multiple-fields-appearance-style.html [ Pass ImageOnlyFailure ]
     3908webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-appearance-with-scroll-bar.html [ Pass ImageOnlyFailure ]
     3909webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/time-suggestion-picker-appearance-with-scroll-bar.html [ Pass ImageOnlyFailure ]
     3910webkit.org/b/99412 [ Mac Linux Win ] platform/chromium/fast/forms/suggestion-picker/time-suggestion-picker-appearance.html [ Pass ImageOnlyFailure ]
     3911
    38953912webkit.org/b/96549 [ Mac Android ] platform/chromium/virtual/gpu/fast/hidpi/focus-rings.html [ ImageOnlyFailure ]
    38963913webkit.org/b/96549 [ Mac ] platform/chromium/virtual/gpu/fast/hidpi/video-controls-in-hidpi.html [ ImageOnlyFailure ]

  • trunk/Source/WebCore/ChangeLog

    r131419 r131421  
     12012-10-15  Kent Tamura  <tkent@chromium.org>
     2
     3        Fix some appearance glitches of multiple fields input elements
     4        https://bugs.webkit.org/show_bug.cgi?id=99412
     5
     6        Reviewed by Kentaro Hara.
     7
     8        1. If CSS-specified width is wider than the intrinsic width of an input,
     9        the spin button and the picker indicator triangle should be put at the
     10        right side of the content area.
     11
     12        2. Remove top, right, and bottom paddings to match input[type=number]
     13        appearance as possible.
     14
     15        3. Remove unnecessary position:relative for spin buttons.
     16
     17        4. Center content vertically if the height is taller than the intrinsic height.
     18
     19        Tests: Update all of rendering tests for input element with multiple fields UI.
     20
     21        * css/html.css:
     22        (input[type="date"]):
     23        - Specify display:-webkit-inline-flex and -webkit-align-items:stretch to center contents.
     24        - Remove top/right/bottom paddings.
     25        (input[type="datetime"]): Ditto.
     26        (input[type="datetime-local"]): Ditto.
     27        (input[type="month"]): Ditto.
     28        (input[type="time"]): Ditto.
     29        (input[type="week"]): Ditto.
     30        (input::-webkit-datetime-edit):
     31        - Switch to the starndard flexible box from the legacy one.
     32        - Add white-space:pre to avoid to collapse white spaces.
     33        (input::-webkit-datetime-edit-gap):
     34        Added. This element is added to push a spin button to the right side.
     35        (input::-webkit-date-and-time-container):
     36        Add -webkit-flex:1 for the input flexible box.
     37        Sort properties.
     38        (input[type="week"]::-webkit-inner-spin-button):
     39        - Use this in date, datetime, datetime-local, and week types.
     40        - Add display:inline-block because other elements in -webkit-datetime-edit is inilne.
     41        - Add position:static to cancel position:relative below.
     42
     43        * html/shadow/DateTimeEditElement.cpp:
     44        (WebCore::DateTimeEditElement::layout):
     45        Add an element with -webkit-datetime-edit-gap before a spin button.
     46
    1472012-10-15  Yury Semikhatsky  <yurys@chromium.org>
    248

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

    r131378 r131421  
    480480#if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
    481481input[type="date"] {
     482    -webkit-align-items: stretch;
     483    display: -webkit-inline-flex;
    482484    font-family: monospace;
     485    padding: 0 0 0 1px;
    483486}
    484487#endif
    485488#if defined(ENABLE_INPUT_TYPE_DATETIME) && ENABLE_INPUT_TYPE_DATETIME
    486489input[type="datetime"] {
     490    -webkit-align-items: stretch;
     491    display: -webkit-inline-flex;
    487492    font-family: monospace;
     493    padding: 0 0 0 1px;
    488494}
    489495#endif
    490496#if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
    491497input[type="datetime-local"] {
     498    -webkit-align-items: stretch;
     499    display: -webkit-inline-flex;
    492500    font-family: monospace;
     501    padding: 0 0 0 1px;
    493502}
    494503#endif
    495504#if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
    496505input[type="month"] {
     506    -webkit-align-items: stretch;
     507    display: -webkit-inline-flex;
    497508    font-family: monospace;
     509    padding: 0 0 0 1px;
    498510}
    499511#endif
    500512#if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
    501513input[type="time"] {
     514    -webkit-align-items: stretch;
     515    display: -webkit-inline-flex;
    502516    font-family: monospace;
     517    padding: 0 0 0 1px;
    503518}
    504519#endif
    505520#if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
    506521input[type="week"] {
     522    -webkit-align-items: stretch;
     523    display: -webkit-inline-flex;
    507524    font-family: monospace;
     525    padding: 0 0 0 1px;
    508526}
    509527#endif
    510528
    511529input::-webkit-datetime-edit {
    512     -webkit-user-modify: read-only !important;
    513     display: -webkit-box;
    514     -webkit-box-align: center;
     530    -webkit-align-items: center;
     531    -webkit-flex: 1;
     532    -webkit-user-modify: read-only !important;
     533    display: -webkit-flex;
     534    white-space: pre;
    515535}
    516536
    … …  
    592612}
    593613
     614input::-webkit-datetime-edit-gap {
     615    -webkit-flex: 1;
     616    -webkit-user-modify: read-only !important;
     617    display: inline-block;
     618}
     619
    594620input::-webkit-date-and-time-container {
     621    -webkit-align-items: center;
     622    -webkit-flex: 1;
    595623    display: -webkit-flex;
    596     -webkit-align-items: center;
    597624}
    598625
    … …  
    617644}
    618645
     646input[type="date"]::-webkit-inner-spin-button,
     647input[type="datetime"]::-webkit-inner-spin-button,
     648input[type="datetime-local"]::-webkit-inner-spin-button,
    619649input[type="month"]::-webkit-inner-spin-button,
    620 input[type="time"]::-webkit-inner-spin-button {
     650input[type="time"]::-webkit-inner-spin-button,
     651input[type="week"]::-webkit-inner-spin-button {
     652    display: inline-block;
    621653    margin-left: 0.2em;
     654    position: static;
    622655}
    623656#endif

  • trunk/Source/WebCore/html/shadow/DateTimeEditElement.cpp

    r130848 r131421  
    397397    }
    398398
     399    DEFINE_STATIC_LOCAL(AtomicString, gapPseudoId, ("-webkit-datetime-edit-gap", AtomicString::ConstructFromLiteral));
     400    RefPtr<HTMLDivElement> gapElement = HTMLDivElement::create(document());
     401    gapElement->setShadowPseudoId(gapPseudoId);
     402    appendChild(gapElement);
    399403    RefPtr<SpinButtonElement> spinButton = SpinButtonElement::create(document(), *this);
    400404    m_spinButton = spinButton.get();
Note: See TracChangeset for help on using the changeset viewer.