third_party/WebKit/LayoutTests/fast/forms/datetimelocal-multiple-fields/datetimelocal-multiple-fields-mouse-events.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/ahem.js"></script>
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <p id="description"></p>
   9 <p>
  10 Please run this with DRT or WTR.
  11 </p>
  12 Test following mouse actions:
  13 <ul>
  14     <li>Mouse click to focus each of sub-fields</li>
  15     <li>Mouse click on the spin button to update each of sub-fields</li>
  16 </ul>
  17 <input id="input" type="datetime-local" style="font-family:ahem; font-size:16px;">
  18 <div id="console"></div>
  19 <script>
  20 function keyDown(key, modifiers)
  21 {
  22     if (!window.eventSender)
  23         return;
  24     eventSender.keyDown(key, modifiers);
  25 }
  26
  27 function mouseClickOn(x, y)
  28 {
  29     if (!window.eventSender)
  30         return;
  31     eventSender.mouseMoveTo(x + input.offsetLeft, y + input.offsetTop);
  32     eventSender.mouseDown();
  33     eventSender.mouseUp();
  34 }
  35
  36 onload = function() {
  37     description('Multiple fields UI of datetime-local input type with mouse events');
  38     var input = document.getElementById('input');
  39
  40     input.value = '2345-07-19T10:00';
  41     var center = input.offsetHeight / 2;
  42     var spinButtonOffset = 26;
  43     var clearButtonOffset = 41;
  44
  45     debug('==> Focus on the month field.');
  46     mouseClickOn(12, center);
  47     keyDown('upArrow');
  48     shouldBeEqualToString('input.value', '2345-08-19T10:00');
  49     mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
  50     shouldBeEqualToString('input.value', '2345-09-19T10:00');
  51     mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
  52     shouldBeEqualToString('input.value', '2345-08-19T10:00');
  53     shouldBeZero('window.getSelection().rangeCount'); // No text selection.
  54
  55     debug('');
  56     debug('==> Focus on the day field.');
  57     mouseClickOn(60, center);
  58     keyDown('upArrow');
  59     shouldBeEqualToString('input.value', '2345-08-20T10:00');
  60     mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
  61     shouldBeEqualToString('input.value', '2345-08-21T10:00');
  62     mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
  63     shouldBeEqualToString('input.value', '2345-08-20T10:00');
  64     shouldBeZero('window.getSelection().rangeCount'); // No text selection.
  65
  66     debug('');
  67     debug('==> Focus on the year field.');
  68     mouseClickOn(108, center);
  69     keyDown('upArrow');
  70     shouldBeEqualToString('input.value', '2346-08-20T10:00');
  71     mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
  72     shouldBeEqualToString('input.value', '2347-08-20T10:00');
  73     mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
  74     shouldBeEqualToString('input.value', '2346-08-20T10:00');
  75     shouldBeZero('window.getSelection().rangeCount'); // No text selection.
  76
  77     // With ICU 52 on Linux/Android, a comma is used to delimete date and time and
  78     // the hour and time field positions are shifted.
  79     var commaOffset = window.internals.oldestShadowRoot(input).textContent.indexOf(', ') == -1 ? 0 : 16;
  80
  81     debug('');
  82     debug('==> Focus on the hour field.');
  83     mouseClickOn(190 + commaOffset, center);
  84     keyDown('upArrow');
  85     shouldBeEqualToString('input.value', '2346-08-20T11:00');
  86     mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
  87     shouldBeEqualToString('input.value', '2346-08-20T00:00');
  88     mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
  89     shouldBeEqualToString('input.value', '2346-08-20T11:00');
  90     shouldBeZero('window.getSelection().rangeCount'); // No text selection.
  91
  92     debug('');
  93     debug('==> Focus on the minute field.');
  94     mouseClickOn(240 + commaOffset, center);
  95     keyDown('upArrow');
  96     shouldBeEqualToString('input.value', '2346-08-20T11:01');
  97     mouseClickOn(input.offsetWidth - spinButtonOffset, center - 1);
  98     shouldBeEqualToString('input.value', '2346-08-20T11:02');
  99     mouseClickOn(input.offsetWidth - spinButtonOffset, center + 1);
 100     shouldBeEqualToString('input.value', '2346-08-20T11:01');
 101     shouldBeZero('window.getSelection().rangeCount'); // No text selection.
 102
 103     // Set the value explicitly to prevent a earlier failure from leading to a
 104     // failure in the subsequent tests.
 105     input.value= '2346-08-20T11:01';
 106     debug('');
 107     debug('==> Click on a disabled field.');
 108     input.disabled = true;
 109     mouseClickOn(12, center);
 110     keyDown('upArrow');
 111     shouldBeEqualToString('input.value', '2346-08-20T11:01');
 112     input.disabled = false;
 113
 114     debug('');
 115     debug('==> Click on a read-only field.');
 116     input.readOnly = true;
 117     mouseClickOn(12, center);
 118     keyDown('upArrow');
 119     shouldBeEqualToString('input.value', '2346-08-20T11:01');
 120     input.readOnly = false;
 121
 122     debug('');
 123     debug('==> Click on clear button.');
 124     input.readOnly = true;
 125     mouseClickOn(input.offsetWidth - clearButtonOffset, center);
 126     shouldBeEqualToString('input.value', '2346-08-20T11:01');
 127     input.disabled = true;
 128     input.readOnly = false;
 129     mouseClickOn(input.offsetWidth - clearButtonOffset, center);
 130     shouldBeEqualToString('input.value', '2346-08-20T11:01');
 131     input.disabled = false;
 132     mouseClickOn(input.offsetWidth - clearButtonOffset, center);
 133     shouldBeEqualToString('input.value', '');
 134
 135     debug('');
 136 };
 137 </script>
 138 </body>
 139 </html>