third_party/WebKit/LayoutTests/fast/forms/calendar-picker/calendar-picker-key-operations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../../forms/resources/picker-common.js"></script>
   6 <script src="resources/calendar-picker-common.js"></script>
   7 </head>
   8 <body>
   9 <p id="description"></p>
  10 <div id="console"></div>
  11 <input type=date id=date value="2000-01-02">
  12 <script>
  13 description("Tests if calendar picker key bindings work as expected.");
  14
  15 debug('Check that page popup doesn\'t exist at first.');
  16 shouldBeNull('document.getElementById("mock-page-popup")');
  17
  18 openPicker(document.getElementById('date'), test1);
  19
  20 function test1() {
  21     debug('Check that page popup exists.');
  22     shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]');
  23
  24     shouldBeFalse('isCalendarTableScrollingWithAnimation()');
  25     shouldBeEqualToString('currentMonth()', '2000-01');
  26     shouldBeEqualToString('selectedValue()', '2000-01-02');
  27     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
  28     shouldBeEqualToString('highlightedValue()', '2000-01-02');
  29     shouldBeEqualToString('highlightedDayCells()', '2000-01-02');
  30
  31     debug('Check that arrow keys work properly even when going between weeks and months.');
  32
  33     debug('press up');
  34     eventSender.keyDown('upArrow');
  35     shouldBeEqualToString('currentMonth()', '2000-01');
  36     shouldBeEqualToString('selectedValue()', '2000-01-02');
  37     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
  38     shouldBeEqualToString('highlightedValue()', '1999-12-26');
  39     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
  40
  41     debug('press up');
  42     eventSender.keyDown('upArrow');
  43     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
  44     shouldBeEqualToString('currentMonth()', '1999-12');
  45     shouldBeEqualToString('selectedValue()', '2000-01-02');
  46     shouldBeEqualToString('selectedDayCells()', '');
  47     shouldBeEqualToString('highlightedValue()', '1999-12-19');
  48     shouldBeEqualToString('highlightedDayCells()', '1999-12-19');
  49
  50     debug('press down');
  51     eventSender.keyDown('downArrow');
  52     shouldBeEqualToString('currentMonth()', '1999-12');
  53     shouldBeEqualToString('selectedValue()', '2000-01-02');
  54     shouldBeEqualToString('selectedDayCells()', '');
  55     shouldBeEqualToString('highlightedValue()', '1999-12-26');
  56     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
  57
  58     debug('press down');
  59     eventSender.keyDown('downArrow');
  60     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
  61     shouldBeEqualToString('currentMonth()', '2000-01');
  62     shouldBeEqualToString('selectedValue()', '2000-01-02');
  63     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
  64     shouldBeEqualToString('highlightedValue()', '2000-01-02');
  65     shouldBeEqualToString('highlightedDayCells()', '2000-01-02');
  66
  67     debug('press up');
  68     eventSender.keyDown('upArrow');
  69     shouldBeEqualToString('currentMonth()', '2000-01');
  70     shouldBeEqualToString('selectedValue()', '2000-01-02');
  71     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
  72     shouldBeEqualToString('highlightedValue()', '1999-12-26');
  73     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
  74
  75     // Move from top left of January 2000 to bottom right of December 1999.
  76     debug('press left');
  77     eventSender.keyDown('leftArrow');
  78     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
  79     shouldBeEqualToString('currentMonth()', '1999-12');
  80     shouldBeEqualToString('selectedValue()', '2000-01-02');
  81     shouldBeEqualToString('selectedDayCells()', '');
  82     shouldBeEqualToString('highlightedValue()', '1999-12-25');
  83     shouldBeEqualToString('highlightedDayCells()', '1999-12-25');
  84
  85     debug('press right');
  86     eventSender.keyDown('rightArrow');
  87     shouldBeEqualToString('currentMonth()', '1999-12');
  88     shouldBeEqualToString('selectedValue()', '2000-01-02');
  89     shouldBeEqualToString('selectedDayCells()', '');
  90     shouldBeEqualToString('highlightedValue()', '1999-12-26');
  91     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
  92
  93     debug("press pageDown");
  94     eventSender.keyDown('pageDown');
  95     shouldBeEqualToString('currentMonth()', '2000-01');
  96     shouldBeEqualToString('selectedValue()', '2000-01-02');
  97     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
  98     shouldBeEqualToString('highlightedValue()', '1999-12-26');
  99     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 100
 101     debug("press pageUp");
 102     eventSender.keyDown('pageUp');
 103     shouldBeEqualToString('currentMonth()', '1999-12');
 104     shouldBeEqualToString('selectedValue()', '2000-01-02');
 105     shouldBeEqualToString('selectedDayCells()', '');
 106     shouldBeEqualToString('highlightedValue()', '1999-12-26');
 107     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 108
 109     debug("press m");
 110     eventSender.keyDown('m');
 111     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 112     shouldBeEqualToString('currentMonth()', '2000-01');
 113     shouldBeEqualToString('selectedValue()', '2000-01-02');
 114     shouldBeEqualToString('selectedDayCells()', '2000-01-02');
 115     shouldBeEqualToString('highlightedValue()', '2000-01-23');
 116     shouldBeEqualToString('highlightedDayCells()', '2000-01-23');
 117
 118     debug("press shift + m");
 119     eventSender.keyDown('M');
 120     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 121     shouldBeEqualToString('currentMonth()', '1999-12');
 122     shouldBeEqualToString('selectedValue()', '2000-01-02');
 123     shouldBeEqualToString('selectedDayCells()', '');
 124     shouldBeEqualToString('highlightedValue()', '1999-12-26');
 125     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 126
 127     debug("press y");
 128     eventSender.keyDown('y');
 129     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 130     shouldBeEqualToString('currentMonth()', '2000-12');
 131     shouldBeEqualToString('selectedValue()', '2000-01-02');
 132     shouldBeEqualToString('selectedDayCells()', '');
 133     shouldBeEqualToString('highlightedValue()', '2000-12-24');
 134     shouldBeEqualToString('highlightedDayCells()', '2000-12-24');
 135
 136     debug("press shift + y");
 137     eventSender.keyDown('Y');
 138     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 139     shouldBeEqualToString('currentMonth()', '1999-12');
 140     shouldBeEqualToString('selectedValue()', '2000-01-02');
 141     shouldBeEqualToString('selectedDayCells()', '');
 142     shouldBeEqualToString('highlightedValue()', '1999-12-26');
 143     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 144
 145     debug("press d");
 146     eventSender.keyDown('d');
 147     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 148     shouldBeEqualToString('currentMonth()', '2009-12');
 149     shouldBeEqualToString('selectedValue()', '2000-01-02');
 150     shouldBeEqualToString('selectedDayCells()', '');
 151     shouldBeEqualToString('highlightedValue()', '2009-12-27');
 152     shouldBeEqualToString('highlightedDayCells()', '2009-12-27');
 153
 154     debug("press shift + d");
 155     eventSender.keyDown('D');
 156     shouldBeTrue('isCalendarTableScrollingWithAnimation()');
 157     shouldBeEqualToString('currentMonth()', '1999-12');
 158     shouldBeEqualToString('selectedValue()', '2000-01-02');
 159     shouldBeEqualToString('selectedDayCells()', '');
 160     shouldBeEqualToString('highlightedValue()', '1999-12-26');
 161     shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 162
 163     debug("press enter");
 164     removeCommitDelay();
 165     eventSender.keyDown('\n');
 166     shouldBeEqualToString('document.getElementById("date").value', '1999-12-26');
 167     waitUntilClosing(function() {
 168         openPicker(document.getElementById("date"), test2);
 169     });
 170 }
 171
 172 function test2() {
 173     debug('Check if tabbing works.');
 174     shouldBeEqualToString('focusedElement()', '.list-view calendar-table-view');
 175     eventSender.keyDown('\t', ['shiftKey']);
 176     shouldBeEqualToString('focusedElement()', '.calendar-navigation-button');
 177     eventSender.keyDown('\t', ['shiftKey']);
 178     shouldBeEqualToString('focusedElement()', '.calendar-navigation-button today-button');
 179     eventSender.keyDown('\t', ['shiftKey']);
 180     shouldBeEqualToString('focusedElement()', '.calendar-navigation-button');
 181     eventSender.keyDown('\t', ['shiftKey']);
 182     shouldBeEqualToString('focusedElement()', '.month-popup-button');
 183
 184     debug('open the month popup');
 185     eventSender.keyDown('\n');
 186     shouldBeTrue('popupWindow.global.picker.monthPopupView.isVisible');
 187     shouldBeEqualToString('highlightedMonthButton()', '1999-12');
 188
 189     debug('TAB shouldn\'t change focus');
 190     shouldBeEqualToString('focusedElement()', '.list-view year-list-view');
 191     eventSender.keyDown('\t');
 192     // With the MockPagePopup, an elemenet not in the popup is focused.
 193     shouldBeTrue('focusedElement().indexOf("month-button") < 0');
 194     shouldBeTrue('focusedElement().indexOf("list-cell") < 0');
 195     eventSender.keyDown('\t', ['shiftKey']);
 196     shouldBeEqualToString('focusedElement()', '.list-view year-list-view');
 197
 198     debug("press down");
 199     eventSender.keyDown('downArrow');
 200     shouldBeEqualToString('highlightedMonthButton()', '2000-04');
 201
 202     debug("press right");
 203     eventSender.keyDown('rightArrow');
 204     shouldBeEqualToString('highlightedMonthButton()', '2000-05');
 205
 206     debug("press right");
 207     eventSender.keyDown('rightArrow');
 208     shouldBeEqualToString('highlightedMonthButton()', '2000-06');
 209
 210     debug("press right");
 211     eventSender.keyDown('rightArrow');
 212     shouldBeEqualToString('highlightedMonthButton()', '2000-07');
 213
 214     debug("press right");
 215     eventSender.keyDown('rightArrow');
 216     shouldBeEqualToString('highlightedMonthButton()', '2000-08');
 217
 218     debug("press right");
 219     eventSender.keyDown('rightArrow');
 220     shouldBeEqualToString('highlightedMonthButton()', '2000-09');
 221
 222     debug("press left");
 223     eventSender.keyDown('leftArrow');
 224     shouldBeEqualToString('highlightedMonthButton()', '2000-08');
 225
 226     debug("press up");
 227     eventSender.keyDown('upArrow');
 228     shouldBeEqualToString('highlightedMonthButton()', '2000-04');
 229
 230     debug("press pageDown");
 231     eventSender.keyDown('pageDown');
 232     shouldBeEqualToString('highlightedMonthButton()', '2001-04');
 233
 234     debug("press pageUp");
 235     eventSender.keyDown('pageUp');
 236     shouldBeEqualToString('highlightedMonthButton()', '2000-04');
 237
 238     debug('select month in the month popup');
 239     eventSender.keyDown('\n');
 240     shouldBeFalse('popupWindow.global.picker.monthPopupView.isVisible');
 241     shouldBeEqualToString('currentMonth()', '2000-04');
 242     shouldBeEqualToString('selectedValue()', '1999-12-26');
 243     shouldBeEqualToString('selectedDayCells()', '');
 244     shouldBeEqualToString('highlightedValue()', '1999-12-26');
 245     shouldBeEqualToString('highlightedDayCells()', '');
 246
 247     debug("focus calendar table");
 248     popupWindow.global.picker.calendarTableView.element.focus();
 249
 250     setNoCloseOnCommit();
 251     // Test twice in case midnight.
 252     debug("press t");
 253     shouldBeTrue('testToday() || testToday()');
 254
 255     debug("press esc");
 256     eventSender.keyDown('escape');
 257     waitUntilClosing(test2AfterClosing);
 258 }
 259
 260 function test2AfterClosing() {
 261     shouldBeNull('document.getElementById("mock-page-popup")');
 262
 263     finishJSTest();
 264 }
 265
 266 function testToday() {
 267     eventSender.keyDown('t');
 268     shouldBeTrueQuiet('isCalendarTableScrollingWithAnimation()');
 269     var now = new Date();
 270     var expectedDate = serializeDate(now.getFullYear(), now.getMonth(), now.getDate());
 271     var expectedMonth = (new popupWindow.Month(now.getFullYear(), now.getMonth())).toString();
 272     return selectedValue() === expectedDate &&
 273            highlightedValue() === expectedDate &&
 274            currentMonth() === expectedMonth &&
 275            document.getElementById("date").value === expectedDate;
 276 }
 277
 278 function serializeDate(year, month, day) {
 279     var yearString = String(year);
 280     if (yearString.length < 4)
 281         yearString = ("000" + yearString).substr(-4, 4);
 282     return yearString + "-" + ("0" + (month + 1)).substr(-2, 2) + "-" + ("0" + day).substr(-2, 2);
 283 }
 284
 285 function focusedElement() {
 286     var element = popupWindow.document.activeElement;
 287     if (!element)
 288         return null;
 289     var identifier = "." + element.className;
 290     if (element.value)
 291         identifier += "[value=" + element.value + "]";
 292     if (identifier == ".")
 293         return elementIdentifier(element);
 294     return identifier;
 295 }
 296
 297 function elementIdentifier(element) {
 298     var identifier = element.parentElement ? (elementIdentifier(element.parentElement) + " ") : "";
 299     identifier += element.tagName;
 300     if (element.className)
 301         identifier += "." + element.className.replace(/ +/g, ".");
 302     if (element.value)
 303         identifier += "[value=" + element.value + "]";
 304     return identifier;
 305 }
 306
 307 </script>
 308 </body>
 309 </html>