2012-09-27  Yoshifumi Inoue  <yosin@chromium.org>

        [Forms] Multiple fields month input UI

        https://bugs.webkit.org/show_bug.cgi?id=97299

        Reviewed by NOBODY (OOPS!).

        This patch introduces multiple fields month input UI inside ENABLE_INPUT_TYPE_MONTH

        and ENABLE_INPUT_MULTIPLE_FIELDS_UI.

        To support month and year fields, this patch adds new functionalities

        into DateTimeNumericFields class:

          - Field specific default for step down and up with empty value for

            year field to set current year instead of minimum year(1) or

            maximum year(27160).

          - Field specific placeholder instead of sequence of dash characters

            calculated from minimum/maximum value for displaying "----"

            instead of "------" on year field which maximum value is 27160.

        Tests: fast/forms/month-multiple-fields/month-multiple-fields-appearance-basic.html

               fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes.html

               fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements.html

               fast/forms/month-multiple-fields/month-multiple-fields-appearance-style.html

        Note: To reduce size of patch, other tests are introduced by another patch.

        * css/html.css:

        (input::-webkit-datetime-edit-month-field):

        (input::-webkit-datetime-edit-year-field):

        (input::-webkit-datetime-edit-month-field:focus):

        (input::-webkit-datetime-edit-year-field:focus):

        * html/MonthInputType.cpp:

        (WebCore::MonthInputType::formatDateTimeFieldsState): Added to implement virtual funciton declared in BaseMultipleFieldsDateAndTimeInputType to format DateTimeFieldsState as submitted value.

        (WebCore::MonthInputType::setupLayoutParameters): Added  implement virtual funciton declared in BaseMultipleFieldsDateAndTimeInputType to set layout parameters for "month" input type.

        * html/MonthInputType.h:

        (WebCore::MonthInputType::MonthInputType): Changed base class name to BaseMonthInputType.

        (MonthInputType): Added declarations for formatDateTimeFieldsState and setupLayoutParameters.

        * html/shadow/DateTimeEditElement.cpp:

        (WebCore::DateTimeEditBuilder::DateTimeEditBuilder): Changed to initialize new member variables, m_placeholderForMonth and m_placeholderForYear.

        (WebCore::DateTimeEditBuilder::visitField): Changed to pass placeholder to month and year fields.

        * html/shadow/DateTimeEditElement.h:

        (LayoutParameters): Changed to add new member variables, m_placeholderForMonth and m_placeholderForYear.

        * html/shadow/DateTimeFieldElements.cpp:

        (WebCore::DateTimeHourFieldElement::DateTimeHourFieldElement): Changed to pass placeholder to base class constructor.

        (WebCore::DateTimeMillisecondFieldElement::DateTimeMillisecondFieldElement): ditto

        (WebCore::DateTimeMinuteFieldElement::DateTimeMinuteFieldElement): ditto

        (WebCore::DateTimeMonthFieldElement::DateTimeMonthFieldElement): Added.

        (WebCore::DateTimeMonthFieldElement::create): Added.

        (WebCore::DateTimeMonthFieldElement::populateDateTimeFieldsState): Added.

        (WebCore::DateTimeMonthFieldElement::setValueAsDate): Added.

        (WebCore::DateTimeMonthFieldElement::setValueAsDateTimeFieldsState): Added.

        (WebCore::DateTimeSecondFieldElement::DateTimeSecondFieldElement): Changed to pass placeholder to base class constructor.

        (WebCore::DateTimeYearFieldElement::DateTimeYearFieldElement): Added.

        (WebCore::DateTimeYearFieldElement::create): Added.

        (WebCore::DateTimeYearFieldElement::defaultValueForStepDown): Added.

        (WebCore::DateTimeYearFieldElement::defaultValueForStepUp): Added.

        (WebCore::DateTimeYearFieldElement::populateDateTimeFieldsState): Added.

        (WebCore::DateTimeYearFieldElement::setValueAsDate): Added.

        (WebCore::DateTimeYearFieldElement::setValueAsDateTimeFieldsState): Added.

        * html/shadow/DateTimeFieldElements.h:

        (DateTimeMonthFieldElement): Added.

        (DateTimeYearFieldElement): Added.

        * html/shadow/DateTimeNumericFieldElement.cpp:

        (WebCore::DateTimeNumericFieldElement::DateTimeNumericFieldElement): Changed to add new parameter for placeholder.

        (WebCore::DateTimeNumericFieldElement::defaultValueForStepDown): Added.

        (WebCore::DateTimeNumericFieldElement::defaultValueForStepUp): Added.

        (WebCore::DateTimeNumericFieldElement::stepDown): Changed to use defaultValueForStepDown() when field doesn't have value.

        (WebCore::DateTimeNumericFieldElement::stepUp): Changed to use defaultValueForStepUp() when field doesn't have value.

        (WebCore::DateTimeNumericFieldElement::value): Changed to use format "%04d" if maximum value is greater than 999.

        (WebCore::DateTimeNumericFieldElement::visibleValue): Changed to use m_placeholder instead of calculating sequence of dash.

        * html/shadow/DateTimeNumericFieldElement.h:

        (DateTimeNumericFieldElement): Changed for new parameter, placeholder, in constructor.

