Update calendar picker UI
authorkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Mar 2013 07:37:00 +0000 (07:37 +0000)
committerkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Mar 2013 07:37:00 +0000 (07:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=109439

Reviewed by Kent Tamura.

.:

* ManualTests/forms/calendar-picker.html: New test file with more options.
* ManualTests/forms/date-suggestion-picker.html: Copied from ManualTests/forms/calendar-picker.html. Old one kept for dat/time suggestion picker testing.

Source/WebCore:

This patch changes the calendar picker UI.

Added tests to existing calendar picker tests.
Test: platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html

* Resources/pagepopups/calendarPicker.css:
(body):
(.rtl):
(.scroll-view):
(.scroll-view-content):
(.list-cell):
(.list-cell.hidden):
(.day-cell):
(.week-number-cell):
(.day-cell.today):
(.day-cell.highlighted):
(.day-cell.highlighted.disabled):
(.day-cell.selected):
(.day-cell.disabled):
(.day-cell.current-month):
(.calendar-table-view):
(.preparing .calendar-table-view:focus):
(.week-day-label):
(.week-number-label):
(.calendar-table-header-view):
(.calendar-picker):
(.calendar-header-view):
(.calendar-title):
(.rtl .calendar-title):
(.month-popup-button:disabled):
(.month-popup-button):
(.month-popup-button .disclosure-triangle):
(.month-popup-button .disclosure-triangle svg):
(.today-button::after):
(.calendar-navigation-button):
(.year-list-view):
(.year-list-cell):
(.year-list-cell .label):
(.year-list-cell .month-chooser):
(.month-buttons-row):
(.month-button):
(.month-button.highlighted):
(.scrubby-scroll-bar):
(.scrubby-scroll-thumb):
(.month-popup-view):
(.year-list-view .scrubby-scroll-bar):
(.rtl .year-list-view .scrubby-scroll-bar):
* Resources/pagepopups/calendarPicker.js:
(setGlobalParams): Sets the global params.
(initialize):
(openCalendarPicker):
(CalendarHeaderView.prototype.onNavigationButtonClick): Fix typo.
(CalendarPicker):
(CalendarPicker.prototype.onWindowResize): We want to have the "preparing" class applied
to cancel css transitions while setting up the calendar picker so we can avoid flaky pixel tests.
(CalendarPicker.prototype.onYearListViewDidHide): The user clicked on a month so hide the month popup.
(CalendarPicker.prototype.onYearListViewDidSelectMonth): Change the current month in response to the month popup.
(CalendarPicker.prototype.attachTo): We want the calendar table focused when the calendar picker first opens.
(CalendarPicker.prototype.cleanup): Clean up any event listeners or elements attached to nodes outside of this.element.
(CalendarPicker.prototype.onMonthPopupButtonClick): Open the month popup in response to the month popup button being clicked.
(CalendarPicker.prototype._setConfig): Configures the calendar picker.
(CalendarPicker.prototype.currentMonth): The currently shown month.
(CalendarPicker.prototype.setCurrentMonth): Scrolls the calendar table to the given month. Use the navigation behavior param to specify if you want a transition animation.
(CalendarPicker.prototype.adjustHeight): Adjusts the height so its just tall enough to fit the current month. If the month picker is open, fit that.
(CalendarPicker.prototype.selection): Currently selected date range.
(CalendarPicker.prototype.highlight): Currently highlighted date range.
(CalendarPicker.prototype.firstVisibleDay): Returns the first visible day ignoring scroll animation (i.e. this is the first visible day when the scroll animation is done).
(CalendarPicker.prototype.lastVisibleDay): Returns the last visible day ignoring scroll animation.
(CalendarPicker.prototype.selectRangeContainingDay): Sets the selection to the date range containing the given day.
(CalendarPicker.prototype.highlightRangeContainingDay): Sets the highlight to the date range containing the given day.
(CalendarPicker.prototype.setSelection): Sets the selection to the given date range.
(CalendarPicker.prototype._setHighlight): Sets the highlight to the given date range.
(CalendarPicker.prototype._stepMismatch): Just moving.
(CalendarPicker.prototype._outOfRange): Ditto.
(CalendarPicker.prototype.isValid): Returns true if the given date range is a valid selection.
(CalendarPicker.prototype.isValidDay): Returns true if the day is part of a valid selection.
(CalendarPicker.prototype._moveHighlight): Moves the highlight to the given date range if possible. Returns true if it succeeds.
(CalendarPicker.prototype.onCalendarTableKeyDown): Handles the arrow keys, etc.
(CalendarPicker.prototype.width):
(CalendarPicker.prototype.height):
(CalendarPicker.prototype.setHeight):
(CalendarPicker.prototype.onBodyKeyDown): Handles esc/m/y/d.
* Resources/pagepopups/chromium/calendarPickerChromium.css:
(.calendar-table-view:focus):
(.preparing .calendar-table-view:focus):

Source/WebKit/chromium:

* src/DateTimeChooserImpl.cpp:
(WebKit::DateTimeChooserImpl::writeDocument): Adding shortMonthLabels property.

LayoutTests:

* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png:
* platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png:
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt: Removed.
* platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt: Removed.
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
* platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
* platform/chromium/TestExpectations:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year.html:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step.html:
* platform/chromium/fast/forms/calendar-picker/date-picker-events-expected.txt:
* platform/chromium/fast/forms/calendar-picker/date-picker-events.html:
* platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events-expected.txt:
* platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations.html:
* platform/chromium/fast/forms/calendar-picker/month-picker-with-step-expected.txt:
* platform/chromium/fast/forms/calendar-picker/month-picker-with-step.html:
* platform/chromium/fast/forms/calendar-picker/resources/calendar-picker-common.js:
(currentMonth):
(highlightedValue):
(selectedValue):
(skipAnimation):
(hoverOverDayCellAt):
(clickDayCellAt):
* platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html:
* platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt:
* platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations.html:
* platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html:
* platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations.html:
* platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
* platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@145186 268f45cc-cd09-0410-ab3c-d52691b4dbfc

64 files changed:
ChangeLog
LayoutTests/ChangeLog
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png [new file with mode: 0644]
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt [deleted file]
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt [deleted file]
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt [new file with mode: 0644]
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html [new file with mode: 0644]
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/date-picker-events-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/date-picker-events.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-with-step-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/month-picker-with-step.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/resources/calendar-picker-common.js
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations.html
LayoutTests/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt
LayoutTests/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations.html
ManualTests/forms/calendar-picker.html
ManualTests/forms/date-suggestion-picker.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Resources/pagepopups/calendarPicker.css
Source/WebCore/Resources/pagepopups/calendarPicker.js
Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/src/DateTimeChooserImpl.cpp

index 073fa95..f890fc8 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,13 @@
+2013-03-07  Keishi Hattori  <keishi@webkit.org>
+
+        Update calendar picker UI
+        https://bugs.webkit.org/show_bug.cgi?id=109439
+
+        Reviewed by Kent Tamura.
+
+        * ManualTests/forms/calendar-picker.html: New test file with more options.
+        * ManualTests/forms/date-suggestion-picker.html: Copied from ManualTests/forms/calendar-picker.html. Old one kept for dat/time suggestion picker testing.
+
 2013-03-07  Christophe Dumez  <ch.dumez@sisa.samsung.com>
 
         [EFL] Bump libsoup dependency to 2.40.3 to fix regressions
index 8f7bb23..3b3c498 100644 (file)
@@ -1,3 +1,71 @@
+2013-03-07  Keishi Hattori  <keishi@webkit.org>
+
+        Update calendar picker UI
+        https://bugs.webkit.org/show_bug.cgi?id=109439
+
+        Reviewed by Kent Tamura.
+
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png:
+        * platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png:
+        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt: Removed.
+        * platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt: Removed.
+        * platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium-win/platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium/TestExpectations:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime-with-step.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetime.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-datetimelocal.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-key-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-pre-100-year.html:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/calendar-picker-with-step.html:
+        * platform/chromium/fast/forms/calendar-picker/date-picker-events-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/date-picker-events.html:
+        * platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/datetimelocal-picker-events.html:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-key-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-mouse-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-with-step-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/month-picker-with-step.html:
+        * platform/chromium/fast/forms/calendar-picker/resources/calendar-picker-common.js:
+        (currentMonth):
+        (highlightedValue):
+        (selectedValue):
+        (skipAnimation):
+        (hoverOverDayCellAt):
+        (clickDayCellAt):
+        * platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/week-picker-key-operations.html:
+        * platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt:
+        * platform/chromium/fast/forms/calendar-picker/week-picker-mouse-operations.html:
+        * platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html:
+        * platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/suggestion-picker/month-suggestion-picker-key-operations.html:
+        * platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations-expected.txt:
+        * platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-key-operations.html:
+
 2013-03-07  Hayato Ito  <hayato@chromium.org>
 
         Unreviewed gardening.
index e8c8579..0d765be 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png differ
index 5be0ea9..9d5b6d0 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-expected.png differ
diff --git a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png
new file mode 100644 (file)
index 0000000..1ed5bc9
Binary files /dev/null and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.png differ
index 45725bd..3d34291 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png differ
index 14d71ed..51f1a87 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png differ
index 8e47be1..9902c4c 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png differ
index 6d50c75..6495769 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png differ
index 16016bd..b5e82b5 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-expected.png differ
index 512b118..51aa152 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step-expected.png differ
index a2284cd..0d3ab82 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-expected.png differ
index 19eeff1..5098338 100644 (file)
Binary files a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step-expected.png differ
diff --git a/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt b/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/month-picker-key-operations-expected.txt
deleted file mode 100644 (file)
index 341411e..0000000
+++ /dev/null
@@ -1,56 +0,0 @@
-Tests if month picker key bindings work as expected.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-Check that page popup doesn't exist at first.
-PASS document.getElementById("mock-page-popup") is null
-Check that page popup exists.
-PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]"
-PASS selectedMonth() is "2000-01"
-PASS currentMonth() is "2000-01"
-Check that arrow keys work properly.
-PASS selectedMonth() is "1999-12"
-PASS currentMonth() is "1999-12"
-PASS selectedMonth() is "2000-01"
-PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
-PASS currentMonth() is "2000-02"
-PASS selectedMonth() is "2000-01"
-PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
-PASS currentMonth() is "2000-02"
-press m
-PASS selectedMonth() is "2000-03"
-PASS currentMonth() is "2000-03"
-press shift + m
-PASS selectedMonth() is "2000-02"
-PASS currentMonth() is "2000-02"
-press y
-PASS selectedMonth() is "2001-02"
-PASS currentMonth() is "2001-02"
-press shift + y
-PASS selectedMonth() is "2000-02"
-PASS currentMonth() is "2000-02"
-press d
-PASS selectedMonth() is "2010-02"
-PASS currentMonth() is "2010-02"
-press shift + d
-PASS selectedMonth() is "2000-02"
-PASS currentMonth() is "2000-02"
-PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("month").value is "2000-02"
-PASS testToday() || testToday() is true
-Check if tabbing works.
-PASS focusedElement() is ".days-area-container"
-PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("month").value is "2000-02"
-PASS F4 opened picker.
-PASS successfullyParsed is true
-
-TEST COMPLETE
diff --git a/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt b/LayoutTests/platform/chromium-win/platform/chromium/fast/forms/calendar-picker/week-picker-key-operations-expected.txt
deleted file mode 100644 (file)
index a08b074..0000000
+++ /dev/null
@@ -1,60 +0,0 @@
-Tests if month picker key bindings work as expected.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-Check that page popup doesn't exist at first.
-PASS document.getElementById("mock-page-popup") is null
-Check that page popup exists.
-PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]"
-PASS selectedWeek() is "2000-W01"
-PASS currentMonth() is "2000-01"
-Check that arrow keys work properly.
-PASS selectedWeek() is "1999-W52"
-PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "1999-W51"
-PASS currentMonth() is "1999-12"
-PASS selectedWeek() is "1999-W52"
-PASS currentMonth() is "1999-12"
-PASS selectedWeek() is "2000-W01"
-PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W02"
-PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W01"
-PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W02"
-PASS currentMonth() is "2000-01"
-press m
-PASS selectedWeek() is "2000-W07"
-PASS currentMonth() is "2000-02"
-press shift + m
-PASS selectedWeek() is "2000-W02"
-PASS currentMonth() is "2000-01"
-press y
-PASS selectedWeek() is "2001-W03"
-PASS currentMonth() is "2001-01"
-press shift + y
-PASS selectedWeek() is "2000-W02"
-PASS currentMonth() is "2000-01"
-press d
-PASS selectedWeek() is "2010-W02"
-PASS currentMonth() is "2010-01"
-press shift + d
-PASS selectedWeek() is "2000-W02"
-PASS currentMonth() is "2000-01"
-PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("week").value is "2000-W02"
-PASS testToday() || testToday() is true
-Check if tabbing works.
-PASS focusedElement() is ".days-area-container"
-PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("week").value is "2000-W02"
-PASS F4 opened picker.
-PASS successfullyParsed is true
-
-TEST COMPLETE
index 9521e49..56a7de7 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("date").value is "2012-03-08"
index 6078af3..abfb534 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("month").value is "2016-12"
index a8e7bf6..1b6f73b 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("week").value is "2013-W18"
index bbeb5bd..2f6b59c 100644 (file)
@@ -3819,6 +3819,19 @@ webkit.org/b/111319 platform/chromium/fast/forms/suggestion-picker/time-suggesti
 webkit.org/b/111319 platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-appearance-rtl.html [ Pass ImageOnlyFailure ]
 webkit.org/b/111319 platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-appearance-with-scroll-bar.html [ Pass ImageOnlyFailure ]
 webkit.org/b/111319 platform/chromium/fast/forms/suggestion-picker/week-suggestion-picker-appearance.html [ Pass ImageOnlyFailure ]
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar.html [ ImageOnlyFailure Pass ]
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html [ ImageOnlyFailure Pass ]
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/month-picker-appearance.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
+webkit.org/b/109439 platform/chromium/fast/forms/calendar-picker/week-picker-appearance.html [ ImageOnlyFailure Pass ] 
+
+
 
 # Failing tests with 2d canvas acceleration.
 crbug.com/145084 [ Android ] platform/chromium/virtual/gpu/canvas/philip [ Failure Pass ]
@@ -4160,8 +4173,6 @@ webkit.org/b/100955 http/tests/security/contentSecurityPolicy/object-src-none-bl
 
 webkit.org/b/101377 [ Linux MountainLion ] platform/chromium-linux/fast/text/international/complex-joining-using-gpos.html [ Failure ImageOnlyFailure Pass Crash ]
 
-webkit.org/b/107423 platform/chromium/fast/forms/calendar-picker/calendar-picker-mouse-operations.html [ Failure Pass ]
-
 # Rebaseline after currentPath
 webkit.org/b/108246 [ XP ] fast/canvas/canvas-currentPath.html [ Failure ]
 webkit.org/b/108246 [ XP ] platform/chromium/virtual/gpu/fast/canvas/canvas-currentPath.html [ Failure ]
@@ -4310,18 +4321,6 @@ webkit.org/b/106426 [ Win ] inspector/geolocation-success.html [ Failure Pass ]
 webkit.org/b/106426 [ Win ] inspector/geolocation-watchPosition.html [ Failure Pass ]
 crbug.com/166932 [ Debug ] plugins/embed-attributes-setting.html [ Crash Pass ]
 
-# Flakey tests. These have been rebaselined once yet still fail, or occasionally pass.
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/week-picker-appearance.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ru.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/month-picker-appearance.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-step.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/107508 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/109136 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/109136 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-required-ar.html [ ImageOnlyFailure Pass ] 
-webkit.org/b/109158 platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-ar.html [ ImageOnlyFailure Pass ] 
-
 # Broken by Skia flag changes in r139445
 crbug.com/169550 [ Debug ] fast/lists/big-list-marker.html [ Crash ]
 crbug.com/169550 [ Debug ] platform/chromium/virtual/deferred/fast/images/icon-decoding.html [ Crash ]
diff --git a/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt b/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup-expected.txt
new file mode 100644 (file)
index 0000000..bdaf3ac
--- /dev/null
@@ -0,0 +1,5 @@
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html b/LayoutTests/platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html
new file mode 100644 (file)
index 0000000..a85710d
--- /dev/null
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+window.enablePixelTesting = true;
+</script>
+<script src="../../../../../fast/js/resources/js-test-pre.js"></script>
+<script src="../../../../../fast/forms/resources/picker-common.js"></script>
+<script src="resources/calendar-picker-common.js"></script>
+</head>
+<body>
+<input type=date id=date value="10000-12-31">
+
+<p id="description" style="opacity: 0"></p>
+<div id="console" style="opacity: 0"></div>
+
+<script>
+openPicker(document.getElementById('date'), function() {
+    popupWindow.document.querySelector(".month-popup-button").click();
+    skipAnimation();
+    finishJSTest();
+});
+</script>
+<script src="../../../../../fast/js/resources/js-test-post.js"></script>
+</body>
+</html>
index 9b1df6b..70bd092 100644 (file)
@@ -5,8 +5,8 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
-PASS selectedDate() is "2011-12-31"
-PASS selectedDate() is "2012-01-01"
+PASS selectedValue() is "2011-12-31"
+PASS selectedValue() is "2012-01-01"
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("datetime").value is "2012-01-01T12:53:45Z"
 PASS successfullyParsed is true
index 6826197..e052c51 100644 (file)
@@ -4,11 +4,11 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Step without min or max.
-PASS availableDatesInCurrentMonth().join(",") is "2012-11-01,2012-11-04,2012-11-08,2012-11-11,2012-11-15,2012-11-18,2012-11-22,2012-11-25,2012-11-29"
+PASS availableDayCells().join(",") is "2012-11-01,2012-11-04,2012-11-08,2012-11-11,2012-11-15,2012-11-18,2012-11-22,2012-11-25,2012-11-29"
 Step when min is set.
-PASS availableDatesInCurrentMonth().join(",") is "2012-11-16,2012-11-20,2012-11-23,2012-11-27,2012-11-30"
+PASS availableDayCells().join(",") is "2012-11-16,2012-11-20,2012-11-23,2012-11-27,2012-11-30"
 Step when min and max are set.
