Commit 0f04410b authored by tkent@chromium.org's avatar tkent@chromium.org
Browse files

Add behavior tests for input[type=date] with multiple fields

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

Reviewed by Kentaro Hara.

* fast/forms/date-multiple-fields/date-multiple-fields-ax-aria-attributes-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-aria-attributes.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-value-changed-notification-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-value-changed-notification.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-blur-and-focus-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-blur-and-focus-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-keyboard-events-expected.txt:
* fast/forms/date-multiple-fields/date-multiple-fields-keyboard-events.html:
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-preserve-value-after-history-back-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-preserve-value-after-history-back.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-reset-value-after-reloads-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-reset-value-after-reloads.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-spinbutton-change-and-input-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-spinbutton-change-and-input-events.html: Copied from LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html.
* fast/forms/date-multiple-fields/date-multiple-fields-wheel-event-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-wheel-event.html: Copied from LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html.
* fast/forms/date/date-reset-value-expected.html: Added.
* fast/forms/date/date-reset-value.html: Added.

* fast/forms/resources/common-spinbutton-change-and-input-events.js:
(testSpinButtonChangeAndInputEvents):
Uses getElementByPseudoId() to obtain spin button position. The date
type and the time type have their spin button at different positions
because of a picker indicator triangle.
* fast/forms/number/number-spinbutton-change-and-input-events.html:
Need to import comon.js because common-spinbutton-change-and-input-events.js depends on it.
* fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html:
Ditto.

* fast/forms/resources/common-wheel-event.js:
(testWheelEvent): Fix a wrong message.
* fast/forms/time-multiple-fields/time-multiple-fields-wheel-event-expected.txt: Ditto.

* fast/forms/resources/multiple-fields-blur-and-focus-events.js:
Added. Move the code from time-multiple-fields-blur-and-focus-events.html.
* fast/forms/time-multiple-fields/time-multiple-fields-blur-and-focus-events.html:
Moved the code to multiple-fields-blur-and-focus-events.js.