input::-webkit-datetime-edit-month-field {

    -webkit-user-modify: read-only !important;

    display: inline-block;

    border: none;

    text-align: center;

    padding: 0.15em;

}

input::-webkit-datetime-edit-year-field {

    -webkit-user-modify: read-only !important;

    display: inline-block;

    border: none;

    text-align: center;

    padding: 0.15em;

}

input[type="month"]::-webkit-inner-spin-button,

#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)

#include "DateTimeFieldsState.h"

#include "LocalizedStrings.h"

#include "Localizer.h"

#include <wtf/text/WTFString.h>

#endif

#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)

String MonthInputType::formatDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState) const

{

    if (!dateTimeFieldsState.hasMonth() || !dateTimeFieldsState.hasYear())

        return emptyString();

    return String::format("%u-%02u", dateTimeFieldsState.year(), dateTimeFieldsState.month());

}

void MonthInputType::setupLayoutParameters(DateTimeEditElement::LayoutParameters& layoutParameters, const DateComponents& date) const

{

    layoutParameters.dateTimeFormat = monthFormatInLDML();

    layoutParameters.fallbackDateTimeFormat = "MM/yyyy";

    layoutParameters.placeholderForMonth = "--";

    layoutParameters.placeholderForYear = "----";

}

#endif

#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)

#include "BaseMultipleFieldsDateAndTimeInputType.h"

#else

#include "BaseDateAndTimeInputType.h"

#endif

#if ENABLE(INPUT_MULTIPLE_FIELDS_UI)

    // BaseMultipleFieldsDateAndTimeInputType functions

    virtual String formatDateTimeFieldsState(const DateTimeFieldsState&) const OVERRIDE FINAL;

    virtual void setupLayoutParameters(DateTimeEditElement::LayoutParameters&, const DateComponents&) const OVERRIDE FINAL;

#endif

    const String& m_placeholderForMonth;

    const String& m_placeholderForYear;

    , m_placeholderForMonth(layoutParameters.placeholderForMonth)

    , m_placeholderForYear(layoutParameters.placeholderForYear)

    case DateTimeFormat::FieldTypeMonth:

        m_editElement.addField(DateTimeMonthFieldElement::create(document, m_editElement, m_placeholderForMonth));

        return;

    case DateTimeFormat::FieldTypeYear:

        m_editElement.addField(DateTimeYearFieldElement::create(document, m_editElement, m_placeholderForYear));

        return;

        String placeholderForMonth;

        String placeholderForYear;

#include <wtf/CurrentTime.h>

#include <wtf/DateMath.h>

DateTimeMonthFieldElement::DateTimeMonthFieldElement(Document* document, FieldOwner& fieldOwner, const String& placeholder)

    : DateTimeNumericFieldElement(document, fieldOwner, 1, 12, placeholder)

{

}

PassRefPtr<DateTimeMonthFieldElement> DateTimeMonthFieldElement::create(Document* document, FieldOwner& fieldOwner, const String& placeholder)

{

    DEFINE_STATIC_LOCAL(AtomicString, monthPsuedoId, ("-webkit-datetime-edit-month-field"));

    RefPtr<DateTimeMonthFieldElement> field = adoptRef(new DateTimeMonthFieldElement(document, fieldOwner, placeholder));

    field->initialize(monthPsuedoId, AXMonthFieldText());

    return field.release();

}

void DateTimeMonthFieldElement::populateDateTimeFieldsState(DateTimeFieldsState& dateTimeFieldsState)

{

    dateTimeFieldsState.setMonth(hasValue() ? valueAsInteger() : DateTimeFieldsState::emptyValue);

}

void DateTimeMonthFieldElement::setValueAsDate(const DateComponents& date)

{

    setValueAsInteger(date.month() + 1);

}

void DateTimeMonthFieldElement::setValueAsDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState, const DateComponents& dateForReadOnlyField)

