Add clear button to date/time input types

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

Reviewed by Kent Tamura.

Source/WebCore:

We want to remove the clear button from the calendar picker (Bug 109439)
so we are adding the clear button to the right side of the input element.

Tests: fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events.html
       fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events.html

* CMakeLists.txt: Added ClearButtonElement.cpp
* GNUmakefile.list.am: Ditto.
* Target.pri: Ditto.
* WebCore.gypi: Ditto.
* WebCore.vcproj/WebCore.vcproj: Ditto.
* WebCore.vcxproj/WebCore.vcxproj: Ditto.
* WebCore.vcxproj/WebCore.vcxproj.filters: Ditto.
* WebCore.xcodeproj/project.pbxproj: Ditto.
* css/html.css:
(input::-webkit-clear-button): Styles for the clear button.
* html/BaseMultipleFieldsDateAndTimeInputType.cpp:
(WebCore::BaseMultipleFieldsDateAndTimeInputType::editControlValueChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::BaseMultipleFieldsDateAndTimeInputType):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::~BaseMultipleFieldsDateAndTimeInputType):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::createShadowSubtree):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::destroyShadowSubtree):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::disabledAttributeChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::requiredAttributeChanged): Hide clear button if the value is required.
(WebCore):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::readonlyAttributeChanged):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::updateInnerTextValue):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::focusAndSelectClearButtonOwner): Called on mouse down on clear button.
(WebCore::BaseMultipleFieldsDateAndTimeInputType::shouldClearButtonRespondToMouseEvents):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::clearValue):
(WebCore::BaseMultipleFieldsDateAndTimeInputType::updateClearButtonVisibility): We want to hide the clear button if the value is required or the value is empty.
* html/BaseMultipleFieldsDateAndTimeInputType.h:
(BaseMultipleFieldsDateAndTimeInputType):
* html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::updateClearButtonVisibility):
(WebCore):
(WebCore::HTMLInputElement::requiredAttributeChanged):
* html/HTMLInputElement.h:
(HTMLInputElement):
* html/InputType.cpp:
(WebCore::InputType::requiredAttributeChanged): Notifies the InputType that the required attribute has changed.
(WebCore):
(WebCore::InputType::updateClearButtonVisibility):
* html/InputType.h:
(InputType):
* html/shadow/ClearButtonElement.cpp: Added.
(WebCore):
(WebCore::ClearButtonElement::ClearButtonElement):
(WebCore::ClearButtonElement::create):
(WebCore::ClearButtonElement::detach):
(WebCore::ClearButtonElement::releaseCapture): Stop capturing mouse events.
(WebCore::ClearButtonElement::defaultEventHandler):
* html/shadow/ClearButtonElement.h: Added.
(WebCore):
(ClearButtonElement):
(ClearButtonOwner):
(WebCore::ClearButtonElement::ClearButtonOwner::~ClearButtonOwner):
(WebCore::ClearButtonElement::removeClearButtonOwner):
(WebCore::ClearButtonElement::isMouseFocusable):

LayoutTests:

* fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events-expected.txt:
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events.html:
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-mouse-events-expected.txt:
* fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-mouse-events.html:
* fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/month-multiple-fields/month-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/month-multiple-fields/month-multiple-fields-mouse-events-expected.txt:
* fast/forms/month-multiple-fields/month-multiple-fields-mouse-events.html:
* fast/forms/resources/common-clearbutton-change-and-input-events.js: Added.
(.testInput.onchange):
(.testInput.oninput):
(testClearButtonChangeAndInputEvents):
* fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/time-multiple-fields/time-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/time-multiple-fields/time-multiple-fields-mouse-events-expected.txt:
* fast/forms/time-multiple-fields/time-multiple-fields-mouse-events.html:
* fast/forms/time-multiple-fields/time-multiple-fields-narrow-width-scroll.html:
* fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events-expected.txt: Added.
* fast/forms/week-multiple-fields/week-multiple-fields-clearbutton-change-and-input-events.html: Added.
* fast/forms/week-multiple-fields/week-multiple-fields-mouse-events-expected.txt:
* fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html:
* platform/chromium/TestExpectations:


git-svn-id: svn://svn.chromium.org/blink/trunk@145055 bbb929c8-8fbe-4397-9dbb-9b2b20218538

1 files changed, 14 insertions, 0 deletions

diff --git a/third_party/WebKit/LayoutTests/fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html b/third_party/WebKit/LayoutTests/fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html
index f2b1221..b72bf32 100644
--- a/third_party/WebKit/LayoutTests/fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html
+++ b/third_party/WebKit/LayoutTests/fast/forms/week-multiple-fields/week-multiple-fields-mouse-events.html
@@ -38,6 +38,7 @@ function mouseClickOn(x, y)
 input.value = '2345-W07';
 var center = input.offsetHeight / 2;
 var spinButtonOffset = 26;
+var clearButtonOffset = 41;
 
 debug('==> Focus on the week field.');
 mouseClickOn(100, center);
@@ -77,6 +78,19 @@ shouldBeEqualToString('input.value', '2346-W08');
 input.readOnly = false;
 
 debug('');
+debug('==> Click on clear button.');
+input.readOnly = true;
+mouseClickOn(input.offsetWidth - clearButtonOffset, center);
+shouldBeEqualToString('input.value', '2346-W08');
+input.disabled = true;
+input.readOnly = false;
+mouseClickOn(input.offsetWidth - clearButtonOffset, center);
+shouldBeEqualToString('input.value', '2346-W08');
+input.disabled = false;
+mouseClickOn(input.offsetWidth - clearButtonOffset, center);
+shouldBeEqualToString('input.value', '');
+
+debug('');
 </script>
 <script src="../../js/resources/js-test-post.js"></script>
 </body>