* platform/chromium/TestExpectations:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@130884 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent cc02ecb6
2012-10-09 Kent Tamura <tkent@chromium.org>
Add behavior tests for input[type=date] with multiple fields
https://bugs.webkit.org/show_bug.cgi?id=98480
Reviewed by Kentaro Hara.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-aria-attributes-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-aria-attributes.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-value-changed-notification-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-ax-value-changed-notification.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-blur-and-focus-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-blur-and-focus-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-keyboard-events-expected.txt:
* fast/forms/date-multiple-fields/date-multiple-fields-keyboard-events.html:
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-mouse-events.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-preserve-value-after-history-back-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-preserve-value-after-history-back.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-reset-value-after-reloads-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-reset-value-after-reloads.html: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-spinbutton-change-and-input-events-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-spinbutton-change-and-input-events.html: Copied from LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html.
* fast/forms/date-multiple-fields/date-multiple-fields-wheel-event-expected.txt: Added.
* fast/forms/date-multiple-fields/date-multiple-fields-wheel-event.html: Copied from LayoutTests/fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html.
* fast/forms/date/date-reset-value-expected.html: Added.
* fast/forms/date/date-reset-value.html: Added.
* fast/forms/resources/common-spinbutton-change-and-input-events.js:
(testSpinButtonChangeAndInputEvents):
Uses getElementByPseudoId() to obtain spin button position. The date
type and the time type have their spin button at different positions
because of a picker indicator triangle.
* fast/forms/number/number-spinbutton-change-and-input-events.html:
Need to import comon.js because common-spinbutton-change-and-input-events.js depends on it.
* fast/forms/time-multiple-fields/time-multiple-fields-spinbutton-change-and-input-events.html:
Ditto.
* fast/forms/resources/common-wheel-event.js:
(testWheelEvent): Fix a wrong message.
* fast/forms/time-multiple-fields/time-multiple-fields-wheel-event-expected.txt: Ditto.
* fast/forms/resources/multiple-fields-blur-and-focus-events.js:
Added. Move the code from time-multiple-fields-blur-and-focus-events.html.
* fast/forms/time-multiple-fields/time-multiple-fields-blur-and-focus-events.html:
Moved the code to multiple-fields-blur-and-focus-events.js.
* platform/chromium/TestExpectations:
2012-10-10 Alexander Pavlov <apavlov@chromium.org>
Web Inspector: Semantically incorrect CSS rules result in broken source code data
......
This test checks aria-help attribute of fields in multiple fields date input UI.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Non-empty value
PASS focusedFieldValueDescription() is "AXHelp: Month, AXValueDescription: 10, 1, 12"
PASS focusedFieldValueDescription() is "AXHelp: Day, AXValueDescription: 09, 1, 31"
PASS focusedFieldValueDescription() is "AXHelp: Year, AXValueDescription: 2012, 1, 275760"
Empty value
PASS focusedFieldValueDescription() is "AXHelp: Year, AXValueDescription: blank, 1, 275760"
PASS focusedFieldValueDescription() is "AXHelp: Day, AXValueDescription: blank, 1, 31"
PASS focusedFieldValueDescription() is "AXHelp: Month, AXValueDescription: blank, 1, 12"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<input id="test" type="date" value="2012-10-09">
<script>
description('This test checks aria-help attribute of fields in multiple fields date input UI.');
function focusedFieldValueDescription()
{
var element = accessibilityController.focusedElement;
return element.helpText + ', ' + element.valueDescription + ', ' + element.minValue + ', ' + element.maxValue;
}
var testInput = document.getElementById('test');
if (!window.accessibilityController || !window.eventSender)
debug('Please run inside DRT or WTR.');
else {
debug('Non-empty value');
testInput.focus();
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Month, AXValueDescription: 10, 1, 12');
eventSender.keyDown('\t');
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Day, AXValueDescription: 09, 1, 31');
eventSender.keyDown('\t');
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Year, AXValueDescription: 2012, 1, 275760');
debug('Empty value');
eventSender.keyDown('\b');
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Year, AXValueDescription: blank, 1, 275760');
eventSender.keyDown('\t', ['shiftKey']);
eventSender.keyDown('\b');
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Day, AXValueDescription: blank, 1, 31');
eventSender.keyDown('\t', ['shiftKey']);
eventSender.keyDown('\b');
shouldBeEqualToString('focusedFieldValueDescription()', 'AXHelp: Month, AXValueDescription: blank, 1, 12');
debug('');
testInput.parentNode.removeChild(testInput);
}
</script>
<script src="../../../fast/js/resources/js-test-post.js"></script>
</body>
</html>
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
FocusedUIElementChanged AXHelp: Month=AXValueDescription: 10
FocusedUIElementChanged AXHelp: Day=AXValueDescription: 09
FocusedUIElementChanged AXHelp: Year=AXValueDescription: 2012
ValueChanged AXHelp: Day=AXValueDescription: 04
ValueChanged AXHelp: Year=AXValueDescription: 2013
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<input id="test" type="date" value="2012-10-09">
<script>
description('This test checks value changed accessibility notifications.');
var testInput = document.getElementById("test");
if (!window.accessibilityController || !window.eventSender)
debug("Please run inside DRT or WRT.");
else {
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'FocusedUIElementChanged' || notification == 'ValueChanged') {
debug(notification + ' ' + element.helpText + '=' + element.valueDescription);
}
});
testInput.focus();
eventSender.keyDown('\t');
eventSender.keyDown('4');
eventSender.keyDown('upArrow');
window.jsTestIsAsync = true;
window.setTimeout(function() {
debug('');
testInput.parentNode.removeChild(testInput);
finishJSTest();
}, 1);
}
</script>
<script src="../../../fast/js/resources/js-test-post.js"></script>
</body>
</html>
Check blur and focus events for multiple fields date input UI
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
focus() and blur()
PASS testInput.focus(); state() is "blur=0 focus=1"
PASS testInput.blur(); state() is "blur=1 focus=1"
focus and Tab key to blur
PASS keyDown(" "); state() is "blur=0 focus=1"
PASS keyDown(" "); state() is "blur=0 focus=1"
PASS keyDown(" "); state() is "blur=0 focus=1"
PASS keyDown(" "); state() is "blur=1 focus=1"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<body>
<script src="../../js/resources/js-test-pre.js"></script>
<script src="../resources/multiple-fields-blur-and-focus-events.js"></script>
<div id="container"></div>
<script>
startTestFor('date');
</script>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
......@@ -55,6 +55,11 @@ PASS input.value is "2012-12-02"
PASS input.value is "2012-01-28"
PASS input.value is "2012-01-02"
PASS input.value is "2012-03-02"
== Disabled/readonly ==
PASS input.value is "2012-10-08"
PASS input.value is "2012-11-08"
PASS input.value is "2012-11-08"
PASS input.value is "2012-12-08"
PASS successfullyParsed is true
TEST COMPLETE
......
......@@ -197,6 +197,23 @@ shouldBeEqualToString('input.value', '2012-01-02');
keyDown('rightArrow'); // -> 2012/02/[01]
keyDown('3'); // -> 2012/02/[03]
shouldBeEqualToString('input.value', '2012-03-02');
beginTest('Disabled/readonly', '2012-10-08');
input.disabled = true;
keyDown('upArrow'); // 10/08/2012
shouldBeEqualToString('input.value', '2012-10-08');
input.disabled = false;
input.focus();
keyDown('upArrow'); // [11]/08/2012
shouldBeEqualToString('input.value', '2012-11-08');
input.readOnly = true;
keyDown('upArrow'); // 11/08/2012
shouldBeEqualToString('input.value', '2012-11-08');
input.readOnly = false;
input.focus();
keyDown('upArrow'); // [12]/08/2012
shouldBeEqualToString('input.value', '2012-12-08');
</script>
<script src="../../js/resources/js-test-post.js"></script>
</body>
......
Multiple fields UI of date input type with mouse events
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Please run this with DRT or WTR.
Test following mouse actions:
Mouse click to focus each of sub-fields
Mouse click on the spin button to update each of sub-fields
==> Focus on the month field.
PASS input.value is "2345-08-19"
PASS input.value is "2345-09-19"
PASS input.value is "2345-08-19"
PASS window.getSelection().rangeCount is 0
==> Focus on the day field.
PASS input.value is "2345-08-20"
PASS input.value is "2345-08-21"
PASS input.value is "2345-08-20"
PASS window.getSelection().rangeCount is 0
==> Focus on the year field.
PASS input.value is "2346-08-20"
PASS input.value is "2347-08-20"
PASS input.value is "2346-08-20"
PASS window.getSelection().rangeCount is 0
==> Click on a disabled field.
PASS input.value is "2346-08-20"
==> Click on a read-only field.
PASS input.value is "2346-08-20"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../js/resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<p>
Please run this with DRT or WTR.
</p>
Test following mouse actions:
<ul>
<li>Mouse click to focus each of sub-fields</li>
<li>Mouse click on the spin button to update each of sub-fields</li>
</ul>
<input id="input" type="date" style="font-family:ahem; font-size:16px;">
<div id="console"></div>
<script>
description('Multiple fields UI of date input type with mouse events');
var input = document.getElementById('input');
function keyDown(key, modifiers)
{
if (!window.eventSender)
return;
eventSender.keyDown(key, modifiers);
}
function mouseClickOn(x, y)
{
if (!window.eventSender)
return;
eventSender.mouseMoveTo(x + input.offsetLeft, y + input.offsetTop);
eventSender.mouseDown();
eventSender.mouseUp();
}
input.value = '2345-07-19';
var center = input.offsetHeight / 2;
var spinButtonOffset = 26;
debug('==> Focus on the month field.');
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2345-08-19');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2345-09-19');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2345-08-19');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Focus on the day field.');
mouseClickOn(60, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2345-08-20');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2345-08-21');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2345-08-20');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Focus on the year field.');
mouseClickOn(input.offsetWidth - 64, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2347-08-20');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2346-08-20');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Click on a disabled field.');
input.disabled = true;
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20');
input.disabled = false;
debug('');
debug('==> Click on a read-only field.');
input.readOnly = true;
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20');
input.readOnly = false;
debug('');
</script>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>
Checks input value is preserved after backward and forward
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Went back to a page. Checking a form control which had a full value:
PASS "12012-10-09" is "12012-10-09"
Went back to a page. Checking a form control which had a partial value:
PASS "01/dd/1999" is "01/dd/1999"
Went forward to a page. Checking a form control which had a full value:
PASS "0001-11-17" is "0001-11-17"
Went forward to a page. Checking a form control which had a partial value:
PASS "mm/31/yyyy" is "mm/31/yyyy"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<div id="container">
<input type="date" id="test1"><br>
<input type="date" id="test2" min="1999-01-01" max="1999-12-31"><br>
<iframe id="iframe"></iframe>
</div>
<script>
description('Checks input value is preserved after backward and forward');
if (!window.eventSender)
debug('Please run within DRT/WTR');
window.jsTestIsAsync = true;
var iframe = document.getElementById('iframe');
var testInput1 = document.getElementById('test1');
var testInput2 = document.getElementById('test2');
var state = 'direct';
var pageName = location.search || '?page0';
var testCases = [];
function back(newState) {
parent.state = newState;
history.back();
}
function failed(message) {
testFailed(message + ' in ' + state);
finishJSTest();
}
function fieldsText(input) {
if (!window.internals)
return "";
var editElement = window.internals.oldestShadowRoot(input);
return editElement.textContent;
}
function finishTest() {
runTestCases();
document.body.removeChild(document.getElementById('container'));
finishJSTest();
}
function forward(newState) {
parent.state = newState;
history.forward();
}
function keyDown(key, modifiers) {
if (!window.eventSender)
return;
eventSender.keyDown(key, modifiers);
}
function runTestCases() {
for (var index = 0; index < testCases.length; ++index) {
var testCase = testCases[index];
debug(testCase['description'] + ':');
shouldBeEqualToString('"' + testCase['actual'] + '"', testCase['expected']);
}
debug('');
}
switch (pageName) {
case '?page0':
iframe.src = location + '?page1';
break;
case '?page1':
switch (parent.state) {
case 'direct': {
testInput1.value = '12012-10-09';
testInput2.focus();
keyDown('upArrow'); // -> [01]/dd/yyyy
keyDown('\t'); // -> 01/[dd]/yyyy
keyDown('\t'); // -> 01/dd/[yyyy]
keyDown('upArrow'); // -> 01/dd/[1999]
var nextUri = location.toString().replace('?page1', '?page2');
setTimeout(function () { window.location.href = nextUri; }, 0);
break;
}
case 'backTo1':
parent.testCases.push(
{
'description' : 'Went back to a page. Checking a form control which had a full value',
'actual' : testInput1.value,
'expected' : '12012-10-09' },
{
'description' : 'Went back to a page. Checking a form control which had a partial value',
'actual' : fieldsText(testInput2),
'expected' : '01/dd/1999'
});
forward('forwardTo2');
break;
case 'backTo1Second':
parent.finishTest();
break;
default:
failed('Unexpected state(' + parent.state + ')');
break;
}
break;
case '?page2':
switch (parent.state) {
case 'direct':
testInput1.value = '0001-11-17';
testInput2.focus();
keyDown('\t'); // -> mm/[dd]/yyyy
keyDown('downArrow'); // -> mm/[31]/yyyy
back('backTo1');
break;
case 'forwardTo2':
parent.testCases.push(
{
'description' : 'Went forward to a page. Checking a form control which had a full value',
'actual' : testInput1.value,
'expected' : '0001-11-17'
},
{
'description' : 'Went forward to a page. Checking a form control which had a partial value',
'actual' : fieldsText(testInput2),
'expected' : 'mm/31/yyyy'
});
back('backTo1Second');
break;
default:
failed('Unexpected state(' + parent.state + ')');
break;
}
break;
default:
failed('Unexpected page(' + pageName + ')');
break;
}
</script>
<script src="../../../fast/js/resources/js-test-post.js"></script>
</body>
</html>
Checks reloading page resets input values
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Initial values:
PASS testInput1.value is ""
PASS testInput2.value is "1234-05-06"
Reloaded values:
PASS testInput1.value is ""
PASS testInput2.value is "1234-05-06"
PASS successfullyParsed is true
TEST COMPLETE