-PASS availableDatesInCurrentMonth().join(",") is "2012-11-16,2012-11-20"
+PASS availableDayCells().join(",") is "2012-11-16,2012-11-20"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 7656e32..28afd00 100644 (file)
@@ -18,7 +18,7 @@ openPicker(document.getElementById('datetime'), test1);
 
 function test1() {
     debug("Step without min or max.");
-    shouldBeEqualToString('availableDatesInCurrentMonth().join(",")', '2012-11-01,2012-11-04,2012-11-08,2012-11-11,2012-11-15,2012-11-18,2012-11-22,2012-11-25,2012-11-29');
+    shouldBeEqualToString('availableDayCells().join(",")', '2012-11-01,2012-11-04,2012-11-08,2012-11-11,2012-11-15,2012-11-18,2012-11-22,2012-11-25,2012-11-29');
 
     // Close popup
     eventSender.keyDown('\x1B');
@@ -34,7 +34,7 @@ function test1AfterClose() {
 
 function test2() {
     debug("Step when min is set.");
-    shouldBeEqualToString('availableDatesInCurrentMonth().join(",")', '2012-11-16,2012-11-20,2012-11-23,2012-11-27,2012-11-30');
+    shouldBeEqualToString('availableDayCells().join(",")', '2012-11-16,2012-11-20,2012-11-23,2012-11-27,2012-11-30');
 
     // Close popup
     eventSender.keyDown('\x1B');
@@ -50,7 +50,7 @@ function test2AfterClose() {
 
 function test3() {
     debug("Step when min and max are set.");
-    shouldBeEqualToString('availableDatesInCurrentMonth().join(",")', '2012-11-16,2012-11-20');
+    shouldBeEqualToString('availableDayCells().join(",")', '2012-11-16,2012-11-20');
     finishJSTest();
 }
 
index b0d077f..842a217 100644 (file)
@@ -18,17 +18,16 @@ shouldBeNull('document.getElementById("mock-page-popup")');
 openPicker(document.getElementById('datetime'), test);
 
 function test() {
-    shouldBeEqualToString('selectedDate()', '2011-12-31');
+    shouldBeEqualToString('highlightedValue()', '2011-12-31');
+    shouldBeEqualToString('selectedValue()', '2011-12-31');
 
     eventSender.keyDown('rightArrow');
-    shouldBeEqualToString('selectedDate()', '2012-01-01');
+    shouldBeEqualToString('highlightedValue()', '2012-01-01');
+    shouldBeEqualToString('selectedValue()', '2011-12-31');
 
     eventSender.keyDown('\n');
-    waitUntilClosing(testAfterClosing);
-}
-
-function testAfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    shouldBeEqualToString('highlightedValue()', '2012-01-01');
+    shouldBeEqualToString('selectedValue()', '2012-01-01');
     shouldBeEqualToString('document.getElementById("datetime").value', '2012-01-01T12:53:45Z');
 
     finishJSTest();
index b26eff6..07924d8 100644 (file)
@@ -5,11 +5,12 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
-PASS selectedDate() is "2011-12-31"
-PASS selectedDate() is "2012-01-01"
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2011-12-31"
+PASS highlightedValue() is "2011-12-31"
+PASS highlightedValue() is "2012-01-01"
+PASS selectedValue() is "2012-01-01"
 PASS document.getElementById("datetimelocal").value is "2012-01-01T12:53:45"
 PASS successfullyParsed is true
 
 TEST COMPLETE
-
index a1638b3..afd39b8 100644 (file)
@@ -18,17 +18,14 @@ shouldBeNull('document.getElementById("mock-page-popup")');
 openPicker(document.getElementById('datetimelocal'), test);
 
 function test() {
-    shouldBeEqualToString('selectedDate()', '2011-12-31');
+    shouldBeEqualToString('selectedValue()', '2011-12-31');
+    shouldBeEqualToString('highlightedValue()', '2011-12-31');
 
     eventSender.keyDown('rightArrow');
-    shouldBeEqualToString('selectedDate()', '2012-01-01');
+    shouldBeEqualToString('highlightedValue()', '2012-01-01');
 
     eventSender.keyDown('\n');
-    waitUntilClosing(testAfterClosing);
-}
-
-function testAfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    shouldBeEqualToString('selectedValue()', '2012-01-01');
     shouldBeEqualToString('document.getElementById("datetimelocal").value', '2012-01-01T12:53:45');
 
     finishJSTest();
index 8d947f5..9cb5af0 100644 (file)
@@ -7,52 +7,106 @@ Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
 Check that page popup exists.
 PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]"
-PASS selectedDate() is "2000-01-02"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "2000-01-02"
+PASS highlightedDayCells() is "2000-01-02"
 Check that arrow keys work properly even when going between weeks and months.
-PASS selectedDate() is "1999-12-26"
+press up
 PASS currentMonth() is "2000-01"
-PASS selectedDate() is "2000-01-02"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
+press up
 PASS currentMonth() is "1999-12"
-PASS selectedDate() is "1999-12-26"
-PASS currentMonth() is "2000-01"
-PASS selectedDate() is "2000-01-02"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-19"
+PASS highlightedDayCells() is "1999-12-19"
+press down
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
+press down
 PASS currentMonth() is "2000-01"
-PASS selectedDate() is "1999-12-26"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "2000-01-02"
+PASS highlightedDayCells() is "2000-01-02"
+press up
 PASS currentMonth() is "2000-01"
-PASS selectedDate() is "2000-01-08"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
+press left
 PASS currentMonth() is "1999-12"
-PASS selectedDate() is "1999-12-26"
-PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-25"
+PASS highlightedDayCells() is "1999-12-25"
+press right
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
 press m
-PASS selectedDate() is "2000-01-30"
-PASS currentMonth() is "2000-02"
-press shift + m
-PASS selectedDate() is "1999-12-26"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "2000-01-23"
+PASS highlightedDayCells() is "2000-01-23"
+press shift + m
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
 press y
-PASS selectedDate() is "2000-12-31"
-PASS currentMonth() is "2001-01"
+PASS currentMonth() is "2000-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2000-12-24"
+PASS highlightedDayCells() is "2000-12-24"
 press shift + y
-PASS selectedDate() is "1999-12-26"
-PASS currentMonth() is "2000-01"
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
 press d
-PASS selectedDate() is "2009-12-27"
-PASS currentMonth() is "2010-01"
+PASS currentMonth() is "2009-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2009-12-27"
+PASS highlightedDayCells() is "2009-12-27"
 press shift + d
-PASS selectedDate() is "1999-12-26"
-PASS currentMonth() is "2000-01"
-PASS document.getElementById("mock-page-popup") is null
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
+press enter
+PASS currentMonth() is "1999-12"
+PASS selectedValue() is "1999-12-26"
+PASS selectedDayCells() is "1999-12-26"
+PASS highlightedValue() is "1999-12-26"
+PASS highlightedDayCells() is "1999-12-26"
 PASS document.getElementById("date").value is "1999-12-26"
 PASS testToday() || testToday() is true
 Check if tabbing works.
-PASS focusedElement() is ".days-area-container"
-PASS focusedElement() is ".today-button[value=<<CalendarToday>>]"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
+PASS focusedElement() is ".list-view calendar-table-view"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".calendar-navigation-button today-button"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".month-popup-button"
+press esc
 PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("date").value is "1999-12-26"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 329377b..1781485 100644 (file)
@@ -21,102 +21,149 @@ function test1() {
     debug('Check that page popup exists.');
     shouldBe('popupWindow.pagePopupController.toString()', '"[object PagePopupController]"');
 
-    shouldBe('selectedDate()', '"2000-01-02"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '2000-01-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-02');
 
     debug('Check that arrow keys work properly even when going between weeks and months.');
 
+    debug('press up');
     eventSender.keyDown('upArrow');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
-    // Move from first row of January 2000 to last row of December 1999.
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
+
+    debug('press up');
     eventSender.keyDown('upArrow');
-    shouldBe('selectedDate()', '"2000-01-02"');
-    shouldBe('currentMonth()', '"1999-12"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-19');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-19');
     
+    debug('press down');
     eventSender.keyDown('downArrow');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
+
+    debug('press down');
     eventSender.keyDown('downArrow');
-    shouldBe('selectedDate()', '"2000-01-02"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '2000-01-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-02');
 
+    debug('press up');
     eventSender.keyDown('upArrow');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
     // Move from top left of January 2000 to bottom right of December 1999.
+    debug('press left');
     eventSender.keyDown('leftArrow');
-    shouldBe('selectedDate()', '"2000-01-08"');
-    shouldBe('currentMonth()', '"1999-12"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-25');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-25');
 
+    debug('press right');
     eventSender.keyDown('rightArrow');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
     debug("press m");
     eventSender.keyDown('m');
-    shouldBe('selectedDate()', '"2000-01-30"');
-    shouldBe('currentMonth()', '"2000-02"');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '2000-01-23');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-23');
 
     debug("press shift + m");
     eventSender.keyDown('M');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
     debug("press y");
     eventSender.keyDown('y');
-    shouldBe('selectedDate()', '"2000-12-31"');
-    shouldBe('currentMonth()', '"2001-01"');
+    shouldBeEqualToString('currentMonth()', '2000-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2000-12-24');
+    shouldBeEqualToString('highlightedDayCells()', '2000-12-24');
 
     debug("press shift + y");
     eventSender.keyDown('Y');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
     debug("press d");
     eventSender.keyDown('d');
-    shouldBe('selectedDate()', '"2009-12-27"');
-    shouldBe('currentMonth()', '"2010-01"');
+    shouldBeEqualToString('currentMonth()', '2009-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2009-12-27');
+    shouldBeEqualToString('highlightedDayCells()', '2009-12-27');
 
     debug("press shift + d");
     eventSender.keyDown('D');
-    shouldBe('selectedDate()', '"1999-12-26"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
+    debug("press enter");
     eventSender.keyDown('\n');
-    waitUntilClosing(test1AfterClosing);
-}
-
-function test1AfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
-    shouldBe('document.getElementById("date").value', '"1999-12-26"');
+    shouldBeEqualToString('currentMonth()', '1999-12');
+    shouldBeEqualToString('selectedValue()', '1999-12-26');
+    shouldBeEqualToString('selectedDayCells()', '1999-12-26');
+    shouldBeEqualToString('highlightedValue()', '1999-12-26');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
+    shouldBeEqualToString('document.getElementById("date").value', '1999-12-26');
 
-    openPicker(document.getElementById('date'), test2);
-}
-
-function test2() {
     // Test twice in case midnight.
     shouldBeTrue('testToday() || testToday()');
 
     debug('Check if tabbing works.');
-    shouldBe('focusedElement()', '".days-area-container"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".today-button[value=<<CalendarToday>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button"');
+    shouldBeEqualToString('focusedElement()', '.list-view calendar-table-view');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBeEqualToString('focusedElement()', '.calendar-navigation-button');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBeEqualToString('focusedElement()', '.calendar-navigation-button today-button');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBeEqualToString('focusedElement()', '.calendar-navigation-button');
     eventSender.keyDown('\t', ['shiftKey']);
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
+    shouldBeEqualToString('focusedElement()', '.month-popup-button');
 
+    debug("press esc");
     eventSender.keyDown('\x1B');
     waitUntilClosing(test2AfterClosing);
 }
 
 function test2AfterClosing() {
     shouldBeNull('document.getElementById("mock-page-popup")');
-    shouldBe('document.getElementById("date").value', '"1999-12-26"');
 
     finishJSTest();
 }
@@ -126,7 +173,10 @@ function testToday() {
     var now = new Date();
     var expectedDate = serializeDate(now.getFullYear(), now.getMonth(), now.getDate());
     var expectedMonth = (new popupWindow.Month(now.getFullYear(), now.getMonth())).toString();
-    return selectedDate() === expectedDate && currentMonth() === expectedMonth;
+    return selectedValue() === expectedDate &&
+           highlightedValue() === expectedDate &&
+           currentMonth() === expectedMonth &&
+           document.getElementById("date").value === expectedDate;
 }
 
 function serializeDate(year, month, day) {
index 5a27d41..edc8ebe 100644 (file)
@@ -5,22 +5,36 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
-PASS selectedDate() is "2000-01-02"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "2000-01-02"
+PASS highlightedDayCells() is "2000-01-02"
 Check that hovering over an entry highlights it.
-PASS selectedDate() is "1999-12-31"
 PASS currentMonth() is "2000-01"
-PASS selectedDate() is "2000-01-04"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "1999-12-31"
+PASS highlightedDayCells() is "1999-12-31"
 PASS currentMonth() is "2000-01"
-Check that navigating between months maintains selection position.
-PASS selectedDate() is "2000-02-08"
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is "2000-01-02"
+PASS highlightedValue() is "2000-01-04"
+PASS highlightedDayCells() is "2000-01-04"
+Check that navigating between months maintains highlighted position.
 PASS currentMonth() is "2000-02"
-Check that moving the mouse outside the popup de-highlights entries.
-PASS selectedDate() is undefined.
-Check that mouse click closes the popup and sets the value.
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2000-01-02"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2000-02-08"
+PASS highlightedDayCells() is "2000-02-08"
+Check that mouse click sets the value.
+PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-02-05"
+PASS selectedDayCells() is "2000-02-05"
+PASS highlightedValue() is "2000-02-05"
+PASS highlightedDayCells() is "2000-02-05"
 PASS document.getElementById("date").value is "2000-02-05"
 PASS successfullyParsed is true
 
 TEST COMPLETE
-
index 0606cc7..bbcb981 100644 (file)
@@ -19,35 +19,44 @@ shouldBeNull('document.getElementById("mock-page-popup")');
 openPicker(document.getElementById('date'), test);
 
 function test() {
-    shouldBe('selectedDate()', '"2000-01-02"');
-    shouldBe('currentMonth()', '"2000-01"');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '2000-01-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-02');
 
     debug('Check that hovering over an entry highlights it.');
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[5]);
-    shouldBe('selectedDate()', '"1999-12-31"');
-    shouldBe('currentMonth()', '"2000-01"');
+    hoverOverDayCellAt(5, 0);
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '1999-12-31');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-31');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[9]);
-    shouldBe('selectedDate()', '"2000-01-04"');
-    shouldBe('currentMonth()', '"2000-01"');
+    hoverOverDayCellAt(2, 1);
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '2000-01-04');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-04');
 
-    debug('Check that navigating between months maintains selection position.');
+    debug('Check that navigating between months maintains highlighted position.');
     eventSender.keyDown('m');
-    shouldBe('selectedDate()', '"2000-02-08"');
-    shouldBe('currentMonth()', '"2000-02"');
+    shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01-02');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2000-02-08');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-08');
 
-    debug('Check that moving the mouse outside the popup de-highlights entries.');
-    hoverOverElement(document.getElementById('description'));
-    shouldBeUndefined('selectedDate()');
+    debug('Check that mouse click sets the value.');
+    clickDayCellAt(6, 0);
+    shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-02-05');
+    shouldBeEqualToString('selectedDayCells()', '2000-02-05');
+    shouldBeEqualToString('highlightedValue()', '2000-02-05');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-05');
+    shouldBeEqualToString('document.getElementById("date").value', '2000-02-05');
 
-    debug('Check that mouse click closes the popup and sets the value.');
-    clickElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[6]);
-    waitUntilClosing(afterClosingCallback);
-}
-
-function afterClosingCallback() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
-    shouldBe('document.getElementById("date").value', '"2000-02-05"');
     finishJSTest();
 }
 </script>
index bd79916..7f7d652 100644 (file)
@@ -17,10 +17,10 @@ openPicker(document.getElementById('date'), finishTest);
 
 function finishTest() {
     var daysContainer = popupWindow.document.getElementsByClassName("days-area")[0];
-    sendKey(daysContainer, 'Right');
-    sendKey(daysContainer, 'Enter');
-    shouldBe('document.getElementById("date").value', '"0002-02-03"');
-    waitUntilClosing(finishJSTest);
+    eventSender.keyDown('rightArrow');
+    eventSender.keyDown('\n');
+    shouldBeEqualToString('document.getElementById("date").value', '0002-02-03');
+    finishJSTest();
 }
 </script>
 <script src="../../../../../fast/js/resources/js-test-post.js"></script>
index 6895fab..7fa1d9b 100644 (file)
@@ -4,9 +4,9 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Step without min.
-PASS availableDatesInCurrentMonth().join(",") is ["2011-05-08", "2011-05-17", "2011-05-26"].join(",")
+PASS availableDayCells() is "2011-05-08,2011-05-17,2011-05-26,2011-06-04"
 Step when min is set.
-PASS availableDatesInCurrentMonth().join(",") is ["2011-05-01", "2011-05-10", "2011-05-19", "2011-05-28"].join(",")
+PASS availableDayCells() is "2011-05-01,2011-05-10,2011-05-19,2011-05-28"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 79c1799..586fa3c 100644 (file)
@@ -18,7 +18,7 @@ openPicker(document.getElementById('date'), test1);
 
 function test1() {
     debug("Step without min.");
-    shouldBe('availableDatesInCurrentMonth().join(",")', '["2011-05-08", "2011-05-17", "2011-05-26"].join(",")');
+    shouldBeEqualToString('availableDayCells()', '2011-05-08,2011-05-17,2011-05-26,2011-06-04');
 
     // Close popup
     eventSender.keyDown('\x1B');
@@ -34,16 +34,9 @@ function test1AfterClose() {
 
 function test2() {
     debug("Step when min is set.");
-    shouldBe('availableDatesInCurrentMonth().join(",")', '["2011-05-01", "2011-05-10", "2011-05-19", "2011-05-28"].join(",")');
+    shouldBeEqualToString('availableDayCells()', '2011-05-01,2011-05-10,2011-05-19,2011-05-28');
     finishJSTest();
 }
-
-function availableDatesInCurrentMonth() {
-    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.available:not(.not-this-month)"), function(element) {
-        return element.dataset.submitValue;
-    }).sort();
-}
-
 </script>
 <script src="../../../../../fast/js/resources/js-test-post.js"></script>
 </body>
index 235825b..0d12ffa 100644 (file)
@@ -31,25 +31,15 @@ function test1() {
     eventSender.keyDown('rightArrow');
     debug('Choosing a new value from the calendar picker. "input" and "change" events should be dispatched in this order.');
     eventSender.keyDown('\n');
-    waitUntilClosing(test1AfterClosing);
-}
-
-function test1AfterClosing() {
     shouldBeEqualToString('date1.value', '2000-01-03');
+
     shouldBe('eventsCounter.input', '1');
     shouldBe('eventsCounter.change', '1');
 
     eventsCounter = {};
-    openPicker(date1, test2);
-}
 
-function test2() {
     debug('Choosing the same value from the calendar picker. No events should be dispatched.');
     eventSender.keyDown('\n');
-    waitUntilClosing(test2AfterClosing);
-}
-
-function test2AfterClosing() {
     shouldBeEqualToString('date1.value', '2000-01-03');
     shouldBeUndefined('eventsCounter.input');
     shouldBeUndefined('eventsCounter.change');
index b94059d..7bc2c61 100644 (file)
@@ -30,14 +30,15 @@ openPicker(datetimelocal1, test1);
 function test1() {
     debug('Choosing a new date value from the calendar picker. No events should be dispatched because the hour field and the minutes field are empty.');
     eventSender.keyDown('\n');
-    waitUntilClosing(test1AfterClosing);
-}
-
-function test1AfterClosing() {
     shouldBeEqualToString('datetimelocal1.value', '');
     shouldBeUndefined('eventsCounter.input');
     shouldBeUndefined('eventsCounter.change');
 
+    eventSender.keyDown('\x1B');
+    waitUntilClosing(test1AfterClosing);
+}
+
+function test1AfterClosing() {
     datetimelocal1.value = "2013-01-21T17:49";
     openPicker(datetimelocal1, test2);
 }
@@ -46,10 +47,6 @@ function test2() {
     debug('Choosing a new value from the calendar picker. "Input" and "change" events should be dispatched in this order.');
     eventSender.keyDown('rightArrow');
     eventSender.keyDown('\n');
-    waitUntilClosing(test2AfterClosing);
-}
-
-function test2AfterClosing() {
     shouldBeEqualToString('datetimelocal1.value', '2013-01-22T17:49');
     shouldBe('eventsCounter.input', '1');
     shouldBe('eventsCounter.change', '1');
index 22d46d4..9a0c8a2 100644 (file)
@@ -7,48 +7,94 @@ Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
 Check that page popup exists.
 PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]"
-PASS selectedMonth() is "2000-01"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
 Check that arrow keys work properly.
-PASS selectedMonth() is "1999-12"
+press up
 PASS currentMonth() is "1999-12"
-PASS selectedMonth() is "2000-01"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01"
+PASS highlightedValue() is "1999-12"
+PASS highlightedDayCells() is "1999-12-01,1999-12-02,1999-12-03,1999-12-04,1999-12-05,1999-12-06,1999-12-07,1999-12-08,1999-12-09,1999-12-10,1999-12-11,1999-12-12,1999-12-13,1999-12-14,1999-12-15,1999-12-16,1999-12-17,1999-12-18,1999-12-19,1999-12-20,1999-12-21,1999-12-22,1999-12-23,1999-12-24,1999-12-25,1999-12-26,1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31"
+press down
 PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+press down
 PASS currentMonth() is "2000-02"
-PASS selectedMonth() is "2000-01"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
+press left
 PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+press right
 PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
 press m
-PASS selectedMonth() is "2000-03"
 PASS currentMonth() is "2000-03"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2000-03"
+PASS highlightedDayCells() is "2000-03-01,2000-03-02,2000-03-03,2000-03-04,2000-03-05,2000-03-06,2000-03-07,2000-03-08,2000-03-09,2000-03-10,2000-03-11,2000-03-12,2000-03-13,2000-03-14,2000-03-15,2000-03-16,2000-03-17,2000-03-18,2000-03-19,2000-03-20,2000-03-21,2000-03-22,2000-03-23,2000-03-24,2000-03-25,2000-03-26,2000-03-27,2000-03-28,2000-03-29,2000-03-30,2000-03-31"
 press shift + m
-PASS selectedMonth() is "2000-02"
 PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
 press y
-PASS selectedMonth() is "2001-02"
 PASS currentMonth() is "2001-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2001-02"
+PASS highlightedDayCells() is "2001-02-01,2001-02-02,2001-02-03,2001-02-04,2001-02-05,2001-02-06,2001-02-07,2001-02-08,2001-02-09,2001-02-10,2001-02-11,2001-02-12,2001-02-13,2001-02-14,2001-02-15,2001-02-16,2001-02-17,2001-02-18,2001-02-19,2001-02-20,2001-02-21,2001-02-22,2001-02-23,2001-02-24,2001-02-25,2001-02-26,2001-02-27,2001-02-28"
 press shift + y
-PASS selectedMonth() is "2000-02"
 PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
 press d
-PASS selectedMonth() is "2010-02"
 PASS currentMonth() is "2010-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2010-02"
+PASS highlightedDayCells() is "2010-02-01,2010-02-02,2010-02-03,2010-02-04,2010-02-05,2010-02-06,2010-02-07,2010-02-08,2010-02-09,2010-02-10,2010-02-11,2010-02-12,2010-02-13,2010-02-14,2010-02-15,2010-02-16,2010-02-17,2010-02-18,2010-02-19,2010-02-20,2010-02-21,2010-02-22,2010-02-23,2010-02-24,2010-02-25,2010-02-26,2010-02-27,2010-02-28"
 press shift + d
-PASS selectedMonth() is "2000-02"
 PASS currentMonth() is "2000-02"
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
+press enter
+PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-02"
+PASS selectedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29"
 PASS document.getElementById("month").value is "2000-02"
 PASS testToday() || testToday() is true
 Check if tabbing works.
-PASS focusedElement() is ".days-area-container"
-PASS focusedElement() is ".today-button[value=<<ThisMonthLabel>>]"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
+PASS focusedElement() is ".list-view calendar-table-view"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".calendar-navigation-button today-button"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".month-popup-button"
+press esc
 PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("month").value is "2000-02"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index d15ce62..3f82afb 100644 (file)
@@ -21,98 +21,132 @@ function test1() {
     debug('Check that page popup exists.');
     shouldBe('popupWindow.pagePopupController.toString()', '"[object PagePopupController]"');
 
-    shouldBeEqualToString('selectedMonth()', '2000-01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
 
     debug('Check that arrow keys work properly.');
 
+    debug("press up");
     eventSender.keyDown('upArrow');
-    shouldBeEqualToString('selectedMonth()', '1999-12');
     shouldBeEqualToString('currentMonth()', '1999-12');
-    
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01');
+    shouldBeEqualToString('highlightedValue()', '1999-12');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-01,1999-12-02,1999-12-03,1999-12-04,1999-12-05,1999-12-06,1999-12-07,1999-12-08,1999-12-09,1999-12-10,1999-12-11,1999-12-12,1999-12-13,1999-12-14,1999-12-15,1999-12-16,1999-12-17,1999-12-18,1999-12-19,1999-12-20,1999-12-21,1999-12-22,1999-12-23,1999-12-24,1999-12-25,1999-12-26,1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31');
+
+    debug("press down");
     eventSender.keyDown('downArrow');
-    shouldBeEqualToString('selectedMonth()', '2000-01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
     
+    debug("press down");
     eventSender.keyDown('downArrow');
-    shouldBeEqualToString('selectedMonth()', '2000-02');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
 
+    debug("press left");
     eventSender.keyDown('leftArrow');
-    shouldBeEqualToString('selectedMonth()', '2000-01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
 
+    debug("press right");
     eventSender.keyDown('rightArrow');
-    shouldBeEqualToString('selectedMonth()', '2000-02');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
 
     debug("press m");
     eventSender.keyDown('m');
-    shouldBeEqualToString('selectedMonth()', '2000-03');
     shouldBeEqualToString('currentMonth()', '2000-03');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2000-03');
+    shouldBeEqualToString('highlightedDayCells()', '2000-03-01,2000-03-02,2000-03-03,2000-03-04,2000-03-05,2000-03-06,2000-03-07,2000-03-08,2000-03-09,2000-03-10,2000-03-11,2000-03-12,2000-03-13,2000-03-14,2000-03-15,2000-03-16,2000-03-17,2000-03-18,2000-03-19,2000-03-20,2000-03-21,2000-03-22,2000-03-23,2000-03-24,2000-03-25,2000-03-26,2000-03-27,2000-03-28,2000-03-29,2000-03-30,2000-03-31');
 
     debug("press shift + m");
     eventSender.keyDown('M');
-    shouldBeEqualToString('selectedMonth()', '2000-02');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
 
     debug("press y");
     eventSender.keyDown('y');
-    shouldBeEqualToString('selectedMonth()', '2001-02');
     shouldBeEqualToString('currentMonth()', '2001-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2001-02');
+    shouldBeEqualToString('highlightedDayCells()', '2001-02-01,2001-02-02,2001-02-03,2001-02-04,2001-02-05,2001-02-06,2001-02-07,2001-02-08,2001-02-09,2001-02-10,2001-02-11,2001-02-12,2001-02-13,2001-02-14,2001-02-15,2001-02-16,2001-02-17,2001-02-18,2001-02-19,2001-02-20,2001-02-21,2001-02-22,2001-02-23,2001-02-24,2001-02-25,2001-02-26,2001-02-27,2001-02-28');
 
     debug("press shift + y");
     eventSender.keyDown('Y');
-    shouldBeEqualToString('selectedMonth()', '2000-02');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
 
     debug("press d");
     eventSender.keyDown('d');
-    shouldBeEqualToString('selectedMonth()', '2010-02');
     shouldBeEqualToString('currentMonth()', '2010-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2010-02');
+    shouldBeEqualToString('highlightedDayCells()', '2010-02-01,2010-02-02,2010-02-03,2010-02-04,2010-02-05,2010-02-06,2010-02-07,2010-02-08,2010-02-09,2010-02-10,2010-02-11,2010-02-12,2010-02-13,2010-02-14,2010-02-15,2010-02-16,2010-02-17,2010-02-18,2010-02-19,2010-02-20,2010-02-21,2010-02-22,2010-02-23,2010-02-24,2010-02-25,2010-02-26,2010-02-27,2010-02-28');
 
     debug("press shift + d");
     eventSender.keyDown('D');
-    shouldBeEqualToString('selectedMonth()', '2000-02');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
 
+    debug("press enter");
     eventSender.keyDown('\n');
-    waitUntilClosing(test1AfterClosing);
-}
-
-function test1AfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-02');
+    shouldBeEqualToString('selectedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05,2000-02-06,2000-02-07,2000-02-08,2000-02-09,2000-02-10,2000-02-11,2000-02-12,2000-02-13,2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20,2000-02-21,2000-02-22,2000-02-23,2000-02-24,2000-02-25,2000-02-26,2000-02-27,2000-02-28,2000-02-29');
     shouldBe('document.getElementById("month").value', '"2000-02"');
 
-    openPicker(document.getElementById('month'), test2);
-}
-
-function test2() {
     // Test twice in case midnight.
     shouldBeTrue('testToday() || testToday()');
 
     debug('Check if tabbing works.');
-    shouldBe('focusedElement()', '".days-area-container"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".today-button[value=<<ThisMonthLabel>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button"');
+    shouldBe('focusedElement()', '".list-view calendar-table-view"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".calendar-navigation-button"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".calendar-navigation-button today-button"');
     eventSender.keyDown('\t', ['shiftKey']);
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
+    shouldBe('focusedElement()', '".calendar-navigation-button"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".month-popup-button"');
 
+    debug("press esc");
     eventSender.keyDown('\x1B');
     waitUntilClosing(test2AfterClosing);
 }
 
 function test2AfterClosing() {
     shouldBeNull('document.getElementById("mock-page-popup")');
-    shouldBe('document.getElementById("month").value', '"2000-02"');
-
-    sendKey(document.getElementById('month'), "F4");
-    if (document.getElementById('mock-page-popup'))
-        testPassed("F4 opened picker.");
 
     finishJSTest();
 }
@@ -121,7 +155,7 @@ function testToday() {
     eventSender.keyDown('t');
     var now = new Date();
     var expectedMonth = new popupWindow.Month(now.getFullYear(), now.getMonth()).toString();
-    return selectedMonth() === expectedMonth && currentMonth() === expectedMonth;
+    return selectedValue() === expectedMonth && highlightedValue() === expectedMonth && currentMonth() === expectedMonth;
 }
 
 function focusedElement() {
index ad70c3c..6ddf3a1 100644 (file)
@@ -5,21 +5,35 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
-PASS selectedMonth() is "2000-01"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
 Check that hovering over an entry highlights it.
-PASS selectedMonth() is "1999-12"
 PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "1999-12"
+PASS highlightedDayCells() is "1999-12-26,1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31"
 PASS currentMonth() is "2000-01"
-PASS selectedMonth() is "2000-02"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-02"
+PASS highlightedDayCells() is "2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05"
 PASS currentMonth() is "2000-01"
-Check that moving the mouse outside the popup de-highlights entries.
-PASS selectedMonth() is null
-Check that mouse click closes the popup and sets the value.
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+Check that mouse click sets the value.
+PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-01"
+PASS selectedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
+PASS highlightedValue() is "2000-01"
+PASS highlightedDayCells() is "2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31"
 PASS document.getElementById("month").value is "2000-01"
 PASS successfullyParsed is true
 
 TEST COMPLETE
-
index b74afcc..a44161e 100644 (file)
@@ -19,33 +19,41 @@ shouldBeNull('document.getElementById("mock-page-popup")');
 openPicker(document.getElementById('month'), test);
 
 function test() {
-    shouldBeEqualToString('selectedMonth()', '2000-01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
 
     debug('Check that hovering over an entry highlights it.');
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[0]);
-    shouldBeEqualToString('selectedMonth()', '1999-12');
+    hoverOverDayCellAt(0, 0);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '1999-12');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26,1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[41]);
-    shouldBeEqualToString('selectedMonth()', '2000-02');
+    hoverOverDayCellAt(6, 5);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[41]);
-    shouldBeEqualToString('selectedMonth()', '2000-02');
+    hoverOverDayCellAt(3, 3);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
 
-    debug('Check that moving the mouse outside the popup de-highlights entries.');
-    hoverOverElement(document.getElementById('description'));
-    shouldBeNull('selectedMonth()');
-
-    debug('Check that mouse click closes the popup and sets the value.');
-    clickElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[6]);
-    waitUntilClosing(testAfterClosing);
-}
-
-function testAfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    debug('Check that mouse click sets the value.');
+    clickDayCellAt(6, 0);
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
+    shouldBeEqualToString('highlightedValue()', '2000-01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-01,2000-01-02,2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09,2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16,2000-01-17,2000-01-18,2000-01-19,2000-01-20,2000-01-21,2000-01-22,2000-01-23,2000-01-24,2000-01-25,2000-01-26,2000-01-27,2000-01-28,2000-01-29,2000-01-30,2000-01-31');
     shouldBeEqualToString('document.getElementById("month").value', '2000-01');
 
     finishJSTest();
