| <!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="date" 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 date input type with mouse events'); |
| var input = document.getElementById('input'); |
| |
| input.value = '2345-07-19'; |
| 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-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 - 115, 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(''); |
| debug('==> Click on clear button.'); |
| input.readOnly = true; |
| mouseClickOn(input.offsetWidth - clearButtonOffset, center); |
| shouldBeEqualToString('input.value', '2346-08-20'); |
| input.disabled = true; |
| input.readOnly = false; |
| mouseClickOn(input.offsetWidth - clearButtonOffset, center); |
| shouldBeEqualToString('input.value', '2346-08-20'); |
| input.disabled = false; |
| mouseClickOn(input.offsetWidth - clearButtonOffset, center); |
| shouldBeEqualToString('input.value', ''); |
| |
| debug(''); |
| }; |
| </script> |
| </body> |
| </html> |