{

    if (!dateTimeFieldsState.hasMonth()) {

        setEmptyValue(dateForReadOnlyField);

        return;

    }

    const unsigned value = dateTimeFieldsState.month();

    if (value > static_cast<unsigned>(maximum())) {

        setEmptyValue(dateForReadOnlyField);

        return;

    }

    setValueAsInteger(value);

}

// ----------------------------

// ----------------------------

// HTML5 uses ISO-8601 format with year >= 1. Gregorian calendar started in

// 1582. However, we need to support 0001-01-01 in Gregorian calendar rule.

static const int minimumYear = 1;

// Date in ECMAScript can't represent dates later than 275760-09-13T00:00Z.

// So, we have the same upper limit in HTML5 dates.

static const int maximumYear = 275760;

DateTimeYearFieldElement::DateTimeYearFieldElement(Document* document, FieldOwner& fieldOwner, const String& placeholder)

    : DateTimeNumericFieldElement(document, fieldOwner, minimumYear, maximumYear, placeholder)

{

}

PassRefPtr<DateTimeYearFieldElement> DateTimeYearFieldElement::create(Document* document, FieldOwner& fieldOwner, const String& placeholder)

{

    DEFINE_STATIC_LOCAL(AtomicString, yearPsuedoId, ("-webkit-datetime-edit-year-field"));

    RefPtr<DateTimeYearFieldElement> field = adoptRef(new DateTimeYearFieldElement(document, fieldOwner, placeholder));

    field->initialize(yearPsuedoId, AXYearFieldText());

    return field.release();

}

int DateTimeYearFieldElement::defaultValueForStepDown() const

{

    double current = currentTimeMS();

    double utcOffset = calculateUTCOffset();

    double dstOffset = calculateDSTOffset(current, utcOffset);

    int offset = static_cast<int>((utcOffset + dstOffset) / msPerMinute);

    current += offset * msPerMinute;

    DateComponents date;

    date.setMillisecondsSinceEpochForMonth(current);

    return date.fullYear();

}

int DateTimeYearFieldElement::defaultValueForStepUp() const

{

    return defaultValueForStepDown();

}

void DateTimeYearFieldElement::populateDateTimeFieldsState(DateTimeFieldsState& dateTimeFieldsState)

{

    dateTimeFieldsState.setYear(hasValue() ? valueAsInteger() : DateTimeFieldsState::emptyValue);

}

void DateTimeYearFieldElement::setValueAsDate(const DateComponents& date)

{

    setValueAsInteger(date.fullYear());

}

void DateTimeYearFieldElement::setValueAsDateTimeFieldsState(const DateTimeFieldsState& dateTimeFieldsState, const DateComponents& dateForReadOnlyField)

{

    if (!dateTimeFieldsState.hasYear()) {

        setEmptyValue(dateForReadOnlyField);

        return;

    }

    const unsigned value = dateTimeFieldsState.year();

    if (value > static_cast<unsigned>(maximum())) {

        setEmptyValue(dateForReadOnlyField);

        return;

    }

    setValueAsInteger(value);

}

class DateTimeMonthFieldElement : public DateTimeNumericFieldElement {

    WTF_MAKE_NONCOPYABLE(DateTimeMonthFieldElement);

public:

    static PassRefPtr<DateTimeMonthFieldElement> create(Document*, FieldOwner&, const String& placeholder);

private:

    DateTimeMonthFieldElement(Document*, FieldOwner&, const String& placeholder);

    // DateTimeFieldElement functions.

    virtual void populateDateTimeFieldsState(DateTimeFieldsState&) OVERRIDE FINAL;

    virtual void setValueAsDate(const DateComponents&) OVERRIDE FINAL;

    virtual void setValueAsDateTimeFieldsState(const DateTimeFieldsState&, const DateComponents& dateForReadOnlyField) OVERRIDE FINAL;

};

class DateTimeYearFieldElement : public DateTimeNumericFieldElement {

    WTF_MAKE_NONCOPYABLE(DateTimeYearFieldElement);

public:

    static PassRefPtr<DateTimeYearFieldElement> create(Document*, FieldOwner&, const String& placeholder);

private:

    DateTimeYearFieldElement(Document*, FieldOwner&, const String& placeholder);

    // DateTimeFieldElement functions.

    virtual void populateDateTimeFieldsState(DateTimeFieldsState&) OVERRIDE FINAL;

    virtual void setValueAsDate(const DateComponents&) OVERRIDE FINAL;