index fd062b2..0ef49cd 100644 (file)
@@ -4,11 +4,9 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Step without min.
-PASS availableDatesInCurrentMonth()[0] is "2011-04-01"
-PASS availableDatesInCurrentMonth()[29] is "2011-04-30"
+PASS availableDayCells() is "2011-04-01,2011-04-02,2011-04-03,2011-04-04,2011-04-05,2011-04-06,2011-04-07,2011-04-08,2011-04-09,2011-04-10,2011-04-11,2011-04-12,2011-04-13,2011-04-14,2011-04-15,2011-04-16,2011-04-17,2011-04-18,2011-04-19,2011-04-20,2011-04-21,2011-04-22,2011-04-23,2011-04-24,2011-04-25,2011-04-26,2011-04-27,2011-04-28,2011-04-29,2011-04-30"
 Step when min is set.
-PASS availableDatesInCurrentMonth()[0] is "2012-02-01"
-PASS availableDatesInCurrentMonth()[28] is "2012-02-29"
+PASS availableDayCells() is "2012-02-01,2012-02-02,2012-02-03,2012-02-04,2012-02-05,2012-02-06,2012-02-07,2012-02-08,2012-02-09,2012-02-10,2012-02-11,2012-02-12,2012-02-13,2012-02-14,2012-02-15,2012-02-16,2012-02-17,2012-02-18,2012-02-19,2012-02-20,2012-02-21,2012-02-22,2012-02-23,2012-02-24,2012-02-25,2012-02-26,2012-02-27,2012-02-28,2012-02-29"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 5a8a91d..dd597c4 100644 (file)
@@ -18,8 +18,7 @@ openPicker(document.getElementById('month'), test1);
 
 function test1() {
     debug("Step without min.");
-    shouldBeEqualToString('availableDatesInCurrentMonth()[0]', '2011-04-01');
-    shouldBeEqualToString('availableDatesInCurrentMonth()[29]', '2011-04-30');
+    shouldBeEqualToString('availableDayCells()', '2011-04-01,2011-04-02,2011-04-03,2011-04-04,2011-04-05,2011-04-06,2011-04-07,2011-04-08,2011-04-09,2011-04-10,2011-04-11,2011-04-12,2011-04-13,2011-04-14,2011-04-15,2011-04-16,2011-04-17,2011-04-18,2011-04-19,2011-04-20,2011-04-21,2011-04-22,2011-04-23,2011-04-24,2011-04-25,2011-04-26,2011-04-27,2011-04-28,2011-04-29,2011-04-30');
 
     // Close popup
     eventSender.keyDown('\x1B');
@@ -37,17 +36,9 @@ function test1AfterClosing() {
 
 function test2() {
     debug("Step when min is set.");
-    shouldBeEqualToString('availableDatesInCurrentMonth()[0]', '2012-02-01');
-    shouldBeEqualToString('availableDatesInCurrentMonth()[28]', '2012-02-29');
+    shouldBeEqualToString('availableDayCells()', '2012-02-01,2012-02-02,2012-02-03,2012-02-04,2012-02-05,2012-02-06,2012-02-07,2012-02-08,2012-02-09,2012-02-10,2012-02-11,2012-02-12,2012-02-13,2012-02-14,2012-02-15,2012-02-16,2012-02-17,2012-02-18,2012-02-19,2012-02-20,2012-02-21,2012-02-22,2012-02-23,2012-02-24,2012-02-25,2012-02-26,2012-02-27,2012-02-28,2012-02-29');
     finishJSTest();
 }
-
-function availableDatesInCurrentMonth() {
-    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.available:not(.not-this-month)"), function(element) {
-        return element.dataset.submitValue;
-    }).sort();
-}
-
 </script>
 <script src="../../../../../fast/js/resources/js-test-post.js"></script>
 </body>
index 70ead96..9b6f5ae 100644 (file)
@@ -1,39 +1,81 @@
 function currentMonth() {
-    var element = popupWindow.document.querySelector(".selected-month-year");
-    if (!element)
-        return null;
-    return element.dataset.value;
+    return popupWindow.global.picker.currentMonth().toString();
 }
 
-function availableDatesInCurrentMonth() {
-    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.available:not(.not-this-month)"), function(element) {
-        return element.dataset.submitValue;
-    }).sort();
+function availableDayCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day-cell:not(.disabled):not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
 }
 
-function selectedDate() {
-    var selected = selectedDates();
-    if (selected.length > 1)
-        testFailed("selectedDate expects single selected date. Found " + selected.length);
-    return selected[0];
+function highlightedDayCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day-cell.highlighted:not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
 }
 
-function selectedDates() {
-    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.day-selected"), function(element) {
-        return element.dataset.submitValue;
-    }).sort();
+function selectedDayCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day-cell.selected:not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
 }
 
-function selectedMonth() {
-    var selected = popupWindow.document.querySelectorAll(".day.day-selected");
-    if (selected.length === 0)
-        return null;
-    return selected[0].dataset.monthValue;
+function availableWeekNumberCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".week-number-cell.highlighted:not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
 }
 
-function selectedWeek() {
-    var selected = popupWindow.document.querySelectorAll(".day.day-selected");
-    if (selected.length === 0)
-        return null;
-    return selected[0].dataset.weekValue;
+function highlightedWeekNumberCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".week-number-cell.highlighted:not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
+}
+
+function selectedWeekNumberCells() {
+    skipAnimation();
+    return Array.prototype.map.call(popupWindow.document.querySelectorAll(".week-number-cell.selected:not(.hidden)"), function(element) {
+        return element.$view.day.toString();
+    }).sort().join();
+}
+
+function highlightedValue() {
+    var highlight = popupWindow.global.picker.highlight();
+    if (highlight)
+        return highlight.toString();
+    return null;
+}
+
+function selectedValue() {
+    var selection = popupWindow.global.picker.selection();
+    if (selection)
+        return selection.toString();
+    return null;
+}
+
+function skipAnimation() {
+    popupWindow.AnimationManager.shared._animationFrameCallback(Infinity);
+}
+
+function hoverOverDayCellAt(column, row) {
+    skipAnimation();
+    var offset = cumulativeOffset(popupWindow.global.picker.calendarTableView.element);
+    var x = offset[0];
+    var y = offset[1];
+    if (popupWindow.global.picker.calendarTableView.hasWeekNumberColumn)
+        x += popupWindow.WeekNumberCell.Width;
+    x += (column + 0.5) * popupWindow.DayCell.Width;
+    y += (row + 0.5) * popupWindow.DayCell.Height + popupWindow.CalendarTableHeaderView.Height;
+    eventSender.mouseMoveTo(x, y);
+};
+
+function clickDayCellAt(column, row) {
+    hoverOverDayCellAt(column, row);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
 }
index c2f2d3b..f254335 100644 (file)
@@ -7,52 +7,106 @@ Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
 Check that page popup exists.
 PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]"
-PASS selectedWeek() is "2000-W01"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W01"
+PASS highlightedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
 Check that arrow keys work properly.
-PASS selectedWeek() is "1999-W52"
+press up
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "1999-W51"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "1999-W52"
+PASS highlightedDayCells() is "1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02"
+press up
 PASS currentMonth() is "1999-12"
-PASS selectedWeek() is "1999-W52"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-W51"
+PASS highlightedDayCells() is "1999-12-20,1999-12-21,1999-12-22,1999-12-23,1999-12-24,1999-12-25,1999-12-26"
+press down
 PASS currentMonth() is "1999-12"
-PASS selectedWeek() is "2000-W01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "1999-W52"
+PASS highlightedDayCells() is "1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01"
+press down
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W02"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W01"
+PASS highlightedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+press down
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
+press left
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W02"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W01"
+PASS highlightedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+press right
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
 press m
-PASS selectedWeek() is "2000-W07"
 PASS currentMonth() is "2000-02"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2000-W07"
+PASS highlightedDayCells() is "2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20"
 press shift + m
-PASS selectedWeek() is "2000-W02"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
 press y
-PASS selectedWeek() is "2001-W03"
 PASS currentMonth() is "2001-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2001-W03"
+PASS highlightedDayCells() is "2001-01-15,2001-01-16,2001-01-17,2001-01-18,2001-01-19,2001-01-20,2001-01-21"
 press shift + y
-PASS selectedWeek() is "2000-W02"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
 press d
-PASS selectedWeek() is "2010-W02"
 PASS currentMonth() is "2010-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is ""
+PASS highlightedValue() is "2010-W02"
+PASS highlightedDayCells() is "2010-01-11,2010-01-12,2010-01-13,2010-01-14,2010-01-15,2010-01-16,2010-01-17"
 press shift + d
-PASS selectedWeek() is "2000-W02"
 PASS currentMonth() is "2000-01"
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
+press enter
+PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W02"
+PASS selectedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
+PASS highlightedValue() is "2000-W02"
+PASS highlightedDayCells() is "2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16"
 PASS document.getElementById("week").value is "2000-W02"
 PASS testToday() || testToday() is true
 Check if tabbing works.
-PASS focusedElement() is ".days-area-container"
-PASS focusedElement() is ".today-button[value=<<ThisWeekLabel>>]"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
-PASS focusedElement() is ".year-month-button"
-PASS focusedElement() is ".clear-button[value=<<CalendarClear>>]"
+PASS focusedElement() is ".list-view calendar-table-view"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".calendar-navigation-button today-button"
+PASS focusedElement() is ".calendar-navigation-button"
+PASS focusedElement() is ".month-popup-button"
+press esc
 PASS document.getElementById("mock-page-popup") is null
-PASS document.getElementById("week").value is "2000-W02"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index fe54a04..997b58c 100644 (file)
@@ -20,107 +20,149 @@ openPicker(document.getElementById('week'), test1);
 function test1() {
     debug('Check that page popup exists.');
     shouldBe('popupWindow.pagePopupController.toString()', '"[object PagePopupController]"');
-
-    shouldBeEqualToString('selectedWeek()', '2000-W01');
+    
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
 
     debug('Check that arrow keys work properly.');
-
+    
+    debug("press up");
     eventSender.keyDown('upArrow');
-    shouldBeEqualToString('selectedWeek()', '1999-W52');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '1999-W52');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02');
     
+    debug("press up");
     eventSender.keyDown('upArrow');
-    shouldBeEqualToString('selectedWeek()', '1999-W51');
     shouldBeEqualToString('currentMonth()', '1999-12');
-
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-W51');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-20,1999-12-21,1999-12-22,1999-12-23,1999-12-24,1999-12-25,1999-12-26');
+    
+    debug("press down");
     eventSender.keyDown('downArrow');
-    shouldBeEqualToString('selectedWeek()', '1999-W52');
     shouldBeEqualToString('currentMonth()', '1999-12');
-
-    eventSender.keyDown('downArrow');
-    shouldBeEqualToString('selectedWeek()', '2000-W01');
-    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '1999-W52');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01');
     
+    debug("press down");
     eventSender.keyDown('downArrow');
-    shouldBeEqualToString('selectedWeek()', '2000-W02');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
 
+    debug("press down");
+    eventSender.keyDown('downArrow');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
+    
+    debug("press left");
     eventSender.keyDown('leftArrow');
-    shouldBeEqualToString('selectedWeek()', '2000-W01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
 
+    debug("press right");
     eventSender.keyDown('rightArrow');
-    shouldBeEqualToString('selectedWeek()', '2000-W02');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
 
     debug("press m");
     eventSender.keyDown('m');
-    shouldBeEqualToString('selectedWeek()', '2000-W07');
     shouldBeEqualToString('currentMonth()', '2000-02');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2000-W07');
+    shouldBeEqualToString('highlightedDayCells()', '2000-02-14,2000-02-15,2000-02-16,2000-02-17,2000-02-18,2000-02-19,2000-02-20');
 
     debug("press shift + m");
     eventSender.keyDown('M');
-    shouldBeEqualToString('selectedWeek()', '2000-W02');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
 
     debug("press y");
     eventSender.keyDown('y');
-    shouldBeEqualToString('selectedWeek()', '2001-W03');
     shouldBeEqualToString('currentMonth()', '2001-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2001-W03');
+    shouldBeEqualToString('highlightedDayCells()', '2001-01-15,2001-01-16,2001-01-17,2001-01-18,2001-01-19,2001-01-20,2001-01-21');
 
     debug("press shift + y");
     eventSender.keyDown('Y');
-    shouldBeEqualToString('selectedWeek()', '2000-W02');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
 
     debug("press d");
     eventSender.keyDown('d');
-    shouldBeEqualToString('selectedWeek()', '2010-W02');
     shouldBeEqualToString('currentMonth()', '2010-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '');
+    shouldBeEqualToString('highlightedValue()', '2010-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2010-01-11,2010-01-12,2010-01-13,2010-01-14,2010-01-15,2010-01-16,2010-01-17');
 
     debug("press shift + d");
     eventSender.keyDown('D');
-    shouldBeEqualToString('selectedWeek()', '2000-W02');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
 
+    debug("press enter");
     eventSender.keyDown('\n');
-    waitUntilClosing(test1AfterClosing);
-}
-
-function test1AfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W02');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
+    shouldBeEqualToString('highlightedValue()', '2000-W02');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-10,2000-01-11,2000-01-12,2000-01-13,2000-01-14,2000-01-15,2000-01-16');
     shouldBe('document.getElementById("week").value', '"2000-W02"');
 
-    openPicker(document.getElementById('week'), test2);
-}
-
-function test2() {
     // Test twice in case midnight.
     shouldBeTrue('testToday() || testToday()');
 
     debug('Check if tabbing works.');
-    shouldBe('focusedElement()', '".days-area-container"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".today-button[value=<<ThisWeekLabel>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
-    eventSender.keyDown('\t');
-    shouldBe('focusedElement()', '".year-month-button"');
+    shouldBe('focusedElement()', '".list-view calendar-table-view"');
     eventSender.keyDown('\t', ['shiftKey']);
-    shouldBe('focusedElement()', '".clear-button[value=<<CalendarClear>>]"');
+    shouldBe('focusedElement()', '".calendar-navigation-button"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".calendar-navigation-button today-button"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".calendar-navigation-button"');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBe('focusedElement()', '".month-popup-button"');
 
+    debug("press esc");
     eventSender.keyDown('\x1B');
     waitUntilClosing(test2AfterClosing);
 }
 
 function test2AfterClosing() {
     shouldBeNull('document.getElementById("mock-page-popup")');
-    shouldBe('document.getElementById("week").value', '"2000-W02"');
-
-    sendKey(document.getElementById('week'), "F4");
-    if (document.getElementById('mock-page-popup'))
-        testPassed("F4 opened picker.");
 
     finishJSTest();
 }
@@ -129,7 +171,7 @@ function testToday() {
     eventSender.keyDown('t');
     var now = new Date();
     var expectedWeek = popupWindow.Week.createFromToday().toString();
-    return selectedWeek() === expectedWeek;
+    return selectedValue() === expectedWeek && highlightedValue() === expectedWeek;
 }
 
 function focusedElement() {
index c39a64e..d6143ef 100644 (file)
@@ -5,23 +5,40 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Check that page popup doesn't exist at first.
 PASS document.getElementById("mock-page-popup") is null
-PASS selectedWeek() is "2000-W01"
 PASS currentMonth() is "2000-01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W01"
+PASS highlightedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
 Check that hovering over an entry highlights it.
-PASS selectedWeek() is "1999-W51"
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "1999-W52"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "1999-W51"
+PASS highlightedDayCells() is "1999-12-26"
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W01"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "1999-W52"
+PASS highlightedDayCells() is "1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02"
 PASS currentMonth() is "2000-01"
-PASS selectedWeek() is "2000-W05"
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W01"
+PASS highlightedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
 PASS currentMonth() is "2000-01"
-Check that moving the mouse outside the popup de-highlights entries.
-PASS selectedWeek() is null
-Check that mouse click closes the popup and sets the value.
-PASS document.getElementById("mock-page-popup") is null
+PASS selectedValue() is "2000-W01"
+PASS selectedDayCells() is "2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09"
+PASS highlightedValue() is "2000-W05"
+PASS highlightedDayCells() is "2000-01-31,2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05"
+Check that mouse click sets the value.
+PASS currentMonth() is "2000-01"
+PASS selectedValue() is "1999-W52"
+PASS selectedDayCells() is "1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02"
+PASS highlightedValue() is "1999-W52"
+PASS highlightedDayCells() is "1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02"
 PASS document.getElementById("week").value is "1999-W52"
 PASS successfullyParsed is true
 
 TEST COMPLETE
-
index 6d608f5..2c9252a 100644 (file)
@@ -19,37 +19,48 @@ shouldBeNull('document.getElementById("mock-page-popup")');
 openPicker(document.getElementById('week'), test);
 
 function test() {
-    shouldBeEqualToString('selectedWeek()', '2000-W01');
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
 
     debug('Check that hovering over an entry highlights it.');
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[0]);
-    shouldBeEqualToString('selectedWeek()', '1999-W51');
+    hoverOverDayCellAt(0, 0);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '1999-W51');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-26');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[6]);
-    shouldBeEqualToString('selectedWeek()', '1999-W52');
+    hoverOverDayCellAt(6, 0);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '1999-W52');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[8]);
-    shouldBeEqualToString('selectedWeek()', '2000-W01');
+    hoverOverDayCellAt(2, 1);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W01');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
 
