<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/ahem.js"></script>
<script src="../../../resources/js-test.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="datetime-local" style="font-family:ahem; font-size:16px;">
<div id="console"></div>
<script>
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();
}
onload = function() {
description('Multiple fields UI of datetime-local input type with mouse events');
var input = document.getElementById('input');
input.value = '2345-07-19T10:00';
var center = input.offsetHeight / 2;
var spinButtonOffset = 26;
var clearButtonOffset = 41;
debug('==> Focus on the month field.');
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2345-08-19T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2345-09-19T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2345-08-19T10:00');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Focus on the day field.');
mouseClickOn(60, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2345-08-20T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2345-08-21T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2345-08-20T10:00');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Focus on the year field.');
mouseClickOn(108, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2347-08-20T10:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2346-08-20T10:00');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
// With ICU 52 on Linux/Android, a comma is used to delimete date and time and
// the hour and time field positions are shifted.
var commaOffset = window.internals.oldestShadowRoot(input).textContent.indexOf(', ') == -1 ? 0 : 16;
debug('');
debug('==> Focus on the hour field.');
mouseClickOn(190 + commaOffset, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20T11:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2346-08-20T00:00');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2346-08-20T11:00');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
debug('');
debug('==> Focus on the minute field.');
mouseClickOn(240 + commaOffset, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20T11:01');
mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
shouldBeEqualToString('input.value', '2346-08-20T11:02');
mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
shouldBeEqualToString('input.value', '2346-08-20T11:01');
shouldBeZero('window.getSelection().rangeCount'); // No text selection.
// Set the value explicitly to prevent a earlier failure from leading to a
// failure in the subsequent tests.
input.value= '2346-08-20T11:01';
debug('');
debug('==> Click on a disabled field.');
input.disabled = true;
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20T11:01');
input.disabled = false;
debug('');
debug('==> Click on a read-only field.');
input.readOnly = true;
mouseClickOn(12, center);
keyDown('upArrow');
shouldBeEqualToString('input.value', '2346-08-20T11:01');
input.readOnly = false;
debug('');
debug('==> Click on clear button.');
input.readOnly = true;
mouseClickOn(input.offsetWidth - clearButtonOffset, center);
shouldBeEqualToString('input.value', '2346-08-20T11:01');
input.disabled = true;
input.readOnly = false;
mouseClickOn(input.offsetWidth - clearButtonOffset, center);
shouldBeEqualToString('input.value', '2346-08-20T11:01');
input.disabled = false;
mouseClickOn(input.offsetWidth - clearButtonOffset, center);
shouldBeEqualToString('input.value', '');
debug('');
};
</script>
</body>
</html>