    virtual void setValueAsDateTimeFieldsState(const DateTimeFieldsState&, const DateComponents& dateForReadOnlyField) OVERRIDE FINAL;

    // DateTimeNumericFieldElement functions.

    virtual int defaultValueForStepDown() const OVERRIDE FINAL;

    virtual int defaultValueForStepUp() const OVERRIDE FINAL;

};

    , m_placeholder(placeholder)

int DateTimeNumericFieldElement::defaultValueForStepDown() const

{

    return m_range.maximum;

}

int DateTimeNumericFieldElement::defaultValueForStepUp() const

{

    return m_range.minimum;

}

    virtual int defaultValueForStepDown() const;

    virtual int defaultValueForStepUp() const;

    const String m_placeholder;

2012-09-27  Yoshifumi Inoue  <yosin@chromium.org>

        [Forms] Multiple fields month input UI

        https://bugs.webkit.org/show_bug.cgi?id=97299

        Reviewed by NOBODY (OOPS!).

        This patch adds tests for multiple fields month input UI and disabling

        these tests on ports which don't enable both ENABLE_INPUT_TYPE_MONTH

        and ENABLE_INPUT_MULTIPLE_FIELDS_UI.

        Note: We need to do rebaseline tests to update images for Chromium-Mac

        and Chromium-Win.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-basic-expected.txt: Added.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-basic.html: Added for checking basic appearance.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes-expected.txt: Added.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes.html: Added for checking appearance of applying CSS pseudo classes, e.g. :enabled, :invalid, and so on.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements-expected.txt: Added.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements.html: Added for checking appearance of applying CSS pseudo elements, e.g. :after, :before, and so on.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-style-expected.txt: Added.

        * fast/forms/month-multiple-fields/month-multiple-fields-appearance-style.html: Added for checking appearance of applying CSS styles.

        * platform/chromium-android/TestExpectations:

        * platform/chromium-linux/fast/forms/month-multiple-fields/month-multiple-fields-appearance-basic-expected.png: Added.

        * platform/chromium-linux/fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes-expected.png: Added.

        * platform/chromium-linux/fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements-expected.png: Added.

        * platform/chromium-linux/fast/forms/month-multiple-fields/month-multiple-fields-appearance-style-expected.png: Added.

        * platform/chromium/TestExpectations: Changed to disable tests for multiple fields month input UI of Mac and Win for rebaseline.

        * platform/chromium/fast/forms/month/month-input-visible-string-expected.txt: Added. Multiple fields month input UI doesn't have selection.

        * platform/chromium/fast/forms/month/month-stepup-stepdown-from-renderer-expected.txt: Added. Step up/Step down changes value of one field rather than whole value.

        * platform/efl/TestExpectations: Changed to disable tests for multiple fields month input UI.

        * platform/mac/Skipped: ditto

        * platform/qt/Skipped: ditto

        * platform/win/Skipped: ditto

        * platform/wincairo/Skipped: ditto

basic  

focus  

disabled  

readonly  

RTL  

<html>

<body>

<ul>

    <li>basic <input type="month"> <input type="month" value="1982-11"></li>

    <li>focus <input autofocus type="month"> <input type="month" value="1982-11"></li>

    <li>disabled <input type="month" disabled> <input type="month" value="1982-11" disabled></li>

    <li>readonly <input type="month" readonly> <input type="month" value="1982-11" readonly></li>

    <li>RTL <input type="month" dir="rtl"> <input type="month" value="1982-11" dir="rtl"></li>

</ul>

</body>

<script>

if (window.testRunner)

    testRunner.dumpAsText(true);

</script>

</html>

Input Type "month"

Pseudo Classes

:enabled, :valid	

:disabled	

:invalid	

:in-range	

:out-of-range	

:read-only	

<html>

<head>

<style type="text/css">

:disabled { color: gray; }

:enabled { color: blue; }

:invalid { color: pink; }

:in-range { font-weight: bold; }

:out-of-range { color: red; }

:read-only { color: yellow; }

:valid { color: green; }

</style>

</head>

<body>

<h1>Input Type "month"</h1>

<h2>Pseudo Classes</h2>

<table>

<tr><th>:enabled, :valid</th><td><input type="month" value="1982-11"></td></tr>

<tr><th>:disabled</th><td><input type="month" value="1982-11" disabled></td></tr>

<tr><th>:invalid</th><td><input type="month" value="1982-11" min="1982-10" step="2"></td></tr>

<tr><th>:in-range</th><td><input type="month" value="1982-11" min="1982-01" max="1982-12"></td></tr>