-    hoverOverElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[41]);
-    shouldBeEqualToString('selectedWeek()', '2000-W05');
+    hoverOverDayCellAt(6, 5);
     shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '2000-W01');
+    shouldBeEqualToString('selectedDayCells()', '2000-01-03,2000-01-04,2000-01-05,2000-01-06,2000-01-07,2000-01-08,2000-01-09');
+    shouldBeEqualToString('highlightedValue()', '2000-W05');
+    shouldBeEqualToString('highlightedDayCells()', '2000-01-31,2000-02-01,2000-02-02,2000-02-03,2000-02-04,2000-02-05');
 
-    debug('Check that moving the mouse outside the popup de-highlights entries.');
-    hoverOverElement(document.getElementById('description'));
-    shouldBeNull('selectedWeek()');
-
-    debug('Check that mouse click closes the popup and sets the value.');
-    clickElement(popupWindow.document.querySelectorAll(".day:not(.week-column)")[6]);
-    waitUntilClosing(testAfterClosing);
-}
-
-function testAfterClosing() {
-    shouldBeNull('document.getElementById("mock-page-popup")');
+    debug('Check that mouse click sets the value.');
+    clickDayCellAt(6, 0);
+    shouldBeEqualToString('currentMonth()', '2000-01');
+    shouldBeEqualToString('selectedValue()', '1999-W52');
+    shouldBeEqualToString('selectedDayCells()', '1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02');
+    shouldBeEqualToString('highlightedValue()', '1999-W52');
+    shouldBeEqualToString('highlightedDayCells()', '1999-12-27,1999-12-28,1999-12-29,1999-12-30,1999-12-31,2000-01-01,2000-01-02');
     shouldBeEqualToString('document.getElementById("week").value', '1999-W52');
 
     finishJSTest();
index 753653c..e8fab8c 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("date").value is "2012-03-08"
index fc72db1..83c2adb 100644 (file)
@@ -170,7 +170,7 @@ function test3() {
     shouldBeFalse('expectingDidHideEvent');
 
     debug('Confirm calendar picker did open.');
-    shouldBeTrue('popupWindow.document.getElementById("main").classList.contains("calendar-picker")');
+    shouldBeTrue('popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker")');
 
     debug('Check that escape key closes the popup.');
     eventSender.keyDown('\x1B');
index e7193ed..a07cab7 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("month").value is "2016-12"
index e531ded..2b1db53 100644 (file)
@@ -163,7 +163,7 @@ function test3() {
     shouldBeFalse('expectingDidHideEvent');
 
     debug('Confirm calendar picker did open.');
-    shouldBeTrue('popupWindow.document.getElementById("main").classList.contains("calendar-picker")');
+    shouldBeTrue('popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker")');
 
     debug('Check that escape key closes the popup.');
     eventSender.keyDown('\x1B');
index 98af030..e03447e 100644 (file)
@@ -33,7 +33,7 @@ Open calendar picker.
 PASS expectingDidHideEvent is true
 PASS expectingDidHideEvent is false
 Confirm calendar picker did open.
-PASS popupWindow.document.getElementById("main").classList.contains("calendar-picker") is true
+PASS popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker") is true
 Check that escape key closes the popup.
 PASS document.getElementById("mock-page-popup") is null
 PASS document.getElementById("week").value is "2013-W18"
index 56299d2..933dc3f 100644 (file)
@@ -173,7 +173,7 @@ function test3() {
     shouldBeFalse('expectingDidHideEvent');
 
     debug('Confirm calendar picker did open.');
-    shouldBeTrue('popupWindow.document.getElementById("main").classList.contains("calendar-picker")');
+    shouldBeTrue('popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker")');
 
     debug('Check that escape key closes the popup.');
     eventSender.keyDown('\x1B');
index 2dd5f17..f326e20 100644 (file)
@@ -6,6 +6,12 @@
 <style>
 body {
     background-color: #eeffff;
+    line-height: 1.4em;
+    font-family: Helvetica, sans-serif;
+}
+label {
+    width: 160px;
+    display: inline-block;
 }
 iframe {
     z-index: 2147483647;
@@ -19,242 +25,255 @@ iframe {
 <body>
 
 <p>This is a testbed for a calendar picker.</p>
-<select onchange="selected(this)">
- <option>English</option>
- <option>Japanese</option>
- <option>Arabic</option>
- <option>with datalist</option>
- <option>with long datalist</option>
- <option>Arabic with datalist</option>
- <option>Arabic with long datalist</option>
- <option>Week</option>
- <option>Month</option>
-</select>
 
-<div><input type="text" id="date"></div>
+<h2>Preview</h2>
+
+<input type="text" id="date" style="margin: 0;"><br>
 <iframe></iframe>
 
-<ol id="console" style="font-family:monospace;">
-</ol>
+<h2>Console</h2>
+
+<ol id="console" style="font-family:monospace;"></ol>
+
+<h2>Config</h2>
+<form action="" method="GET">
+    <fieldset>
+        <legend>Locale</legend>
+        
+        <label for="locale">Locale</label>
+        <select name="locale" id="config_locale">
+            <!-- Populated from locale_data. -->
+        </select>
+        <br />
+        <label for="locale_rtl">Locale RTL</label>
+        <input type="checkbox" name="locale_rtl" id="config_locale_rtl" value="true">
+        <br />
+        <label for="week_start_day">Week start day</label>
+        <select name="week_start_day" id="config_week_start_day">
+            <option value="0">Sunday</option>
+            <option value="1">Monday</option>
+            <option value="2">Tuesday</option>
+            <option value="3">Wednesday</option>
+            <option value="4">Thursday</option>
+            <option value="5">Friday</option>
+            <option value="6">Saturday</option>
+        </select>
+    </fieldset>
+
+    <fieldset>
+        <legend>Attributes</legend>
+        
+        <label for="type">[type]</label>
+        <select name="type" id="config_type">
+            <option>date</option>
+            <option>week</option>
+            <option>month</option>
+        </select>
+        <br />
+        <label for="value">[value]</label>
+        <input type="text" name="value" id="config_value">
+        <br />
+        <label for="min">[min]</label>
+        <input type="text" name="min" id="config_min">
+        <br />
+        <label for="max">[max]</label>
+        <input type="text" name="max" id="config_max">
+        <br />
+        <label for="step">[step]</label>
+        <input type="number" name="step" id="config_step">
+    </fieldset>
+    <input type="submit" value="Submit">
+</form>
 
 <script>
-var englishArguments = {
-    locale: 'en-US',
-    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    todayLabel : 'Today',
-    clearLabel : 'Clear',
-    cancelLabel : 'Cancel',
-    weekStartDay : 0,
-    step : "86400000",
-    stepBase: "0",
-    max : '2099-12-31',
-};
-var japaneseArguments = {
-    locale: 'ja-JP',
-    dayLabels : ['日', '月', '火', '水', '木', '金', '土'],
-    todayLabel : '今日',
-    clearLabel : 'クリア',
-    cancelLabel : '取り消し',
-    weekStartDay : 0,
-    step : "86400000",
-    stepBase: "0",
-    max : '2099-03-15',
-};
-var arabicArguments = {
-    locale: 'ar',
-    isRTL: false,
-    isCalendarRTL: true,
-    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
-    todayLabel : 'اليوم',
-    clearLabel : 'مسح',
-    weekStartDay : 5,
-    step : "86400000",
-    stepBase: "0",
-    max : '2020-05-15',
-};
-var datalistArguments = {
-    locale: 'en-US',
-    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    todayLabel : 'Today',
-    clearLabel : 'Clear',
-    cancelLabel : 'Cancel',
-    weekStartDay : 0,
-    step : "86400000",
-    stepBase: "0",
-    max : '2099-12-31',
-    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
-    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
-    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
-    showOtherDateEntry: true,
-    otherDateLabel: 'Other...',
-    inputWidth: 127,
-    suggestionHighlightColor: "#0000ff",
-    suggestionHighlightTextColor: "#ffffff"
-};
-var longDatalistArguments = {
-    locale: 'en-US',
-    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    todayLabel : 'Today',
-    clearLabel : 'Clear',
-    cancelLabel : 'Cancel',
-    weekStartDay : 0,
-    step : "86400000",
-    stepBase: "0",
-    max : '2099-12-31',
-    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
-        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
-        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
-        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
-        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
-        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
-        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
-        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
-        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
-        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
-        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
-        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
-        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
-        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
-        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
-        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
-        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
-        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
-        "2012-03-30", "2012-03-31"],
-    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
-        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
-        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
-        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
-        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
-        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
-        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
-        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
-        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
-        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
-        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
-        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
-        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
-        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
-        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
-    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", ""],
-    showOtherDateEntry: true,
-    otherDateLabel: 'Other...',
-    inputWidth: 127,
-    suggestionHighlightColor: "#0000ff",
-    suggestionHighlightTextColor: "#ffffff"
-};
+function getParam(key) {
+    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
+    var pattern = "[\\?&]" + key + "=([^&#]*)";
+    var regex = new RegExp(pattern);
+    var results = regex.exec(window.location.search);
+    if (!results)
+        return "";
+    return decodeURIComponent(results[1].replace(/\+/g, " "));
+}
 
-var arabicDatalistArguments = {
-    locale: 'ar',
-    isRTL: true,
-    isCalendarRTL: true,
-    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
-    todayLabel : 'اليوم',
-    clearLabel : 'مسح',
-    weekStartDay : 5,
-    step : "86400000",
-    stepBase: "0",
-    max : '2020-05-15',
-    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
-    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
-    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
-    showOtherDateEntry: true,
-    otherDateLabel: 'Other...',
-    inputWidth: 127,
-    suggestionHighlightColor: "#0000ff",
-    suggestionHighlightTextColor: "#ffffff"
-};
+function setParam(key, value) {
+    key = escape(key);
+    value = escape(value);
+
+    var kvp = document.location.search.substr(1).split('&');
+
+    for (var i = kvp.length - 1; i >= 0; --i){
+        kvp[i]
+        var x = kvp[i].split('=');
+        if (x[0] === key) {
+            x[1] = value;
+            kvp[i] = x.join('=');
+            break;
+        }
+    }
+
+    if (i < 0)
+        kvp[kvp.length] = key + "=" + value;
 
-var arabicLongDatalistArguments = {
-    locale: 'ar',
-    isRTL: true,
-    isCalendarRTL: true,
-    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
-    todayLabel : 'اليوم',
-    clearLabel : 'مسح',
-    weekStartDay : 5,
-    step : "86400000",
-    stepBase: "0",
-    max : '2020-05-15',
-    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
-        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
-        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
-        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
-        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
-        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
-        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
-        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
-        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
-        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
-        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
-        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
-        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
-        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
-        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
-        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
-        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
-        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
-        "2012-03-30", "2012-03-31"],
-    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
-        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
-        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
-        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
-        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
-        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
-        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
-        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
-        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
-        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
-        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
-        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
-        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
-        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
-        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
-    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
-        "", "", "", "", "", "", "", ""],
-    showOtherDateEntry: true,
-    otherDateLabel: 'Other...',
-    inputWidth: 127,
-    suggestionHighlightColor: "#0000ff",
-    suggestionHighlightTextColor: "#ffffff"
+    document.location.search = kvp.join('&');
+}
+
+function $(id) {
+    return document.getElementById(id);
+}
+
+var config = {};
+function initializeConfig() {
+    for (locale in locale_data) {
+        var option = document.createElement("option");
+        option.setAttribute("label", locale_data[locale].displayName);
+        option.setAttribute("value", locale);
+        $("config_locale").appendChild(option);
+    }
+    
+    config.locale = getParam("locale") || "en_US";
+    config.isLocaleRTL = getParam("locale_rtl") === "true";
+    config.weekStartDay = parseInt(getParam("weekStartDay") || "0", 10);
+    config.type = getParam("type") || "date";
+    config.value = getParam("value") || "";
+    config.min = getParam("min") || "";
+    config.max = getParam("max") || "";
+    config.step = getParam("step") || "1";
+
+    $("config_locale").value = config.locale;
+    $("config_locale_rtl").checked = config.isLocaleRTL;
+    $("config_week_start_day").value = config.weekStartDay;
+    $("config_type").value = config.type;
+    $("config_value").value = config.value;
+    $("config_min").value = config.min;
+    $("config_max").value = config.max;
+    $("config_step").value = config.step;
 };
-var weekArguments = {
-    locale: 'en-US',
-    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    todayLabel : 'This Week',
-    clearLabel : 'Clear',
-    cancelLabel : 'Cancel',
-    weekLabel: 'Week',
-    weekStartDay : 0,
-    step : "604800000",
-    stepBase: "-259200000",
-    currentValue : '2000-W01',
-    max : '2099-W03',
-    mode: "week"
+
+var locale_data = {
+    "en_US": {
+        "displayName": "English (United States)",
+        "shortMonthLabels": [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec"
+        ],
+        "dayLabels": [
+        "S",
+        "M",
+        "T",
+        "W",
+        "T",
+        "F",
+        "S"
+        ],
+    },
+    "ja": {
+        "displayName": "Japanese",
+        "shortMonthLabels": [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月"
+        ],
+        "dayLabels": [
+        "日",
+        "月",
+        "火",
+        "水",
+        "木",
+        "金",
+        "土"
+        ],
+    },
+    "ar": {
+        "displayName": "Arabic",
+        "shortMonthLabels": [
+        "يناير",
+        "فبراير",
+        "مارس",
+        "أبريل",
+        "مايو",
+        "يونيو",
+        "يوليو",
+        "أغسطس",
+        "سبتمبر",
+        "أكتوبر",
+        "نوفمبر",
+        "ديسمبر"
+        ],
+        "dayLabels": [
+        "ح",
+        "ن",
+        "ث",
+        "ر",
+        "خ",
+        "ج",
+        "س"
+        ],
+    },
+    "vi": {
+        "displayName": "Vietnamese",
+        "shortMonthLabels": [
+        "thg 1",
+        "thg 2",
+        "thg 3",
+        "thg 4",
+        "thg 5",
+        "thg 6",
+        "thg 7",
+        "thg 8",
+        "thg 9",
+        "thg 10",
+        "thg 11",
+        "thg 12"
+        ],
+        "dayLabels": [
+        "CN",
+        "T2",
+        "T3",
+        "T4",
+        "T5",
+        "T6",
+        "T7"
+        ],
+    },
 };
-var monthArguments = {
-    locale: 'en-US',
-    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    todayLabel : 'This Month',
-    clearLabel : 'Clear',
-    cancelLabel : 'Cancel',
-    weekStartDay : 0,
-    step : "1",
-    stepBase: "0",
-    currentValue : '2000-01',
-    max : '2099-03',
-    mode: "month"
+
+function createParam() {
+    return {
+        mode: config.type,
+        locale: config.locale,
+        weekStartDay: config.weekStartDay,
+        isLocaleRTL: config.isLocaleRTL,
+        dayLabels: locale_data[config.locale].dayLabels,
+        shortMonthLabels: locale_data[config.locale].shortMonthLabels,
+        max: config.max,
+        min: config.min,
+        step: config.step * (config.type === "month" ? 1 : 86400000),
+        stepBase: "0",
+        currentValue: config.value
+    }
 };
 
-function openCalendar(args) {
+function openCalendar() {
     var frame = document.getElementsByTagName('iframe')[0];
     var doc = frame.contentDocument;
     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
@@ -294,11 +313,12 @@ function openCalendar(args) {
             if (numValue == 0)
                 window.document.getElementById('date').value = stringValue;
         },
-        setValue: function(value) {
-            window.log('value="' + value + '"');
-            window.document.getElementById('date').value = value;
+        setValue: function(stringValue) {
+            window.log('string="' + stringValue + '"');
+            window.document.getElementById('date').value = stringValue;
         },
         closePopup: function() {
+            window.log('closePopup');
         },
         localizeNumberString: function(numString) {
             if (typeof numString == "number")
@@ -310,57 +330,30 @@ function openCalendar(args) {
             var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
                                '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
             return monthLabels[zeroBaseMonth] + " " + year;
+        },
+        formatShortMonth: function(year, zeroBaseMonth) {
+            var monthLabels = ['<Jan>', '<Feb>', '<Mar>', '<Apr>', '<May>', '<Jun>',
+                               '<Jul>', '<Aug>', '<Sept>', '<Oct>', '<Nov>', '<Dec>'];
+            return monthLabels[zeroBaseMonth] + " " + year;
         }
     }
 
     setTimeout(function() {
-        frame.contentWindow.postMessage(JSON.stringify(args), "*");
+        frame.contentWindow.postMessage(JSON.stringify(createParam()), "*");
         frame.contentWindow.pagePopupController = pagePopupController;
     }, 100);
 }
 
-function selected(select) {
-    var frame = document.getElementsByTagName('iframe')[0];
-    frame.style.width = '100px';
-    frame.style.height = '100px';
-    switch (select.selectedIndex) {
-    case 0:
-        openCalendar(englishArguments);
-        break;
-    case 1:
-        openCalendar(japaneseArguments);
-        break;
-    case 2:
-        openCalendar(arabicArguments);
-        break;
-    case 3:
-        openCalendar(datalistArguments);
-        break;
-    case 4:
-        openCalendar(longDatalistArguments);
-        break;
-    case 5:
-        openCalendar(arabicDatalistArguments);
-        break;
-    case 6:
-        openCalendar(arabicLongDatalistArguments);
-        break;
-    case 7:
-        openCalendar(weekArguments);
-        break;
-    case 8:
-        openCalendar(monthArguments);
-        break;
-    }
-}
-
 function log(str) {
     var entry = document.createElement('li');
     entry.innerText = str;
     document.getElementById('console').appendChild(entry);
 }
 
-openCalendar(englishArguments);
+window.onload = function() {
+    initializeConfig();
+    openCalendar();
+};
 </script>
 </body>
 </html>
diff --git a/ManualTests/forms/date-suggestion-picker.html b/ManualTests/forms/date-suggestion-picker.html
new file mode 100644 (file)
index 0000000..261a296
--- /dev/null
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Calendar Picker test</title>
+<style>
+body {
+    background-color: #eeffff;
+}
+iframe {
+    z-index: 2147483647;
+    width: 100px;
+    height: 100px;
+    border: 0;
+    overflow: hidden;
+}
+</style>
+</head>
+<body>
+
+<p>This is a testbed for date suggestion picker.</p>
+<select onchange="selected(this)">
+ <option>with datalist</option>
+ <option>with long datalist</option>
+ <option>Arabic with datalist</option>
+ <option>Arabic with long datalist</option>
+</select>
+
+<div><input type="text" id="date"></div>
+<iframe></iframe>
+
+<ol id="console" style="font-family:monospace;">
+</ol>
+
+<script>
+var datalistArguments = {
+    locale: 'en-US',
+    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    todayLabel : 'Today',
+    clearLabel : 'Clear',
+    cancelLabel : 'Cancel',
+    weekStartDay : 0,
+    step : "86400000",
+    stepBase: "0",
+    max : '2099-12-31',
+    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
+    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
+    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
+    showOtherDateEntry: true,
+    otherDateLabel: 'Other...',
+    inputWidth: 127,
+    suggestionHighlightColor: "#0000ff",
+    suggestionHighlightTextColor: "#ffffff"
+};
+var longDatalistArguments = {
+    locale: 'en-US',
+    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    todayLabel : 'Today',
+    clearLabel : 'Clear',
+    cancelLabel : 'Cancel',
+    weekStartDay : 0,
+    step : "86400000",
+    stepBase: "0",
+    max : '2099-12-31',
+    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
+        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
+        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
+        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
+        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
+        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
+        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
+        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
+        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
+        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
+        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
+        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
+        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
+        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
+        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
+        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
+        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
+        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
+        "2012-03-30", "2012-03-31"],
+    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
+        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
+        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
+        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
+        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
+        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
+        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
+        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
+        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
+        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
+        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
+        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
+        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
+        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
+        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
+    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", ""],
+    showOtherDateEntry: true,
+    otherDateLabel: 'Other...',
+    inputWidth: 127,
+    suggestionHighlightColor: "#0000ff",
+    suggestionHighlightTextColor: "#ffffff"
+};
+
+var arabicDatalistArguments = {
+    locale: 'ar',
+    isRTL: true,
+    isCalendarRTL: true,
+    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    todayLabel : 'اليوم',
+    clearLabel : 'مسح',
+    weekStartDay : 5,
+    step : "86400000",
+    stepBase: "0",
+    max : '2020-05-15',
+    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
+    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
+    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
+    showOtherDateEntry: true,
+    otherDateLabel: 'Other...',
+    inputWidth: 127,
+    suggestionHighlightColor: "#0000ff",
+    suggestionHighlightTextColor: "#ffffff"
+};
+
+var arabicLongDatalistArguments = {
+    locale: 'ar',
+    isRTL: true,
+    isCalendarRTL: true,
+    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    todayLabel : 'اليوم',
+    clearLabel : 'مسح',
+    weekStartDay : 5,
+    step : "86400000",
+    stepBase: "0",
+    max : '2020-05-15',
+    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
+        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
+        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
+        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
+        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
+        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
+        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
+        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
+        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
+        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
+        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
+        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
+        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
+        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
+        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
+        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
+        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
+        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
+        "2012-03-30", "2012-03-31"],
+    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
+        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
+        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
+        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
+        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
+        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
+        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
+        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
+        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
+        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
+        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
+        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
+        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
+        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
+        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
+    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+        "", "", "", "", "", "", "", ""],
+    showOtherDateEntry: true,
+    otherDateLabel: 'Other...',
+    inputWidth: 127,
+    suggestionHighlightColor: "#0000ff",
+    suggestionHighlightTextColor: "#ffffff"
+};
+
+function openCalendar(args) {
+    var frame = document.getElementsByTagName('iframe')[0];
+    var doc = frame.contentDocument;
+    doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
+    var commonCssLink = doc.createElement('link');
+    commonCssLink.rel = 'stylesheet';
+    commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
+    doc.head.appendChild(commonCssLink);
+    var commonChromiumCssLink = doc.createElement('link');
+    commonChromiumCssLink.rel = 'stylesheet';
+    commonChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css?' + (new Date()).getTime();
+    doc.head.appendChild(commonChromiumCssLink);
+    var suggestionPickerCssLink = doc.createElement('link');
+    suggestionPickerCssLink.rel = 'stylesheet';
+    suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
+    doc.head.appendChild(suggestionPickerCssLink);
+    var link = doc.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
+    doc.head.appendChild(link);
+    var calendarPickerChromiumCssLink = doc.createElement('link');
+    calendarPickerChromiumCssLink.rel = 'stylesheet';
+    calendarPickerChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css?' + (new Date()).getTime();
+    doc.head.appendChild(calendarPickerChromiumCssLink);
+    var commonJsScript = doc.createElement('script');
+    commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
+    doc.body.appendChild(commonJsScript);
+    var suggestionPickerJsScript = doc.createElement('script');
+    suggestionPickerJsScript.src = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.js?' + (new Date()).getTime();
+    doc.body.appendChild(suggestionPickerJsScript);
+    var script = doc.createElement('script');
+    script.src = '../../Source/WebCore/Resources/pagepopups/calendarPicker.js?' + (new Date()).getTime();
+    doc.body.appendChild(script);
+
+    var pagePopupController = {
+        setValueAndClosePopup: function(numValue, stringValue) {
+            window.log('number=' + numValue + ', string="' + stringValue + '"');
+            if (numValue == 0)
+                window.document.getElementById('date').value = stringValue;
+        },
+        localizeNumberString: function(numString) {
+            if (typeof numString == "number")
+                return numString.toLocaleString();
+            return numString.toString();
+        },
+        histogramEnumeration: function() {},
+        formatMonth: function(year, zeroBaseMonth) {
+            var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
+                               '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
+            return monthLabels[zeroBaseMonth] + " " + year;
+        }
+    }
+
+    setTimeout(function() {
+        frame.contentWindow.postMessage(JSON.stringify(args), "*");
+        frame.contentWindow.pagePopupController = pagePopupController;
+    }, 100);
+}
+
+function selected(select) {
+    var frame = document.getElementsByTagName('iframe')[0];
+    frame.style.width = '100px';
+    frame.style.height = '100px';
+    switch (select.selectedIndex) {
+    case 0:
+        openCalendar(datalistArguments);
+        break;
+    case 1:
+        openCalendar(longDatalistArguments);
+        break;
+    case 2:
+        openCalendar(arabicDatalistArguments);
+        break;
+    case 3:
+        openCalendar(arabicLongDatalistArguments);
+        break;
+    }
+}
+
+function log(str) {
+    var entry = document.createElement('li');
+    entry.innerText = str;
+    document.getElementById('console').appendChild(entry);
+}
+
+openCalendar(englishArguments);
+</script>
+</body>
+</html>
index eab39ad..e696a13 100644 (file)
@@ -1,3 +1,96 @@
+2013-03-07  Keishi Hattori  <keishi@webkit.org>
+
+        Update calendar picker UI
+        https://bugs.webkit.org/show_bug.cgi?id=109439
+
+        Reviewed by Kent Tamura.
+
+        This patch changes the calendar picker UI.
+
+        Added tests to existing calendar picker tests.
+        Test: platform/chromium/fast/forms/calendar-picker/calendar-picker-appearance-month-popup.html
+
+        * Resources/pagepopups/calendarPicker.css:
+        (body):
+        (.rtl):
+        (.scroll-view):
+        (.scroll-view-content):
+        (.list-cell):
+        (.list-cell.hidden):
+        (.day-cell):
+        (.week-number-cell):
+        (.day-cell.today):
+        (.day-cell.highlighted):
+        (.day-cell.highlighted.disabled):
+        (.day-cell.selected):
+        (.day-cell.disabled):
+        (.day-cell.current-month):
+        (.calendar-table-view):
+        (.preparing .calendar-table-view:focus):
+        (.week-day-label):
+        (.week-number-label):
+        (.calendar-table-header-view):
+        (.calendar-picker):
+        (.calendar-header-view):
+        (.calendar-title):
+        (.rtl .calendar-title):
+        (.month-popup-button:disabled):
+        (.month-popup-button):
+        (.month-popup-button .disclosure-triangle):
+        (.month-popup-button .disclosure-triangle svg):
+        (.today-button::after):
+        (.calendar-navigation-button):
+        (.year-list-view):
+        (.year-list-cell):
+        (.year-list-cell .label):
+        (.year-list-cell .month-chooser):
+        (.month-buttons-row):
+        (.month-button):
+        (.month-button.highlighted):
+        (.scrubby-scroll-bar):
+        (.scrubby-scroll-thumb):
+        (.month-popup-view):
+        (.year-list-view .scrubby-scroll-bar):
+        (.rtl .year-list-view .scrubby-scroll-bar):
+        * Resources/pagepopups/calendarPicker.js:
+        (setGlobalParams): Sets the global params.
+        (initialize):
+        (openCalendarPicker):
+        (CalendarHeaderView.prototype.onNavigationButtonClick): Fix typo.
+        (CalendarPicker):
+        (CalendarPicker.prototype.onWindowResize): We want to have the "preparing" class applied
+        to cancel css transitions while setting up the calendar picker so we can avoid flaky pixel tests.
+        (CalendarPicker.prototype.onYearListViewDidHide): The user clicked on a month so hide the month popup.
+        (CalendarPicker.prototype.onYearListViewDidSelectMonth): Change the current month in response to the month popup.
+        (CalendarPicker.prototype.attachTo): We want the calendar table focused when the calendar picker first opens.
+        (CalendarPicker.prototype.cleanup): Clean up any event listeners or elements attached to nodes outside of this.element.
+        (CalendarPicker.prototype.onMonthPopupButtonClick): Open the month popup in response to the month popup button being clicked.
+        (CalendarPicker.prototype._setConfig): Configures the calendar picker.
+        (CalendarPicker.prototype.currentMonth): The currently shown month.
+        (CalendarPicker.prototype.setCurrentMonth): Scrolls the calendar table to the given month. Use the navigation behavior param to specify if you want a transition animation.
+        (CalendarPicker.prototype.adjustHeight): Adjusts the height so its just tall enough to fit the current month. If the month picker is open, fit that.
+        (CalendarPicker.prototype.selection): Currently selected date range.
+        (CalendarPicker.prototype.highlight): Currently highlighted date range.
+        (CalendarPicker.prototype.firstVisibleDay): Returns the first visible day ignoring scroll animation (i.e. this is the first visible day when the scroll animation is done).
+        (CalendarPicker.prototype.lastVisibleDay): Returns the last visible day ignoring scroll animation.
+        (CalendarPicker.prototype.selectRangeContainingDay): Sets the selection to the date range containing the given day.
+        (CalendarPicker.prototype.highlightRangeContainingDay): Sets the highlight to the date range containing the given day.
+        (CalendarPicker.prototype.setSelection): Sets the selection to the given date range.
+        (CalendarPicker.prototype._setHighlight): Sets the highlight to the given date range.
+        (CalendarPicker.prototype._stepMismatch): Just moving.
+        (CalendarPicker.prototype._outOfRange): Ditto.
+        (CalendarPicker.prototype.isValid): Returns true if the given date range is a valid selection.
+        (CalendarPicker.prototype.isValidDay): Returns true if the day is part of a valid selection.
+        (CalendarPicker.prototype._moveHighlight): Moves the highlight to the given date range if possible. Returns true if it succeeds.
+        (CalendarPicker.prototype.onCalendarTableKeyDown): Handles the arrow keys, etc.
+        (CalendarPicker.prototype.width):
+        (CalendarPicker.prototype.height):
+        (CalendarPicker.prototype.setHeight):
+        (CalendarPicker.prototype.onBodyKeyDown): Handles esc/m/y/d.
+        * Resources/pagepopups/chromium/calendarPickerChromium.css:
+        (.calendar-table-view:focus):
+        (.preparing .calendar-table-view:focus):
+
 2013-03-07  Seokju Kwon  <seokju.kwon@gmail.com>
 
         Web Inspector: Remove unused return value after r122962
index 3fb1ac2..9255f95 100644 (file)
@@ -32,250 +32,263 @@ body {
     -webkit-user-select: none;
     background-color: white;
     font: -webkit-control;
-    margin: 0;
-    overflow: hidden;
+    font-size: 12px;
 }
 
-.no-focus-ring :focus {
-    outline: none;
-}
-
-.calendar-picker {
-    border: 1px solid #bfbfbf;
-    border-radius: 2px;
-    position: absolute;
-    padding: 10px;
-    background-color: white;
-    white-space: nowrap;
-    width: 500px;
+.rtl {
+    direction: rtl;
 }
 
-.year-month-area {
+.scroll-view {
+    overflow: hidden;
+    width: 0;
+    height: 0;
 }
 
-.year-month-upper {
-    /* display:-webkit-box; is added in the JS code. */
+.list-cell {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
 }
 
-.year-selector {
-    text-align: right;
-    width: 6em;
+.list-cell.hidden {
+    display: none;
 }
 
-.month-selector-box {
-    display: inline-block;
+.week-number-cell,
+.day-cell {
+    position: static;
     text-align: center;
-    -webkit-box-flex: 2;
-}
-
-.month-selector {
-    background-color: white;
-    cursor: pointer;
+    box-sizing: border-box;
     display: inline-block;
-    padding: 4px 6px 4px 6px;
+    cursor: default;
+    -webkit-transition: color 1s;
+    padding: 1px;
 }
 
-.month-selector svg {
-    margin: 0 6px 2px 6px;
+.week-number-cell {
+    box-sizing: border-box;
+    color: black;
+    padding-right: 0;
+    box-shadow: 1px 0 0 #bfbfbf;
+    margin-right: 1px;
 }
 
-.month-selector-popup {
-    -webkit-box-sizing: content-box;
-    -webkit-box-shadow:
-        0 0 0 1px rgba(0,0,0,0.1),
-        0 5px 1px 1px rgba(0,0,0,0.1),
-        0 5px 2px 1px rgba(0,0,0,0.1),
-        0 5px 12px 1px rgba(0,0,0,0.5);
-    background: #fff;
-    display: none;
-    max-height: 10.8em;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: absolute;
-    white-space: nowrap;
+.day-cell {
+    color: #bfbfbf;
 }
 
-.month-selector-popup-contents {
-    display: table;
-    text-align: left;
+.day-cell.highlighted.today,
+.day-cell.today {
     border: 1px solid #bfbfbf;
-    margin: -1px 0 0 -1px;
+    padding: 0;
 }
 
-.month-selector-popup-entry {
-    -webkit-padding-start: 5px;
-    -webkit-padding-end: 5px;
-    cursor: pointer;
-    display; table-row;
-    line-height: 1.2em;
+.week-number-cell.highlighted,
+.day-cell.highlighted {
+    background-color: #e5ecf8;
 }
 
-.selected-month-year {
-    background-color: highlight;
-    color: highlighttext;
-    text-shadow: none;
+.week-number-cell.highlighted.disabled,
+.day-cell.highlighted.disabled {
+    border: 1px solid #e5ecf8;
+    padding: 0;
 }
 
-@media (pointer:coarse) {
-
-    .month-selector-popup {
-        max-height: 150px;
-    }
+.week-number-cell.selected,
+.day-cell.selected {
+    background-color: #bccdec;
+}
 
-    .month-selector-popup-entry {
-        line-height: 30px;
-    }
+.week-number-cell.disabled,
+.day-cell.disabled {
+    background-color: #f5f5f5;
 }
 
-.month-selector-wall {
-    display: none;
-    height: 100%;
-    left: 0px;
-    position: absolute;
-    top: 0px;
-    width: 100%;
+.day-cell.current-month {
+    color: #000000;
 }
 
-.year-month-button-left {
+.calendar-table-view {
+    border: 1px solid #bfbfbf;
     display: inline-block;
+    outline: none;
 }
 
-.year-month-button-left .year-month-button {
-    -webkit-margin-end: 4px;
+.week-number-label,
+.week-day-label {
+    text-align: center;
+    display: inline-block;
 }
 
-.year-month-button-right {
-    display: inline-block;
+.week-number-label {
+    box-sizing: border-box;
+    border-right: 1px solid #bfbfbf;
 }
 
-.year-month-button-right .year-month-button {
-    -webkit-margin-start: 4px;
+.calendar-table-header-view {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #bfbfbf;
+    height: 24px;
+    line-height: 24px;
 }
 
-.days-area-container {
-    background-color: white;
+.calendar-picker {
     border: 1px solid #bfbfbf;
-    margin-bottom: 8px;
-    margin-top: 10px;
+    border-radius: 2px;
+    position: absolute;
+    padding: 10px;
+    background-color: white;
     overflow: hidden;
+    cursor: default;
 }
 
-.days-area { /* <table> */
-    background-color: white;
-    border-collapse: separate;
-    border-spacing: 0px;
-    font: -webkit-control;
-    /* table-layout:fixed and width:100% are added in the JS code. */
+.calendar-header-view {
+    margin-bottom: 10px;
+    display: -webkit-flex;
+    -webkit-flex-flow: row;
 }
 
-.day-label { /* <th> */
-    -webkit-box-sizing: border-box;
-    background-color: #f5f5f5;
-    font-weight: normal;
-    text-align: center;
-    border-bottom: 1px solid #bfbfbf;
-    height: 2.1em;
+.calendar-title {
+    -webkit-align-self: center;
+    -webkit-flex: 1;
+    text-align: left;
 }
 
-.day { /* <td> */
-    padding: 1px;
-    text-align: center;
-    background-color: white;
-    border: 1px solid white;
-    -webkit-box-sizing: border-box;
-    line-height: 1.4em;
+.rtl .calendar-title {
+    text-align: right;
+}
+
+.month-popup-button,
+.month-popup-button:hover,
+.month-popup-button:disabled {
+    background-color: transparent !important;
+    background-image: none !important;
+    box-shadow: none !important;
+    color: black;
 }
 
-@media (pointer:coarse) {
-    .day {
-        min-width: 28px;
-        line-height: 28px;
-    }
+.month-popup-button:disabled {
+    opacity: 0.7;
 }
 
-.available {
+.month-popup-button {
+    font-size: 12px;
+    padding: 4px;
+    display: inline-block;
     cursor: default;
-    background-color: white;
-    border: 1px solid white;
-    -webkit-transition: all 0.2s ease;
+    border: 1px solid transparent !important;
+    height: 24px !important;
 }
 
-.not-this-month {
-    color: graytext;
-    font-weight: 400;
-    text-shadow: none;
+.month-popup-button .disclosure-triangle {
+    margin: 0 6px;
 }
 
-.available.day-selected {
-    background-color: highlight;
-    color: highlighttext;
-    text-shadow: none;
+.month-popup-button .disclosure-triangle svg {
+    padding-bottom: 2px;
 }
 
-.unavailable {
-    cursor: default;
-    color: graytext;
-    background-color: #eee;
-    border: 1px solid #eee;
-    -webkit-transition: border-color 0.2s ease;
+.today-button::after {
+    content: "";
+    display: block;
+    border-radius: 3px;
+    width: 6px;
+    height: 6px;
+    background-color: #6e6e6e;
+    margin: 0 auto;
 }
 
-.unavailable.day-selected {
-    border: 1px solid highlight;
+.calendar-navigation-button {
+    -webkit-align-self: center;
+    width: 24px;
+    height: 24px;
+    min-width: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    -webkit-margin-start: 4px !important;
 }
 
-.cancel-button {
-    float: right;
+.year-list-view {
+    border: 1px solid #bfbfbf;
+    background-color: white;
+    position: absolute;
+}
+
+.year-list-cell {
+    box-sizing: border-box;
+    border-bottom: 1px solid #bfbfbf;
+    background-color: white;
+    overflow: hidden;
 }
 
-.preparing .available,
-.preparing .unavailable {
-    -webkit-transition: none;
+.year-list-cell .label {
+    height: 24px;
+    line-height: 24px;
+    -webkit-padding-start: 8px;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #bfbfbf;
 }
 
-.week-mode .day,
-.month-mode .day {
-    -webkit-transition: none;
-    border: none;
-    padding: 2px;
+.year-list-cell .month-chooser {
+    padding: 0;
 }
 
-.week-mode .unavailable.day-selected {
-    padding: 1px 2px;
-    border-top: 1px solid highlight;
-    border-bottom: 1px solid highlight;
+.month-buttons-row {
+    display: -webkit-flex;
 }
 
-.week-mode .unavailable.day-selected.monday {
-    padding-left: 1px;
-    border-left: 1px solid highlight;
+.month-button {
+    -webkit-flex: 1;
+    height: 32px;
+    padding: 0 !important;
+    margin: 0 !important;
+    background-image: none !important;
+    background-color: #ffffff;
+    border-width: 0 !important;
+    box-shadow: none !important;
 }
 
-.week-mode .unavailable.day-selected.sunday {
-    padding-right: 1px;
-    border-right: 1px solid highlight;
+.month-button.highlighted {
+    background-color: #e5ecf8;
 }
 
-.week-mode .week-column.unavailable.day-selected {
-  padding: 1px;
-  border: 1px solid highlight;
+.scrubby-scroll-bar {
+    width: 14px;
+    height: 60px;
+    background-color: white;
+    border-left: 1px solid #bfbfbf;
+    position: absolute;
+    top: 0;
 }
 
-.week-column {
-    display: none;
+.scrubby-scroll-thumb {
+    width: 10px;
+    margin: 2px;
+    height: 30px;
+    background-color: #d8d8d8;
+    position: absolute;
+    left: 0;
+    top: 0;
 }
 
-.week-mode .week-column {
-    display: table-cell;
-    border-right: 1px solid #999;
-    padding-right: 1px;
+.month-popup-view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
 
-.today-clear-area .today-button {
-    -webkit-margin-end: 8px;
+.year-list-view .scrubby-scroll-bar {
+    right: 0;
 }
 
-.today-clear-area {
-    display: inline-block;
-    /* display: block is added in the JS code. */
+.rtl .year-list-view .scrubby-scroll-bar {
+    left: 0;
+    right: auto;
+    border-left-width: 0;
+    border-right: 1px solid #bfbfbf;
 }
index 67f12a0..e07b059 100644 (file)
 //  - Adjust hit target size for touch
 
 /**
- * CSS class names.
- *
- * @enum {string}
- */
-var ClassNames = {
-    Available: "available",
-    CancelButton: "cancel-button",
-    ClearButton: "clear-button",
-    Day: "day",
-    DayLabel: "day-label",
-    DayLabelContainer: "day-label-container",
-    DaysArea: "days-area",
-    DaysAreaContainer: "days-area-container",
-    Monday: "monday",
-    MonthMode: "month-mode",
-    MonthSelector: "month-selector",
-    MonthSelectorBox: "month-selector-box",
-    MonthSelectorPopup: "month-selector-popup",
-    MonthSelectorPopupContents: "month-selector-popup-contents",
-    MonthSelectorPopupEntry: "month-selector-popup-entry",
-    MonthSelectorWall: "month-selector-wall",
-    NoFocusRing: "no-focus-ring",
-    NotThisMonth: "not-this-month",
-    Selected: "day-selected",
-    SelectedMonthYear: "selected-month-year",
-    Sunday: "sunday",
-    TodayButton: "today-button",
-    TodayClearArea: "today-clear-area",
-    Unavailable: "unavailable",
-    WeekContainer: "week-container",
-    WeekColumn: "week-column",
-    WeekMode: "week-mode",
-    YearMonthArea: "year-month-area",
-    YearMonthButton: "year-month-button",
-    YearMonthButtonLeft: "year-month-button-left",
-    YearMonthButtonRight: "year-month-button-right",
-    YearMonthUpper: "year-month-upper"
+ * @enum {number}
+ */
+var WeekDay = {
+    Sunday: 0,
+    Monday: 1,
+    Tuesday: 2,
+    Wednesday: 3,
+    Thursday: 4,
+    Friday: 5,
+    Saturday: 6
 };
 
 /**
  * @type {Object}
  */
 var global = {
-    argumentsReceived: false,
-    params: null,
-    picker: null
+    picker: null,
+    params: {
+        locale: "en_US",
+        weekStartDay: WeekDay.Sunday,
+        dayLabels: ["S", "M", "T", "W", "T", "F", "S"],
+        shortMonthLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"],
+        isLocaleRTL: false,
+        mode: "date",
+        weekLabel: "Week",
+        anchorRectInScreen: new Rectangle(0, 0, 0, 0),
+        currentValue: null
+    }
 };
 
 // ----------------------------------------------------------------
@@ -112,19 +94,6 @@ function localizeNumber(number) {
 }
 
 /**
- * @enum {number}
- */
-var WeekDay = {
-    Sunday: 0,
-    Monday: 1,
-    Tuesday: 2,
-    Wednesday: 3,
-    Thursday: 4,
-    Friday: 5,
-    Saturday: 6
-};
-
-/**
  * @const
  * @type {number}
  */
@@ -808,60 +777,29 @@ function handleMessage(event) {
     initialize(JSON.parse(event.data));
 }
 
-function handleArgumentsTimeout() {
-    if (global.argumentsReceived)
-        return;
-    var args = {
-        dayLabels : ["d1", "d2", "d3", "d4", "d5", "d6", "d7"],
-        todayLabel : "Today",
-        clearLabel : "Clear",
-        cancelLabel : "Cancel",
-        currentValue : "",
-        weekStartDay : 0,
-        step : CalendarPicker.DefaultStepScaleFactor,
-        stepBase: CalendarPicker.DefaultStepBase
-    };
-    initialize(args);
-}
-
 /**
- * @param {!Object} config
- * @return {?string} An error message, or null if the argument has no errors.
- */
-CalendarPicker.validateConfig = function(config) {
-    if (!config.dayLabels)
-        return "No dayLabels.";
-    if (config.dayLabels.length != 7)
-        return "dayLabels is not an array with 7 elements.";
-    if (!config.clearLabel)
-        return "No clearLabel.";
-    if (!config.todayLabel)
-        return "No todayLabel.";
-    if (config.weekStartDay) {
-        if (config.weekStartDay < 0 || config.weekStartDay > 6)
-            return "Invalid weekStartDay: " + config.weekStartDay;
+ * @param {!Object} params
+ */
+function setGlobalParams(params) {
+    var name;
+    for (name in global.params) {
+        if (typeof params[name] === "undefined")
+            console.warn("Missing argument: " + name);
     }
-    return null;
-}
+    for (name in params) {
+        global.params[name] = params[name];
+    }
+};
 
 /**
  * @param {!Object} args
  */
 function initialize(args) { 
-    global.params = args;
-    var errorString = CalendarPicker.validateConfig(args);
-    if (args.suggestionValues)
-        errorString = errorString || SuggestionPicker.validateConfig(args)
-    if (errorString) {
-        var main = $("main");
-        main.textContent = "Internal error: " + errorString;
-        resizeWindow(main.offsetWidth, main.offsetHeight);
-    } else {
-        if (global.params.suggestionValues && global.params.suggestionValues.length)
-            openSuggestionPicker();
-        else
-            openCalendarPicker();
-    }
+    setGlobalParams(args);
+    if (global.params.suggestionValues && global.params.suggestionValues.length)
+        openSuggestionPicker();
+    else
+        openCalendarPicker();
 }
 
 function closePicker() {
@@ -879,7 +817,8 @@ function openSuggestionPicker() {
 
 function openCalendarPicker() {
     closePicker();
-    global.picker = new CalendarPicker($("main"), global.params);
+    global.picker = new CalendarPicker(global.params.mode, global.params);
+    global.picker.attachTo($("main"));
 };
 
 /**
@@ -2715,9 +2654,9 @@ CalendarHeaderView.prototype.onCurrentMonthChanged = function() {
 
 CalendarHeaderView.prototype.onNavigationButtonClick = function(sender) {
     if (sender === this._previousMonthButton)
-        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().previous(), CalendarPicker.NavigationBehaviour.WithAnimation);
+        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().previous(), CalendarPicker.NavigationBehavior.WithAnimation);
     else if (sender === this._nextMonthButton)
-        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().next(), CalendarPicker.NavigationBehaviour.WithAnimation);
+        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().next(), CalendarPicker.NavigationBehavior.WithAnimation);
     else
         this.calendarPicker.selectRangeContainingDay(Day.createFromToday());
 };
@@ -3280,1066 +3219,390 @@ CalendarTableView.prototype.throwAwayWeekNumberCell = function(weekNumberCell) {
 
 /**
  * @constructor
- * @param {!Element} element
+ * @extends View
  * @param {!Object} config
  */
-function CalendarPicker(element, config) {
-    Picker.call(this, element, config);
-    if (this._config.mode === "month") {
-        this.selectionConstructor = Month;
-        this._daysTable = new MonthPickerDaysTable(this);
-        this._element.classList.add(ClassNames.MonthMode);
-    } else if (this._config.mode === "week") {
-        this.selectionConstructor = Week;
-        this._daysTable = new WeekPickerDaysTable(this);
-        this._element.classList.add(ClassNames.WeekMode);
-    } else {
-        this.selectionConstructor = Day;
-        this._daysTable = new DaysTable(this);
-    }
-    this._element.classList.add("calendar-picker");
-    this._element.classList.add("preparing");
-    this.isPreparing = true;
-    this._handleWindowResizeBound = this._handleWindowResize.bind(this);
-    window.addEventListener("resize", this._handleWindowResizeBound, false);
-    // We assume this._config.min/max are valid dates or months.
-    var minimum = (typeof this._config.min !== "undefined") ? parseDateString(this._config.min) : this.selectionConstructor.Minimum;
-    var maximum = (typeof this._config.max !== "undefined") ? parseDateString(this._config.max) : this.selectionConstructor.Maximum;
-    this._minimumValue = minimum.valueOf();
-    this._maximumValue = maximum.valueOf();
-    this.step = (typeof this._config.step !== undefined) ? Number(this._config.step) : this.selectionConstructor.DefaultStep;
-    this.stepBase = (typeof this._config.stepBase !== "undefined") ? Number(this._config.stepBase) : this.selectionConstructor.DefaultStepBase;
-    this._minimumMonth = Month.createFromDate(minimum.startDate());
-    this.maximumMonth = Month.createFromDate(maximum.startDate());
-    this._currentMonth = new Month(NaN, NaN);
-    this._yearMonthController = new YearMonthController(this);
-    this._hadKeyEvent = false;
-    this._layout();
-    var initialSelection = parseDateString(this._config.currentValue);
-    if (!initialSelection)
-        initialSelection = this.selectionConstructor.createFromToday();
-    if (initialSelection.valueOf() < this._minimumValue)
-        initialSelection = new this.selectionConstructor.createFromValue(this._minimumValue);
-    else if (initialSelection.valueOf() > this._maximumValue)
-        initialSelection = new this.selectionConstructor.createFromValue(this._maximumValue);
-    this.showMonth(Month.createFromDate(initialSelection.startDate()));
-    this._daysTable.selectRangeAndShowEntireRange(initialSelection);
-    this.fixWindowSize();
-    this._handleBodyKeyDownBound = this._handleBodyKeyDown.bind(this);
-    document.body.addEventListener("keydown", this._handleBodyKeyDownBound, false);
-    this.recordAction(CalendarPicker.Action.Opened);
-}
-CalendarPicker.prototype = Object.create(Picker.prototype);
-
-CalendarPicker.NavigationBehaviour = {
-    None: 0,
-    Animate: 1 << 0,
-    KeepSelectionPosition: 1 << 1
-};
-
-CalendarPicker.Action = {
-    Opened:                     0,
-    ClickedTodayButton:         1,
-    ClickedClearButton:         2,
-    ClickedDay:                 3,
-    ClickedForwardMonthButton:  4,
-    ClickedForwardYearButton:   5,
-    ClickedBackwardMonthButton: 6,
-    ClickedBackwardYearButton:  7,
-    OpenedMonthPopup:           8,
-    UsedMonthPopup:             9
-};
-
-CalendarPicker.prototype._handleWindowResize = function() {
-    this._element.classList.remove("preparing");
-    this.isPreparing = false;
-};
-
-CalendarPicker.prototype.cleanup = function() {
-    document.body.removeEventListener("keydown", this._handleBodyKeyDownBound, false);
-};
-
-CalendarPicker.prototype._layout = function() {
-    if (this._config.isLocaleRTL)
-        this._element.classList.add("rtl");
-    this._yearMonthController.attachTo(this._element);
-    this._daysTable.attachTo(this._element);
-    this._layoutButtons();
-    // DaysTable will have focus but we don't want to show its focus ring until the first key event.
-    this._element.classList.add(ClassNames.NoFocusRing);
-};
-
-CalendarPicker.prototype.recordAction = function(action) {
-    window.pagePopupController.histogramEnumeration("CalendarPicker.Action", action, Object.keys(CalendarPicker.Action).length - 1);
-};
-
-CalendarPicker.prototype.handleToday = function() {
-    this.recordAction(CalendarPicker.Action.ClickedTodayButton);
-    var today = this.selectionConstructor.createFromToday();
-    this._daysTable.selectRangeAndShowEntireRange(today);
-    this.submitValue(today.toString());
-};
-
-CalendarPicker.prototype.handleClear = function() {
-    this.recordAction(CalendarPicker.Action.ClickedClearButton);
-    this.submitValue("");
-};
-
-CalendarPicker.prototype.fixWindowSize = function() {
-    var yearMonthRightElement = this._element.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
-    var daysAreaElement = this._element.getElementsByClassName(ClassNames.DaysArea)[0];
-    var todayClearArea = this._element.getElementsByClassName(ClassNames.TodayClearArea)[0];
-    var headers = daysAreaElement.getElementsByClassName(ClassNames.DayLabel);
-    var maxCellWidth = 0;
-    for (var i = 1; i < headers.length; ++i) {
-        if (maxCellWidth < headers[i].offsetWidth)
-            maxCellWidth = headers[i].offsetWidth;
-    }
-    var weekColumnWidth = headers[0].offsetWidth;
-    if (maxCellWidth > weekColumnWidth)
-        weekColumnWidth = maxCellWidth;
-    headers[0].style.width = weekColumnWidth + "px";
-    var DaysAreaContainerBorder = 1;
-    var yearMonthEnd;
-    var daysAreaEnd;
-    var todayClearAreaEnd;
-    if (global.params.isLocaleRTL) {
-        var startOffset = this._element.offsetLeft + this._element.offsetWidth;
-        yearMonthEnd = startOffset - yearMonthRightElement.offsetLeft;
-        daysAreaEnd = startOffset - (daysAreaElement.offsetLeft + daysAreaElement.offsetWidth) + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
-        todayClearAreaEnd = startOffset - todayClearArea.offsetLeft;
-    } else {
-        yearMonthEnd = yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth;
-        daysAreaEnd = daysAreaElement.offsetLeft + weekColumnWidth + maxCellWidth * 7 + DaysAreaContainerBorder;
-        todayClearAreaEnd = todayClearArea.offsetLeft + todayClearArea.offsetWidth;
-    }
-    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd, todayClearAreaEnd);
-    var MainPadding = 10; // FIXME: Fix name.
-    var MainBorder = 1;
-    var desiredBodyWidth = maxEnd + MainPadding + MainBorder * 2;
-
-    var elementHeight = this._element.offsetHeight;
-    this._element.style.width = "auto";
-    daysAreaElement.style.width = "100%";
-    daysAreaElement.style.tableLayout = "fixed";
-    todayClearArea.style.display = "block";
-    this._element.getElementsByClassName(ClassNames.YearMonthUpper)[0].style.display = "-webkit-box";
-    this._element.getElementsByClassName(ClassNames.MonthSelectorBox)[0].style.display = "block";
-    resizeWindow(desiredBodyWidth, elementHeight);
-};
-
-CalendarPicker.prototype._layoutButtons = function() {
-    var container = createElement("div", ClassNames.TodayClearArea);
-    this.today = createElement("input", ClassNames.TodayButton);
-    this.today.disabled = !this.isValidDate(this.selectionConstructor.createFromToday());
-    this.today.type = "button";
-    this.today.value = this._config.todayLabel;
-    this.today.addEventListener("click", this.handleToday.bind(this), false);
-    container.appendChild(this.today);
-    this.clear = null;
-    if (!this._config.required) {
-        this.clear = createElement("input", ClassNames.ClearButton);
-        this.clear.type = "button";
-        this.clear.value = this._config.clearLabel;
-        this.clear.addEventListener("click", this.handleClear.bind(this), false);
-        container.appendChild(this.clear);
-    }
-    this._element.appendChild(container);
-
-    this.lastFocusableControl = this.clear || this.today;
-};
-
-/**
- * @param {!Month} month
- * @return {!bool}
- */
-CalendarPicker.prototype.shouldShowMonth = function(month) {
-    return this._minimumMonth.valueOf() <= month.valueOf() && this.maximumMonth.valueOf() >= month.valueOf();
-};
-
-/**
- * @param {!Month} month
- * @param {!CalendarPicker.NavigationBehaviour=} navigationBehaviour
- */
-CalendarPicker.prototype.showMonth = function(month, navigationBehaviour) {
-    if (this._currentMonth.equals(month))
-        return;
-    else if (month.valueOf() < this._minimumMonth.valueOf())
-        month = this._minimumMonth;
-    else if (month.valueOf() > this.maximumMonth.valueOf())
-        month = this.maximumMonth;
-    this._yearMonthController.setMonth(month);
-    this._daysTable.navigateToMonth(month, navigationBehaviour || CalendarPicker.NavigationBehaviour.None);
-    this._currentMonth = month;
-};
+function CalendarPicker(type, config) {
+    View.call(this, createElement("div", CalendarPicker.ClassNameCalendarPicker));
+    this.element.classList.add(CalendarPicker.ClassNamePreparing);
 
-/**
- * @return {!Month}
- */
-CalendarPicker.prototype.currentMonth = function() {
-    return this._currentMonth;
-};
+    /**
+     * @type {!string}
+     * @const
+     */
+    this.type = type;
+    if (this.type === "week")
+        this._dateTypeConstructor = Week;
+    else if (this.type === "month")
+        this._dateTypeConstructor = Month;
+    else
+        this._dateTypeConstructor = Day;
+    /**
+     * @type {!Object}
+     * @const
+     */
+    this.config = {};
+    this._setConfig(config);
+    /**
+     * @type {!Month}
+     * @const
+     */
+    this.minimumMonth = Month.createFromDay(this.config.minimum.firstDay());
+    /**
+     * @type {!Month}
+     * @const
+     */
+    this.maximumMonth = Month.createFromDay(this.config.maximum.lastDay());
+    if (global.params.isLocaleRTL)
+        this.element.classList.add("rtl");
+    /**
+     * @type {!CalendarTableView}
+     * @const
+     */
+    this.calendarTableView = new CalendarTableView(this);
+    this.calendarTableView.hasNumberColumn = this.type === "week";
+    /**
+     * @type {!CalendarHeaderView}
+     * @const
+     */
+    this.calendarHeaderView = new CalendarHeaderView(this);
+    this.calendarHeaderView.monthPopupButton.on(MonthPopupButton.EventTypeButtonClick, this.onMonthPopupButtonClick);
+    /**
+     * @type {!MonthPopupView}
+     * @const
+     */
+    this.monthPopupView = new MonthPopupView(this.minimumMonth, this.maximumMonth);
+    this.monthPopupView.yearListView.on(YearListView.EventTypeYearListViewDidSelectMonth, this.onYearListViewDidSelectMonth);
+    this.monthPopupView.yearListView.on(YearListView.EventTypeYearListViewDidHide, this.onYearListViewDidHide);
+    this.calendarHeaderView.attachTo(this);
+    this.calendarTableView.attachTo(this);
+    /**
+     * @type {!Month}
+     * @protected
+     */
+    this._currentMonth = new Month(NaN, NaN);
+    /**
+     * @type {?DateType}
+     * @protected
+     */
+    this._selection = null;
+    /**
+     * @type {?DateType}
+     * @protected
+     */
+    this._highlight = null;
+    this.calendarTableView.element.addEventListener("keydown", this.onCalendarTableKeyDown, false);
+    document.body.addEventListener("keydown", this.onBodyKeyDown, false);
 
-// ----------------------------------------------------------------
+    window.addEventListener("resize", this.onWindowResize, false);
 
-/**
- * @constructor
- * @param {!CalendarPicker} picker
- */
-function YearMonthController(picker) {
-    this.picker = picker;
+    /**
+     * @type {!number}
+     * @protected
+     */
+    this._height = -1;
+
+    var initialSelection = parseDateString(config.currentValue);
+    if (initialSelection) {
+        this.setCurrentMonth(Month.createFromDay(initialSelection.middleDay()), false);
+        this.setSelection(initialSelection);
+    } else
+        this.setCurrentMonth(Month.createFromToday(), false);
 }
 
-YearMonthController.LeftPointingTriangle = "<svg width='4' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /></svg>";
-YearMonthController.LeftPointingDoubleTriangle = "<svg width='9' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /><polygon points='5,3.5 9,7 9,0' style='fill:#6e6e6e;' /></svg>";
-YearMonthController.RightPointingTriangle = "<svg width='4' height='7'><polygon points='0,7 0,0, 4,3.5' style='fill:#6e6e6e;' /></svg>";
-YearMonthController.RightPointingDoubleTriangle = "<svg width='9' height='7'><polygon points='4,3.5 0,7 0,0' style='fill:#6e6e6e;' /><polygon points='9,3.5 5,7 5,0' style='fill:#6e6e6e;' /></svg>";
-
-/**
- * @param {!Element} element
- */
-YearMonthController.prototype.attachTo = function(element) {
-    var outerContainer = createElement("div", ClassNames.YearMonthArea);
-
-    var innerContainer = createElement("div", ClassNames.YearMonthUpper);
-    outerContainer.appendChild(innerContainer);
-
-    this._attachLeftButtonsTo(innerContainer);
-
-    var box = createElement("div", ClassNames.MonthSelectorBox);
-    innerContainer.appendChild(box);
-    // We can't use <select> popup in PagePopup.
-    this._monthPopup = createElement("div", ClassNames.MonthSelectorPopup);
-    this._monthPopup.addEventListener("click", this._handleYearMonthChange.bind(this), false);
-    this._monthPopup.addEventListener("keydown", this._handleMonthPopupKey.bind(this), false);
-    this._monthPopup.addEventListener("mousemove", this._handleMouseMove.bind(this), false);
-    this._updateSelectionOnMouseMove = true;
-    this._monthPopup.tabIndex = 0;
-    this._monthPopupContents = createElement("div", ClassNames.MonthSelectorPopupContents);
-    this._monthPopup.appendChild(this._monthPopupContents);
-    box.appendChild(this._monthPopup);
-    this._month = createElement("div", ClassNames.MonthSelector);
-    this._monthLabel = createElement("span");
-    this._month.appendChild(this._monthLabel);
-    var disclosureTriangle = createElement("span");
-    disclosureTriangle.innerHTML = "<svg width='7' height='5'><polygon points='0,1 7,1 3.5,5' style='fill:#000000;' /></svg>";
-    this._month.appendChild(disclosureTriangle);
-    this._month.addEventListener("click", this._showPopup.bind(this), false);
-    box.appendChild(this._month);
-
-    this._attachRightButtonsTo(innerContainer);
-    element.appendChild(outerContainer);
-
-    this._wall = createElement("div", ClassNames.MonthSelectorWall);
-    this._wall.addEventListener("click", this._closePopup.bind(this), false);
-    element.appendChild(this._wall);
-
-    var month = this.picker.maximumMonth;
-    var maxWidth = 0;
-    for (var m = 0; m < 12; ++m) {
-        this._monthLabel.textContent = month.toLocaleString();
-        maxWidth = Math.max(maxWidth, this._month.offsetWidth);
-        month = month.previous();
-    }
-    if (getLanguage() == "ja" && ImperialEraLimit < this.picker.maximumMonth.year) {
-        for (var m = 0; m < 12; ++m) {
-            this._monthLabel.textContent = new Month(ImperialEraLimit, m).toLocaleString();
-            maxWidth = Math.max(maxWidth, this._month.offsetWidth);
-        }
-    }
-    this._month.style.minWidth = maxWidth + 'px';
-
-    this.picker.firstFocusableControl = this._left2; // FIXME: Should it be this.month?
-};
+CalendarPicker.prototype = Object.create(View.prototype);
 
-YearMonthController.addTenYearsButtons = false;
+CalendarPicker.Padding = 10;
+CalendarPicker.BorderWidth = 1;
+CalendarPicker.ClassNameCalendarPicker = "calendar-picker";
+CalendarPicker.ClassNamePreparing = "preparing";
+CalendarPicker.EventTypeCurrentMonthChanged = "currentMonthChanged";
 
 /**
- * @param {!Element} parent
+ * @param {!Event} event
  */
-YearMonthController.prototype._attachLeftButtonsTo = function(parent) {
-    var container = createElement("div", ClassNames.YearMonthButtonLeft);
-    parent.appendChild(container);
-
-    if (YearMonthController.addTenYearsButtons) {
-        this._left3 = createElement("button", ClassNames.YearMonthButton);
-        this._left3.textContent = "<<<";
-        this._left3.addEventListener("click", this._handleButtonClick.bind(this), false);
-        container.appendChild(this._left3);
-    }
-
-    this._left2 = createElement("button", ClassNames.YearMonthButton);
-    this._left2.innerHTML = global.params.isLocaleRTL ? YearMonthController.RightPointingDoubleTriangle : YearMonthController.LeftPointingDoubleTriangle;
-    this._left2.addEventListener("click", this._handleButtonClick.bind(this), false);
-    container.appendChild(this._left2);
-
-    this._left1 = createElement("button", ClassNames.YearMonthButton);
-    this._left1.innerHTML = global.params.isLocaleRTL ? YearMonthController.RightPointingTriangle : YearMonthController.LeftPointingTriangle;
-    this._left1.addEventListener("click", this._handleButtonClick.bind(this), false);
-    container.appendChild(this._left1);
+CalendarPicker.prototype.onWindowResize = function(event) {
+    this.element.classList.remove(CalendarPicker.ClassNamePreparing);
+    window.removeEventListener("resize", this.onWindowResize, false);
 };
 
 /**
- * @param {!Element} parent
+ * @param {!YearListView} sender
  */
-YearMonthController.prototype._attachRightButtonsTo = function(parent) {
-    var container = createElement("div", ClassNames.YearMonthButtonRight);
-    parent.appendChild(container);
-    this._right1 = createElement("button", ClassNames.YearMonthButton);
-    this._right1.innerHTML = global.params.isLocaleRTL ? YearMonthController.LeftPointingTriangle : YearMonthController.RightPointingTriangle;
-    this._right1.addEventListener("click", this._handleButtonClick.bind(this), false);
-    container.appendChild(this._right1);
-
-    this._right2 = createElement("button", ClassNames.YearMonthButton);
-    this._right2.innerHTML = global.params.isLocaleRTL ? YearMonthController.LeftPointingDoubleTriangle : YearMonthController.RightPointingDoubleTriangle;
-    this._right2.addEventListener("click", this._handleButtonClick.bind(this), false);
-    container.appendChild(this._right2);
-
-    if (YearMonthController.addTenYearsButtons) {
-        this._right3 = createElement("button", ClassNames.YearMonthButton);
-        this._right3.textContent = ">>>";
-        this._right3.addEventListener("click", this._handleButtonClick.bind(this), false);
-        container.appendChild(this._right3);
-    }
+CalendarPicker.prototype.onYearListViewDidHide = function(sender) {
+    this.monthPopupView.hide();
+    this.calendarHeaderView.setDisabled(false);
+    this.adjustHeight();
 };
 
 /**
+ * @param {!YearListView} sender
  * @param {!Month} month
  */
-YearMonthController.prototype.setMonth = function(month) {
-    var monthValue = month.valueOf();
-    if (this._left3)
-        this._left3.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue - 13));
-    this._left2.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue - 2));
-    this._left1.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue - 1));
-    this._right1.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue + 1));
-    this._right2.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue + 2));
-    if (this._right3)
-        this._left3.disabled = !this.picker.shouldShowMonth(Month.createFromValue(monthValue + 13));
-    this._monthLabel.innerText = month.toLocaleString();
-    while (this._monthPopupContents.hasChildNodes())
-        this._monthPopupContents.removeChild(this._monthPopupContents.firstChild);
-
-    for (var m = monthValue - 6; m <= monthValue + 6; m++) {
-        var month = Month.createFromValue(m);
-        if (!this.picker.shouldShowMonth(month))
-            continue;
-        var option = createElement("div", ClassNames.MonthSelectorPopupEntry, month.toLocaleString());
-        option.dataset.value = month.toString();
-        this._monthPopupContents.appendChild(option);
-        if (m == monthValue)
-            option.classList.add(ClassNames.SelectedMonthYear);
-    }
-};
-
-YearMonthController.prototype._showPopup = function() {
-    this.picker.recordAction(CalendarPicker.Action.OpenedMonthPopup);
-    this._monthPopup.style.display = "block";
-    this._monthPopup.style.zIndex = "1000"; // Larger than the days area.
-    this._monthPopup.style.left = this._month.offsetLeft + (this._month.offsetWidth - this._monthPopup.offsetWidth) / 2 + "px";
-    this._monthPopup.style.top = this._month.offsetTop + this._month.offsetHeight + "px";
-
-    this._wall.style.display = "block";
-    this._wall.style.zIndex = "999"; // This should be smaller than the z-index of monthPopup.
-
-    var popupHeight = this._monthPopup.clientHeight;
-    var fullHeight = this._monthPopupContents.clientHeight;
-    if (fullHeight > popupHeight) {
-        var selected = this._getSelection();
-        if (selected) {
-           var bottom = selected.offsetTop + selected.clientHeight;
-           if (bottom > popupHeight)
-               this._monthPopup.scrollTop = bottom - popupHeight;
-        }
-        this._monthPopup.style.webkitPaddingEnd = getScrollbarWidth() + 'px';
-    }
-    this._monthPopup.focus();
-};
-
-YearMonthController.prototype._closePopup = function() {
-    this._monthPopup.style.display = "none";
-    this._wall.style.display = "none";
-    var container = document.querySelector("." + ClassNames.DaysAreaContainer);
-    container.focus();
+CalendarPicker.prototype.onYearListViewDidSelectMonth = function(sender, month) {
+    this.setCurrentMonth(month, false);
 };
 
 /**
- * @return {Element} Selected element in the month-year popup.
- */
-YearMonthController.prototype._getSelection = function()
-{
-    return document.querySelector("." + ClassNames.SelectedMonthYear);
-}
-
-/**
- * @param {Event} event
- */
-YearMonthController.prototype._handleMouseMove = function(event)
-{
-    if (!this._updateSelectionOnMouseMove) {
-        // Selection update turned off while navigating with keyboard to prevent a mouse
-        // move trigged during a scroll from resetting the selection. Automatically
-        // rearm control to enable mouse-based selection.
-        this._updateSelectionOnMouseMove = true;
-    } else {
-        var target = event.target;
-        var selection = this._getSelection();
-        if (target && target != selection && target.classList.contains(ClassNames.MonthSelectorPopupEntry)) {
-            if (selection)
-                selection.classList.remove(ClassNames.SelectedMonthYear);
-            target.classList.add(ClassNames.SelectedMonthYear);
-        }
-    }
-    event.stopPropagation();
-    event.preventDefault();
-}
-
-/**
- * @param {Event} event
- */
-YearMonthController.prototype._handleMonthPopupKey = function(event)
-{
-    var key = event.keyIdentifier;
-    if (key == "Down") {
-        var selected = this._getSelection();
-        if (selected) {
-            var next = selected.nextSibling;
-            if (next) {
-                selected.classList.remove(ClassNames.SelectedMonthYear);
-                next.classList.add(ClassNames.SelectedMonthYear);
-                var bottom = next.offsetTop + next.clientHeight;
-                if (bottom > this._monthPopup.scrollTop + this._monthPopup.clientHeight) {
-                    this._updateSelectionOnMouseMove = false;
-                    this._monthPopup.scrollTop = bottom - this._monthPopup.clientHeight;
-                }
-            }
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    } else if (key == "Up") {
-        var selected = this._getSelection();
-        if (selected) {
-            var previous = selected.previousSibling;
-            if (previous) {
-                selected.classList.remove(ClassNames.SelectedMonthYear);
-                previous.classList.add(ClassNames.SelectedMonthYear);
-                if (previous.offsetTop < this._monthPopup.scrollTop) {
-                    this._updateSelectionOnMouseMove = false;
-                    this._monthPopup.scrollTop = previous.offsetTop;
-                }
-            }
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    } else if (key == "U+001B") {
-        this._closePopup();
-        event.stopPropagation();
-        event.preventDefault();
-    } else if (key == "Enter") {
-        this._handleYearMonthChange();
-        event.stopPropagation();
-        event.preventDefault();
-    }
-}
-
-YearMonthController.prototype._handleYearMonthChange = function() {
-    this.picker.recordAction(CalendarPicker.Action.UsedMonthPopup);
-    this._closePopup();
-    var selection = this._getSelection();
-    if (!selection)
-        return;
-    this.picker.showMonth(Month.parse(selection.dataset.value));
-};
-
-/**
- * @const
- * @type {number}
- */
-YearMonthController.PreviousTenYears = -120;
-/**
- * @const
- * @type {number}
- */
-YearMonthController.PreviousYear = -12;
-/**
- * @const
- * @type {number}
- */
-YearMonthController.PreviousMonth = -1;
-/**
- * @const
- * @type {number}
- */
-YearMonthController.NextMonth = 1;
-/**
- * @const
- * @type {number}
- */
-YearMonthController.NextYear = 12;
-/**
- * @const
- * @type {number}
- */
-YearMonthController.NextTenYears = 120;
-
-/**
- * @param {Event} event
- */
-YearMonthController.prototype._handleButtonClick = function(event) {
-    var button = enclosingNodeOrSelfWithClass(event.target, ClassNames.YearMonthButton);
-    if (button == this._left3)
-        this.moveRelatively(YearMonthController.PreviousTenYears);
-    else if (button == this._left2) {
-        this.picker.recordAction(CalendarPicker.Action.ClickedBackwardYearButton);
-        this.moveRelatively(YearMonthController.PreviousYear);
-    } else if (button == this._left1) {
-        this.picker.recordAction(CalendarPicker.Action.ClickedBackwardMonthButton);
-        this.moveRelatively(YearMonthController.PreviousMonth);
-    } else if (button == this._right1) {
-        this.picker.recordAction(CalendarPicker.Action.ClickedForwardMonthButton);
-        this.moveRelatively(YearMonthController.NextMonth)
-    } else if (button == this._right2) {
-        this.picker.recordAction(CalendarPicker.Action.ClickedForwardYearButton);
-        this.moveRelatively(YearMonthController.NextYear);
-    } else if (button == this._right3)
-        this.moveRelatively(YearMonthController.NextTenYears);
-    else
-        return;
-};
-
-/**
- * @param {!number} amount
+ * @param {!View|Node} parent
+ * @param {?View|Node=} before
+ * @override
  */
-YearMonthController.prototype.moveRelatively = function(amount) {
-    var current = this.picker.currentMonth().valueOf();
-    var updated = Month.createFromValue(current + amount);
-    this.picker.showMonth(updated, CalendarPicker.NavigationBehaviour.Animate | CalendarPicker.NavigationBehaviour.KeepSelectionPosition);
+CalendarPicker.prototype.attachTo = function(parent, before) {
+    View.prototype.attachTo.call(this, parent, before);
+    this.calendarTableView.element.focus();
 };
 
-// ----------------------------------------------------------------
-
-/**
- * @constructor
- * @param {!CalendarPicker} picker
- */
-function DaysTable(picker) {
-    this.picker = picker;
-}
-
-/**
- * @return {!boolean}
- */
-DaysTable.prototype._hasSelection = function() {
-    return !!this._firstNodeInSelectedRange();
-}
-
-/**
- * The number of week lines in the screen.
- * @const
- * @type {number}
- */
-DaysTable._Weeks = 6;
-
-/**
- * @param {!Element} element
- */
-DaysTable.prototype.attachTo = function(element) {
-    this._daysContainer = createElement("table", ClassNames.DaysArea);
-    this._daysContainer.addEventListener("click", this._handleDayClick.bind(this), false);
-    this._daysContainer.addEventListener("mouseover", this._handleMouseOver.bind(this), false);
-    this._daysContainer.addEventListener("mouseout", this._handleMouseOut.bind(this), false);
-    this._daysContainer.addEventListener("webkitTransitionEnd", this._moveInDays.bind(this), false);
-    var container = createElement("tr", ClassNames.DayLabelContainer);
-    var weekStartDay = global.params.weekStartDay || 0;
-    container.appendChild(createElement("th", ClassNames.DayLabel + " " + ClassNames.WeekColumn, global.params.weekLabel));
-    for (var i = 0; i < 7; i++)
-        container.appendChild(createElement("th", ClassNames.DayLabel, global.params.dayLabels[(weekStartDay + i) % 7]));
-    this._daysContainer.appendChild(container);
-    this._days = [];
-    this._weekNumbers = [];
-    for (var w = 0; w < DaysTable._Weeks; w++) {
-        container = createElement("tr", ClassNames.WeekContainer);
-        var week = [];
-        var weekNumberNode = createElement("td", ClassNames.Day + " " + ClassNames.WeekColumn, " ");
-        weekNumberNode.dataset.positionX = -1;
-        weekNumberNode.dataset.positionY = w;
-        this._weekNumbers.push(weekNumberNode);
-        container.appendChild(weekNumberNode);
-        for (var d = 0; d < 7; d++) {
-            var day = createElement("td", ClassNames.Day, " ");
-            day.setAttribute("data-position-x", String(d));
-            day.setAttribute("data-position-y", String(w));
-            week.push(day);
-            container.appendChild(day);
-        }
-        this._days.push(week);
-        this._daysContainer.appendChild(container);
-    }
-    container = createElement("div", ClassNames.DaysAreaContainer);
-    container.appendChild(this._daysContainer);
-    container.tabIndex = 0;
-    container.addEventListener("keydown", this._handleKey.bind(this), false);
-    element.appendChild(container);
-
-    container.focus();
+CalendarPicker.prototype.cleanup = function() {
+    window.removeEventListener("resize", this.onWindowResize, false);
+    this.calendarTableView.element.removeEventListener("keydown", this.onBodyKeyDown, false);
+    // Month popup view might be attached to document.body.
+    this.monthPopupView.hide();
 };
 
 /**
- * @param {!number} value
- * @return {!boolean}
- */
-CalendarPicker.prototype._stepMismatch = function(value) {
-    var nextAllowedValue = Math.ceil((value - this.stepBase) / this.step) * this.step + this.stepBase;
-    return nextAllowedValue >= value + this.selectionConstructor.DefaultStep
-}
-
-/**
- * @param {!number} value
- * @return {!boolean}
- */
-CalendarPicker.prototype._outOfRange = function(value) {
-    return value < this._minimumValue || value > this._maximumValue;
-}
-
-/**
- * @param {!Month|Day} range
- * @return {!boolean}
- */
-CalendarPicker.prototype.isValidDate = function(range) {
-    var value = range.valueOf();
-    return !this._outOfRange(value) && !this._stepMismatch(value);
-}
-
-/**
- * @param {!Month} month
+ * @param {?MonthPopupButton} sender
  */
-DaysTable.prototype._renderMonth = function(month) {
-    var dayIterator = month.startDate();
-    var monthStartDay = dayIterator.getUTCDay();
-    var weekStartDay = global.params.weekStartDay || 0;
-    var startOffset = weekStartDay - monthStartDay;
-    if (startOffset >= 0)
-        startOffset -= 7;
-    dayIterator.setUTCDate(startOffset + 1);
-    var mondayOffset = (8 - weekStartDay) % 7;
-    var sundayOffset = weekStartDay % 7;
-    for (var w = 0; w < DaysTable._Weeks; w++) {
-        for (var d = 0; d < 7; d++) {
-            var iterMonth = Month.createFromDate(dayIterator);
-            var iterWeek = Week.createFromDate(dayIterator);
-            var time = dayIterator.getTime();
-            var element = this._days[w][d];
-            element.innerText = localizeNumber(dayIterator.getUTCDate());
-            element.className = ClassNames.Day;
-            element.dataset.submitValue = Day.createFromDate(dayIterator).toString();
-            element.dataset.weekValue = iterWeek.toString();
-            element.dataset.monthValue = iterMonth.toString();
-            if (isNaN(time)) {
-                element.innerText = "-";
-                element.classList.add(ClassNames.Unavailable);
-            } else if (!this.picker.isValidDate(this._rangeForNode(element)))
-                element.classList.add(ClassNames.Unavailable);
-            else if (!iterMonth.equals(month)) {
-                element.classList.add(ClassNames.Available);
-                element.classList.add(ClassNames.NotThisMonth);
-            } else
-                element.classList.add(ClassNames.Available);
-            if (d === mondayOffset) {
-                element.classList.add(ClassNames.Monday);
-                if (this._weekNumbers[w]) {
-                    this._weekNumbers[w].dataset.weekValue = iterWeek.toString();
-                    this._weekNumbers[w].innerText = localizeNumber(iterWeek.week);
-                    if (element.classList.contains(ClassNames.Available))
-                        this._weekNumbers[w].classList.add(ClassNames.Available);
-                    else
-                        this._weekNumbers[w].classList.add(ClassNames.Unavailable);
-                }
-            } else if (d === sundayOffset)
-                element.classList.add(ClassNames.Sunday);
-            dayIterator.setUTCDate(dayIterator.getUTCDate() + 1);
-        }
-    }
+CalendarPicker.prototype.onMonthPopupButtonClick = function(sender) {
+    var clientRect = this.calendarTableView.element.getBoundingClientRect();
+    var calendarTableRect = new Rectangle(clientRect.left + document.body.scrollLeft, clientRect.top + document.body.scrollTop, clientRect.width, clientRect.height);
+    this.monthPopupView.show(this.currentMonth(), calendarTableRect);
+    this.calendarHeaderView.setDisabled(true);
+    this.adjustHeight();
 };
 
-/**
- * @param {!Month} month
- * @param {!CalendarPicker.NavigationBehaviour} navigationBehaviour
- */
-DaysTable.prototype.navigateToMonth = function(month, navigationBehaviour) {
-    var firstNodeInSelectedRange = this._firstNodeInSelectedRange();
-    if (navigationBehaviour & CalendarPicker.NavigationBehaviour.Animate)
-        this._startMoveInAnimation(month);
-    this._renderMonth(month);
-    if (navigationBehaviour & CalendarPicker.NavigationBehaviour.KeepSelectionPosition && firstNodeInSelectedRange) {
-        var x = parseInt(firstNodeInSelectedRange.dataset.positionX, 10);
-        var y = parseInt(firstNodeInSelectedRange.dataset.positionY, 10);
-        this._selectRangeAtPosition(x, y);
-    }
+CalendarPicker.prototype._setConfig = function(config) {
+    this.config.minimum = (typeof config.min !== "undefined" && config.min) ? parseDateString(config.min) : this._dateTypeConstructor.Minimum;
+    this.config.maximum = (typeof config.max !== "undefined" && config.max) ? parseDateString(config.max) : this._dateTypeConstructor.Maximum;
+    this.config.minimumValue = this.config.minimum.valueOf();
+    this.config.maximumValue = this.config.maximum.valueOf();
+    this.config.step = (typeof config.step !== undefined) ? Number(config.step) : this._dateTypeConstructor.DefaultStep;
+    this.config.stepBase = (typeof config.stepBase !== "undefined") ? Number(config.stepBase) : this._dateTypeConstructor.DefaultStepBase;
 };
 
 /**
- * @param {!Month} month
- */
-DaysTable.prototype._startMoveInAnimation = function(month) {
-    if (this.picker.isPreparing)
-        return;
-    var daysStyle = this._daysContainer.style;
-    daysStyle.position = "relative";
-    daysStyle.webkitTransition = "left 0.1s ease";
-    daysStyle.left = (this.picker.currentMonth().valueOf() > month.valueOf() ? "" : "-") + this._daysContainer.offsetWidth + "px";
-};
-
-DaysTable.prototype._moveInDays = function() {
-    var daysStyle = this._daysContainer.style;
-    if (daysStyle.left == "0px")
-        return;
-    daysStyle.webkitTransition = "";
-    daysStyle.left = (daysStyle.left.charAt(0) == "-" ? "" : "-") + this._daysContainer.offsetWidth + "px";
-    this._daysContainer.offsetLeft; // Force to layout.
-    daysStyle.webkitTransition = "left 0.1s ease";
-    daysStyle.left = "0px";
-};
-
-/**
- * @param {!Day} day
- */
-DaysTable.prototype._markRangeAsSelected = function(day) {
-    var dateString = day.toString();
-    for (var w = 0; w < DaysTable._Weeks; w++) {
-        for (var d = 0; d < 7; d++) {
-            if (this._days[w][d].dataset.submitValue == dateString) {
-                this._days[w][d].classList.add(ClassNames.Selected);
-                break;
-            }
-        }
-    }
-};
-
-/**
- * @param {!Day} day
+ * @return {!Month}
  */
-DaysTable.prototype.selectRange = function(day) {
-    this._deselect();
-    if (this.startDate() > day.startDate() || this.endDate() < day.endDate())
-        this.picker.showMonth(Month.createFromDate(day.startDate()), CalendarPicker.NavigationBehaviour.Animate);
-    this._markRangeAsSelected(day);
+CalendarPicker.prototype.currentMonth = function() {
+    return this._currentMonth;
 };
 
 /**
- * @param {!Day} day
+ * @enum {number}
  */
-DaysTable.prototype.selectRangeAndShowEntireRange = function(day) {
-    this.selectRange(day);
+CalendarPicker.NavigationBehavior = {
+    None: 0,
+    WithAnimation: 1
 };
 
 /**
- * @param {!Element} dayNode
+ * @param {!Month} month
+ * @param {!CalendarPicker.NavigationBehavior} animate
  */
-DaysTable.prototype._selectRangeContainingNode = function(dayNode) {
-    var range = this._rangeForNode(dayNode);
-    if (!range)
+CalendarPicker.prototype.setCurrentMonth = function(month, behavior) {
+    if (month > this.maximumMonth)
+        month = this.maximumMonth;
+    else if (month < this.minimumMonth)
+        month = this.minimumMonth;
+    if (this._currentMonth.equals(month))
         return;
-    this.selectRange(range);
+    this._currentMonth = month;
+    this.calendarTableView.scrollToMonth(this._currentMonth, behavior === CalendarPicker.NavigationBehavior.WithAnimation);
+    this.adjustHeight();
+    this.calendarTableView.setNeedsUpdateCells(true);
+    this.dispatchEvent(CalendarPicker.EventTypeCurrentMonthChanged, {
+        target: this
+    });
 };
 
-/**
- * @param {!Element} dayNode
- * @return {?Day}
- */
-DaysTable.prototype._rangeForNode = function(dayNode) {
-    if (!dayNode)
-        return null;
-    return Day.parse(dayNode.dataset.submitValue);
+CalendarPicker.prototype.adjustHeight = function() {
+    var rowForFirstDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.firstDay()).row;
+    var rowForLastDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.lastDay()).row;
+    var numberOfRows = rowForLastDayInMonth - rowForFirstDayInMonth + 1;
+    var calendarTableViewHeight = CalendarTableHeaderView.Height + numberOfRows * DayCell.Height + CalendarTableView.BorderWidth * 2;
+    var height = (this.monthPopupView.isVisible ? YearListView.Height : calendarTableViewHeight) + CalendarHeaderView.Height + CalendarHeaderView.BottomMargin + CalendarPicker.Padding * 2 + CalendarPicker.BorderWidth * 2;
+    this.setHeight(height);
 };
 
-/**
- * @return {!Date}
- */
-DaysTable.prototype.startDate = function() {
-    return Day.parse(this._days[0][0].dataset.submitValue).startDate();
+CalendarPicker.prototype.selection = function() {
+    return this._selection;
 };
 
-/**
- * @return {!Date}
- */
-DaysTable.prototype.endDate = function() {
-    return Day.parse(this._days[DaysTable._Weeks - 1][7 - 1].dataset.submitValue).endDate();
+CalendarPicker.prototype.highlight = function() {
+    return this._highlight;
 };
 
 /**
- * @param {!number} x
- * @param {!number} y
+ * @return {!Day}
  */
-DaysTable.prototype._selectRangeAtPosition = function(x, y) {
-    var node = x === -1 ? this._weekNumbers[y] : this._days[y][x];
-    this._selectRangeContainingNode(node);
+CalendarPicker.prototype.firstVisibleDay = function() {
+    var firstVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().firstDay()).row;
+    var firstVisibleDay = this.calendarTableView.dayAtColumnAndRow(0, firstVisibleRow);
+    if (!firstVisibleDay)
+        firstVisibleDay = Day.Minimum;
+    return firstVisibleDay;
 };
 
 /**
- * @return {!Element}
+ * @return {!Day}
  */
-DaysTable.prototype._firstNodeInSelectedRange = function() {
-    return this._daysContainer.getElementsByClassName(ClassNames.Selected)[0];
-};
-
-DaysTable.prototype._deselect = function() {
-    var selectedNodes = this._daysContainer.getElementsByClassName(ClassNames.Selected);
-    for (var node = selectedNodes[0]; node; node = selectedNodes[0])
-        node.classList.remove(ClassNames.Selected);
+CalendarPicker.prototype.lastVisibleDay = function() { 
+    var lastVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().lastDay()).row;
+    var lastVisibleDay = this.calendarTableView.dayAtColumnAndRow(DaysPerWeek - 1, lastVisibleRow);
+    if (!lastVisibleDay)
+        lastVisibleDay = Day.Maximum;
+    return lastVisibleDay;
 };
 
 /**
- * @param {!CalendarPicker.NavigationBehaviour=} navigationBehaviour
- * @return {!boolean}
+ * @param {?Day} day
  */
-DaysTable.prototype._maybeSetPreviousMonth = function(navigationBehaviour) {
-    if (typeof navigationBehaviour === "undefined")
-        navigationBehaviour = CalendarPicker.NavigationBehaviour.Animate;
-    var previousMonth = this.picker.currentMonth().previous();
-    if (!this.picker.shouldShowMonth(previousMonth))
-        return false;
-    this.picker.showMonth(previousMonth, navigationBehaviour);
-    return true;
+CalendarPicker.prototype.selectRangeContainingDay = function(day) {
+    var selection = day ? this._dateTypeConstructor.createFromDay(day) : null;
+    this.setSelection(selection);
 };
 
 /**
- * @param {!CalendarPicker.NavigationBehaviour=} navigationBehaviour
- * @return {!boolean}
+ * @param {?Day} day
  */
-DaysTable.prototype._maybeSetNextMonth = function(navigationBehaviour) {
-    if (typeof navigationBehaviour === "undefined")
-        navigationBehaviour = CalendarPicker.NavigationBehaviour.Animate;
-    var nextMonth = this.picker.currentMonth().next();
-    if (!this.picker.shouldShowMonth(nextMonth))
-        return false;
-    this.picker.showMonth(nextMonth, navigationBehaviour);
-    return true;
+CalendarPicker.prototype.highlightRangeContainingDay = function(day) {
+    var highlight = day ? this._dateTypeConstructor.createFromDay(day) : null;
+    this._setHighlight(highlight);
 };
 
 /**
- * @param {Event} event
+ * @param {?DateType} dayOrWeekOrMonth
  */
-DaysTable.prototype._handleDayClick = function(event) {
-    this.picker.recordAction(CalendarPicker.Action.ClickedDay);
-    if (event.target.classList.contains(ClassNames.Available))
-        this.picker.submitValue(this._rangeForNode(event.target).toString());
-};
-
-/**
- * @param {Event} event
- */
-DaysTable.prototype._handleMouseOver = function(event) {
-    var node = event.target;
-    if (node.classList.contains(ClassNames.Selected))
+CalendarPicker.prototype.setSelection = function(dayOrWeekOrMonth) {
+    if (!this._selection && !dayOrWeekOrMonth)
         return;
-    this._selectRangeContainingNode(node);
-};
-
-/**
- * @param {Event} event
- */
-DaysTable.prototype._handleMouseOut = function(event) {
-    this._deselect();
-};
-
-/**
- * @param {Event} event
- */
-DaysTable.prototype._handleKey = function(event) {
-    this.picker.maybeUpdateFocusStyle();
-    var x = -1;
-    var y = -1;
-    var key = event.keyIdentifier;
-    var firstNodeInSelectedRange = this._firstNodeInSelectedRange();
-    if (firstNodeInSelectedRange) {
-        x = parseInt(firstNodeInSelectedRange.dataset.positionX, 10);
-        y = parseInt(firstNodeInSelectedRange.dataset.positionY, 10);
-    }
-    if (!this._hasSelection() && (key == "Left" || key == "Up" || key == "Right" || key == "Down")) {
-        // Put the selection on a center cell.
-        this.updateSelection(event, 3, Math.floor(DaysTable._Weeks / 2 - 1));
+    if (this._selection && this._selection.equals(dayOrWeekOrMonth))
         return;
-    }
-
-    if (key == (global.params.isLocaleRTL ? "Right" : "Left")) {
-        if (x == 0) {
-            if (y == 0) {
-                if (!this._maybeSetPreviousMonth())
-                    return;
-                y = DaysTable._Weeks - 1;
-            } else
-                y--;
-            x = 6;
-        } else
-            x--;
-        this.updateSelection(event, x, y);
-
-    } else if (key == "Up") {
-        if (y == 0) {
-            if (!this._maybeSetPreviousMonth())
-                return;
-            y = DaysTable._Weeks - 1;
-        } else
-            y--;
-        this.updateSelection(event, x, y);
-
-    } else if (key == (global.params.isLocaleRTL ? "Left" : "Right")) {
-        if (x == 6) {
-            if (y == DaysTable._Weeks - 1) {
-                if (!this._maybeSetNextMonth())
-                    return;
-                y = 0;
-            } else
-                y++;
-            x = 0;
-        } else
-            x++;
-        this.updateSelection(event, x, y);
-
-    } else if (key == "Down") {
-        if (y == DaysTable._Weeks - 1) {
-            if (!this._maybeSetNextMonth())
-                return;
-            y = 0;
-        } else
-            y++;
-        this.updateSelection(event, x, y);
-
-    } else if (key == "PageUp") {
-        if (!this._maybeSetPreviousMonth())
-            return;
-        this.updateSelection(event, x, y);
-
-    } else if (key == "PageDown") {
-        if (!this._maybeSetNextMonth())
-            return;
-        this.updateSelection(event, x, y);
-
-    } else if (this._hasSelection() && key == "Enter") {
-        var dayNode = this._days[y][x];
-        if (dayNode.classList.contains(ClassNames.Available)) {
-            this.picker.submitValue(dayNode.dataset.submitValue);
-            event.stopPropagation();
+    var firstDayInSelection = dayOrWeekOrMonth.firstDay();    
+    var lastDayInSelection = dayOrWeekOrMonth.lastDay();
+    if (this.firstVisibleDay() < firstDayInSelection || this.lastVisibleDay() > lastDayInSelection) {
+        // Change current month only if the entire selection will be visible.
+        var candidateCurrentMonth = null;
+        if (this.firstVisibleDay() > firstDayInSelection || this.lastVisibleDay() < lastDayInSelection)
+            candidateCurrentMonth = Month.createFromDay(firstDayInSelection);
+        if (candidateCurrentMonth) {
+            var firstVisibleRow = this.calendarTableView.columnAndRowForDay(candidateCurrentMonth.firstDay()).row;
+            var firstVisibleDay = this.calendarTableView.dayAtColumnAndRow(0, firstVisibleRow);
+            var lastVisibleRow = this.calendarTableView.columnAndRowForDay(candidateCurrentMonth.lastDay()).row;
+            var lastVisibleDay = this.calendarTableView.dayAtColumnAndRow(DaysPerWeek - 1, lastVisibleRow);
+            if (firstDayInSelection >= firstVisibleDay && lastDayInSelection <= lastVisibleDay)
+                this.setCurrentMonth(candidateCurrentMonth, true);
         }
-
-    } else if (key == "U+0054") { // 't'
-        this.selectRangeAndShowEntireRange(Day.createFromToday());
-        event.stopPropagation();
-        event.preventDefault();
     }
+    this._setHighlight(dayOrWeekOrMonth);
+    if (!this.isValid(dayOrWeekOrMonth))
+        return;
+    this._selection = dayOrWeekOrMonth;
+    this.calendarTableView.setNeedsUpdateCells(true);
+    window.pagePopupController.setValue(this._selection.toString());
 };
 
 /**
- * @param {Event} event
- * @param {!number} x
- * @param {!number} y
+ * @param {?DateType} dayOrWeekOrMonth
  */
-DaysTable.prototype.updateSelection = function(event, x, y) {
-    this._selectRangeAtPosition(x, y);
-    event.stopPropagation();
-    event.preventDefault();
+CalendarPicker.prototype._setHighlight = function(dayOrWeekOrMonth) {
+    if (!this._highlight && !dayOrWeekOrMonth)
+        return;
+    if (!dayOrWeekOrMonth && !this._highlight)
+        return;
+    if (this._highlight && this._highlight.equals(dayOrWeekOrMonth))
+        return;
+    this._highlight = dayOrWeekOrMonth;
+    this.calendarTableView.setNeedsUpdateCells(true);
 };
 
 /**
- * @constructor
- * @param{!CalendarPicker} picker
- */
-function MonthPickerDaysTable(picker) {
-    DaysTable.call(this, picker);
-}
-MonthPickerDaysTable.prototype = Object.create(DaysTable.prototype);
-
-/**
- * @param {!Month} month
- * @param {!CalendarPicker.NavigationBehaviour} navigationBehaviour
+ * @param {!number} value
+ * @return {!boolean}
  */
-MonthPickerDaysTable.prototype.navigateToMonth = function(month, navigationBehaviour) {
-    var hadSelection = this._hasSelection();
-    if (navigationBehaviour & CalendarPicker.NavigationBehaviour.Animate)
-        this._startMoveInAnimation(month);
-    this._renderMonth(month);
-    if (navigationBehaviour & CalendarPicker.NavigationBehaviour.KeepSelectionPosition && hadSelection)
-        this.selectRange(month);
+CalendarPicker.prototype._stepMismatch = function(value) {
+    return (value - this.config.stepBase) % this.config.step != 0;
 };
 
 /**
- * @param {!Month} month
+ * @param {!number} value
+ * @return {!boolean}
  */
-MonthPickerDaysTable.prototype._markRangeAsSelected = function(month) {
-    var monthString = month.toString();
-    for (var w = 0; w < DaysTable._Weeks; w++) {
-        for (var d = 0; d < 7; d++) {
-            if (this._days[w][d].dataset.monthValue == monthString) {
-                this._days[w][d].classList.add(ClassNames.Selected);
-            }
-        }
-    }
+CalendarPicker.prototype._outOfRange = function(value) {
+    return value < this.config.minimumValue || value > this.config.maximumValue;
 };
 
 /**
- * @param {!Month} month
+ * @param {!DateType} dayOrWeekOrMonth
+ * @return {!boolean}
  */
-MonthPickerDaysTable.prototype.selectRange = function(month) {
-    this._deselect();
-    if (this.startDate() >= month.endDate() || this.endDate() <= month.startDate())
-        this.picker.showMonth(month, CalendarPicker.NavigationBehaviour.Animate);
-    this._markRangeAsSelected(month);
+CalendarPicker.prototype.isValid = function(dayOrWeekOrMonth) {
+    var value = dayOrWeekOrMonth.valueOf();
+    return dayOrWeekOrMonth instanceof this._dateTypeConstructor && !this._outOfRange(value) && !this._stepMismatch(value);
 };
 
 /**
- * @param {!Month} month
+ * @param {!Day} day
+ * @return {!boolean}
  */
-MonthPickerDaysTable.prototype.selectRangeAndShowEntireRange = function(month) {
-    this._deselect();
-    this.picker.showMonth(month, CalendarPicker.NavigationBehaviour.Animate);
-    this._markRangeAsSelected(month);
+CalendarPicker.prototype.isValidDay = function(day) {
+    return this.isValid(this._dateTypeConstructor.createFromDay(day));
 };
 
 /**
- * @param {!Element} dayNode
- * @return {?Month}
+ * @param {!DateType} dateRange
+ * @return {!boolean} Returns true if the highlight was changed.
  */
-MonthPickerDaysTable.prototype._rangeForNode = function(dayNode) {
-    if (!dayNode)
-        return null;
-    return Month.parse(dayNode.dataset.monthValue);
+CalendarPicker.prototype._moveHighlight = function(dateRange) {
+    if (!dateRange)
+        return false;
+    if (this._outOfRange(dateRange.valueOf()))
+        return false;
+    if (this.firstVisibleDay() > dateRange.middleDay() || this.lastVisibleDay() < dateRange.middleDay())
+        this.setCurrentMonth(Month.createFromDay(dateRange.middleDay()), true);
+    this._setHighlight(dateRange);
+    return true;
 };
 
 /**
- * @param {Event} event
+ * @param {?Event} event
  */
-MonthPickerDaysTable.prototype._handleKey = function(event) {
-    this.picker.maybeUpdateFocusStyle();
+CalendarPicker.prototype.onCalendarTableKeyDown = function(event) {
     var key = event.keyIdentifier;
     var eventHandled = false;
-    var currentMonth = this.picker.currentMonth();
-    var firstNodeInSelectedRange = this._firstNodeInSelectedRange();
-    var selectedMonth = this._rangeForNode(firstNodeInSelectedRange);
-    if (!firstNodeInSelectedRange
-        && (key == "Right" || key == "Left" || key == "Up" || key == "Down" || key == "PageUp" || key == "PageDown")) {
-        this.selectRange(currentMonth);
-        eventHandled = true;
-    } else if (key == (global.params.isLocaleRTL ? "Right" : "Left") || key == "Up" || key == "PageUp") {
-        if (selectedMonth.valueOf() > currentMonth.valueOf())
-            this.selectRangeAndShowEntireRange(currentMonth);
-        else
-            this.selectRangeAndShowEntireRange(currentMonth.previous());
+    if (key == "U+0054") { // 't' key.
+        this.selectRangeContainingDay(Day.createFromToday());
         eventHandled = true;
-    } else if (key == (global.params.isLocaleRTL ? "Left" : "Right") || key == "Down" || key == "PageDown") {
-        if (selectedMonth.valueOf() < currentMonth.valueOf())
-            this.selectRangeAndShowEntireRange(currentMonth);
-        else
-            this.selectRangeAndShowEntireRange(currentMonth.next());
-        eventHandled = true;
-    } else if (selectedMonth && key == "Enter") {
-        if (firstNodeInSelectedRange.classList.contains(ClassNames.Available)) {
-            this.picker.submitValue(selectedMonth.toString());
+    } else if (key == "PageUp") {
+        var previousMonth = this.currentMonth().previous();
+        if (previousMonth && previousMonth >= this.config.minimumValue) {
+            this.setCurrentMonth(previousMonth, true);
             eventHandled = true;
         }
-    } else if (key == "U+0054") { // 't'
-        this.selectRangeAndShowEntireRange(Month.createFromToday());
+    } else if (key == "PageDown") {
+        var nextMonth = this.currentMonth().next();
+        if (nextMonth && nextMonth >= this.config.minimumValue) {
+            this.setCurrentMonth(nextMonth, true);
+            eventHandled = true;
+        }
+    } else if (this._highlight) {
+        if (global.params.isLocaleRTL ? key == "Right" : key == "Left") {
+            eventHandled = this._moveHighlight(this._highlight.previous());
+        } else if (key == "Up") {
+            eventHandled = this._moveHighlight(this._highlight.previous(this.type === "date" ? DaysPerWeek : 1));
+        } else if (global.params.isLocaleRTL ? key == "Left" : key == "Right") {
+            eventHandled = this._moveHighlight(this._highlight.next());
+        } else if (key == "Down") {
+            eventHandled = this._moveHighlight(this._highlight.next(this.type === "date" ? DaysPerWeek : 1));
+        } else if (key == "Enter") {
+            this.setSelection(this._highlight);
+        }
+    } else if (key == "Left" || key == "Up" || key == "Right" || key == "Down") {
+        // Highlight range near the middle.
+        this.highlightRangeContainingDay(this.currentMonth().middleDay());
         eventHandled = true;
     }
+
     if (eventHandled) {
         event.stopPropagation();
         event.preventDefault();
@@ -4347,151 +3610,66 @@ MonthPickerDaysTable.prototype._handleKey = function(event) {
 };
 
 /**
- * @constructor
- * @param{!CalendarPicker} picker
- */
-function WeekPickerDaysTable(picker) {
-    DaysTable.call(this, picker);
-}
-WeekPickerDaysTable.prototype = Object.create(DaysTable.prototype);
-
-/**
- * @param {!Week} week
- */
-WeekPickerDaysTable.prototype._markRangeAsSelected = function(week) {
-    var weekString = week.toString();
-    for (var w = 0; w < DaysTable._Weeks; w++) {
-        for (var d = 0; d < 7; d++) {
-            if (this._days[w][d].dataset.weekValue == weekString) {
-                this._days[w][d].classList.add(ClassNames.Selected);
-            }
-        }
-    }
-    for (var i = 0; i < this._weekNumbers.length; ++i) {
-        if (this._weekNumbers[i].dataset.weekValue === weekString) {
-            this._weekNumbers[i].classList.add(ClassNames.Selected);
-            break;
-        }
-    }
-};
-
-/**
- * @param {!Week} week
+ * @return {!number} Width in pixels.
  */
-WeekPickerDaysTable.prototype.selectRange = function(week) {
-    this._deselect();
-    var weekStartDate = week.startDate();
-    var weekEndDate = week.endDate();
-    if (this.startDate() >= weekEndDate)
-        this.picker.showMonth(Month.createFromDate(weekEndDate), CalendarPicker.NavigationBehaviour.Animate);
-    else if (this.endDate() <= weekStartDate)
-        this.picker.showMonth(Month.createFromDate(weekStartDate), CalendarPicker.NavigationBehaviour.Animate);
-    this._markRangeAsSelected(week);
+CalendarPicker.prototype.width = function() {
+    return this.calendarTableView.width() + (CalendarTableView.BorderWidth + CalendarPicker.BorderWidth + CalendarPicker.Padding) * 2;
 };
 
 /**
- * @param {!Week} week
+ * @return {!number} Height in pixels.
  */
-WeekPickerDaysTable.prototype.selectRangeAndShowEntireRange = function(week) {
-    this._deselect();
-    var weekStartDate = week.startDate();
-    var weekEndDate = week.endDate();
-    if (this.startDate() > weekStartDate)
-        this.picker.showMonth(Month.createFromDate(weekStartDate), CalendarPicker.NavigationBehaviour.Animate);
-    else if (this.endDate() < weekEndDate)
-        this.picker.showMonth(Month.createFromDate(weekEndDate), CalendarPicker.NavigationBehaviour.Animate);
-    this._markRangeAsSelected(week);
+CalendarPicker.prototype.height = function() {
+    return this._height;
 };
 
 /**
- * @param {!Element} dayNode
- * @return {?Week}
+ * @param {!number} height Height in pixels.
  */
-WeekPickerDaysTable.prototype._rangeForNode = function(dayNode) {
-    if (!dayNode)
-        return null;
-    return Week.parse(dayNode.dataset.weekValue);
+CalendarPicker.prototype.setHeight = function(height) {
+    if (this._height === height)
+        return;
+    this._height = height;
+    resizeWindow(this.width(), this._height);
+    this.calendarTableView.setHeight(this._height - CalendarHeaderView.Height - CalendarHeaderView.BottomMargin - CalendarPicker.Padding * 2 - CalendarTableView.BorderWidth * 2);
 };
 
 /**
- * @param {!Event} event
+ * @param {?Event} event
  */
-WeekPickerDaysTable.prototype._handleKey = function(event) {
-    this.picker.maybeUpdateFocusStyle();
+CalendarPicker.prototype.onBodyKeyDown = function(event) {
     var key = event.keyIdentifier;
     var eventHandled = false;
-    var currentMonth = this.picker.currentMonth();
-    var firstNodeInSelectedRange = this._firstNodeInSelectedRange();
-    var selectedWeek = this._rangeForNode(firstNodeInSelectedRange);
-    if (!firstNodeInSelectedRange
-        && (key == "Right" || key == "Left" || key == "Up" || key == "Down" || key == "PageUp" || key == "PageDown")) {
-        // Put the selection on a center cell.
-        this._selectRangeAtPosition(3, Math.floor(DaysTable._Weeks / 2 - 1));
-    } else if (key == (global.params.isLocaleRTL ? "Right" : "Left") || key == "Up") {
-        this.selectRangeAndShowEntireRange(selectedWeek.previous());
-        eventHandled = true;
-    } else if (key == (global.params.isLocaleRTL ? "Left" : "Right") || key == "Down") {
-        this.selectRangeAndShowEntireRange(selectedWeek.next());
+    var offset = 0;
+    switch (key) {
+    case "U+001B": // Esc key.
+        window.pagePopupController.closePopup();
         eventHandled = true;
-    } else if (key == "PageUp") {
-        if (!this._maybeSetPreviousMonth(CalendarPicker.NavigationBehaviour.Animate | CalendarPicker.NavigationBehaviour.KeepSelectionPosition))
-            return;
-        eventHandled = true;
-    } else if (key == "PageDown") {
-        if (!this._maybeSetNextMonth(CalendarPicker.NavigationBehaviour.Animate | CalendarPicker.NavigationBehaviour.KeepSelectionPosition))
-            return;
-        eventHandled = true;
-    } else if (selectedWeek && key == "Enter") {
-        if (firstNodeInSelectedRange.classList.contains(ClassNames.Available)) {
-            this.picker.submitValue(selectedWeek.toString());
-            eventHandled = true;
+        break;
+    case "U+004D": // 'm' key.
+        offset = offset || 1; // Fall-through.
+    case "U+0059": // 'y' key.
+        offset = offset || MonthsPerYear; // Fall-through.
+    case "U+0044": // 'd' key.
+        offset = offset || MonthsPerYear * 10;
+        var oldFirstVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().firstDay()).row;
+        this.setCurrentMonth(event.shiftKey ? this.currentMonth().previous(offset) : this.currentMonth().next(offset), true);
+        var newFirstVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().firstDay()).row;
+        if (this._highlight) {
+            var highlightMiddleDay = this._highlight.middleDay();
+            this.highlightRangeContainingDay(highlightMiddleDay.next((newFirstVisibleRow - oldFirstVisibleRow) * DaysPerWeek));
         }
-    } else if (key == "U+0054") { // 't'
-        this.selectRangeAndShowEntireRange(Week.createFromToday());
-        eventHandled = true;
+        eventHandled  =true;
+        break;
     }
     if (eventHandled) {
         event.stopPropagation();
         event.preventDefault();
     }
-};
-
-/**
- * @param {!Event} event
- */
-CalendarPicker.prototype._handleBodyKeyDown = function(event) {
-    this.maybeUpdateFocusStyle();
-    var key = event.keyIdentifier;
-    if (key == "U+0009") {
-        if (!event.shiftKey && document.activeElement == this.lastFocusableControl) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.firstFocusableControl.focus();
-        } else if (event.shiftKey && document.activeElement == this.firstFocusableControl) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.lastFocusableControl.focus();
-        }
-    } else if (key == "U+004D") { // 'm'
-        this._yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousMonth : YearMonthController.NextMonth);
-    } else if (key == "U+0059") { // 'y'
-        this._yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousYear : YearMonthController.NextYear);
-    } else if (key == "U+0044") { // 'd'
-        this._yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousTenYears : YearMonthController.NextTenYears);
-    } else if (key == "U+001B") // ESC
-        this.handleCancel();
-}
-
-CalendarPicker.prototype.maybeUpdateFocusStyle = function() {
-    if (this._hadKeyEvent)
-        return;
-    this._hadKeyEvent = true;
-    this._element.classList.remove(ClassNames.NoFocusRing);
 }
 
 if (window.dialogArguments) {
     initialize(dialogArguments);
 } else {
     window.addEventListener("message", handleMessage, false);
-    window.setTimeout(handleArgumentsTimeout, 1000);
 }
index 67cc619..6ffda69 100644 (file)
     padding: 0;
 }
 
-.days-area-container:focus {
+.month-popup-button:focus,
+.year-list-view:focus,
+.calendar-table-view:focus {
     -webkit-transition: border-color 200ms;
     /* We use border color because it follows the border radius (unlike outline).
     * This is particularly noticeable on mac. */
-    border-color: rgb(77, 144, 254);
+    border-color: rgb(77, 144, 254) !important;
     outline: none;
 }
+
+.preparing button:focus,
+.preparing .year-list-view:focus,
+.preparing .calendar-table-view:focus {
+    -webkit-transition: none;
+}
index c7fc075..bfba0f7 100644 (file)
@@ -1,3 +1,13 @@
+2013-03-07  Keishi Hattori  <keishi@webkit.org>
+
+        Update calendar picker UI
+        https://bugs.webkit.org/show_bug.cgi?id=109439
+
+        Reviewed by Kent Tamura.
+
+        * src/DateTimeChooserImpl.cpp:
+        (WebKit::DateTimeChooserImpl::writeDocument): Adding shortMonthLabels property.
+
 2013-03-07  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r145166.
index 6e5aad2..05db661 100644 (file)
@@ -138,6 +138,7 @@ void DateTimeChooserImpl::writeDocument(WebCore::DocumentWriter& writer)
     addProperty("clearLabel", Platform::current()->queryLocalizedString(WebLocalizedString::CalendarClear), writer);
     addProperty("weekLabel", Platform::current()->queryLocalizedString(WebLocalizedString::WeekNumberLabel), writer);
     addProperty("weekStartDay", m_locale->firstDayOfWeek(), writer);
+    addProperty("shortMonthLabels", m_locale->shortMonthLabels(), writer);
     addProperty("dayLabels", m_locale->weekDayShortLabels(), writer);
     addProperty("isLocaleRTL", m_locale->isRTL(), writer);
     addProperty("isRTL", m_parameters.isAnchorElementRTL, writer);