<tr><th>:out-of-range</th><td><input type="month" value="1982-11" min="1981-01" max="1981-12"></td></tr>

<tr><th>:read-only</th><td><input type="month" value="1982-11" readonly></td></tr>

</table>

</body>

<script>

if (window.testRunner)

    testRunner.dumpAsText(true);

</script>

</html>

<html>

<head>

<style type="text/css">

.after:after { content: "[after]"; }

.before:before { content: "[before]"; }

.first-letter:first-letter { color: green; font-size: 200%; }

</style>

</head>

<body>

<ul>

    <li><input type="month" value="1982-11" class="after"></li>

    <li><input type="month" value="1982-11" class="before"></li>

    <li><input type="month" value="1982-11" class="first-letter"></li>

</ul>

</body>

<script>

if (window.testRunner)

    testRunner.dumpAsText(true);

</script>

</html>

text-align: 

text-transform: 

background, color: 

font-size: 

font-size with fixed input width: 

<html>

<body>

<ul>

    <li>text-align: <input type="month" value="1982-11" style="text-align: left"></li>

    <li>text-transform: <input type="month" value="1982-11" style="text-transform: lowercase"></li>

    <li>background, color: <input type="month" value="1982-11" style="border: 0px; background: green; color: yellow"></li>

    <li>font-size: <input type="month" value="1982-11" style="font-size: 20pt"></li>

    <li>font-size with fixed input width: <input type="month" value="1982-11" style="font-size: 20pt; width: 10em;"></li>

</ul>

</body>

<script>

if (window.testRunner)

    testRunner.dumpAsText(true);

</script>

</html>

crbug.com/145338 fast/forms/month-multiple-fields

webkit.org/b/97299 [ Mac Win ] fast/forms/month-multiple-fields/month-multiple-fields-appearance-basic.html [ ImageOnlyFailure Pass ]

webkit.org/b/97299 [ Mac Win ] fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-classes.html [ ImageOnlyFailure Pass ]

webkit.org/b/97299 [ Mac Win ] fast/forms/month-multiple-fields/month-multiple-fields-appearance-pseudo-elements.html [ ImageOnlyFailure Pass ]

webkit.org/b/97299 [ Mac Win ] fast/forms/month-multiple-fields/month-multiple-fields-appearance-style.html [ ImageOnlyFailure Pass ]

The user-visible values of month input fields should be localized if the platform has a LocalizedDate implementation. Otherwise, they should be in the HTML5 formats.

month: value='2011-04' visible='The user-visible values of month input fields should be localized if the platform has a LocalizedDate implementation. Otherwise, they should be in the HTML5 formats.

'

PASS successfullyParsed is true

TEST COMPLETE

Check stepping-up and -down for month input fields from renderer. No cases of empty initial values.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".

Function arguments are (value, step, {min or max}, [stepCount]).

Normal cases

FAIL stepUp("2010-02", null, null) should be 2010-03. Was 2010-02.

FAIL stepDown("2010-02", null, null) should be 2010-01. Was 2010-02.

FAIL stepUp("2010-02", null, null, 10) should be 2010-12. Was 2010-02.

FAIL stepDown("2010-02", null, null, 11) should be 2009-03. Was 2010-02.

FAIL stepUp("1970-01", "4", null, 2) should be 1970-09. Was 1970-01.

FAIL stepDown("1970-01", "4", null, 3) should be 1969-01. Was 1970-01.

Step=any

FAIL stepUp("2010-02", "any", null) should be 2010-03. Was 2010-02.

FAIL stepDown("2010-02", "any", null) should be 2010-01. Was 2010-02.

Overflow/underflow

FAIL stepUp("2010-02", "3.40282346e+38", null) should be 275760-09. Was 2010-02.

FAIL stepDown("2010-02", "3.40282346e+38", null) should be 1970-01. Was 2010-02.

PASS stepUp("2010-02", "1", "2010-02") is "2010-02"

PASS stepDown("2010-02", "1", "2010-02") is "2010-02"

stepDown()/stepUp() for stepMismatch values

FAIL stepDown("2010-02", "3", "2009-10") should be 2010-01. Was 2010-02.

FAIL stepUp("1970-02", "4", "") should be 1970-05. Was 1970-02.

PASS successfullyParsed is true

TEST COMPLETE

webkit.org/b/97299 fast/forms/time-multiple-fields

fast/forms/month-multiple-fields

fast/forms/month-multiple-fields

fast/forms/month-multiple-fields

fast/forms/month-multiple-fields