Add more tests for calendar picker https://bugs.webkit.org/show_bug.cgi?id=98034 Reviewed by Kent Tamura. This adds basic tests for all key bindings and simple mouse operations. * fast/forms/date/calendar-picker-common.js: Added. (currentMonth): Returns month that the picker is currently showing. (selectedDate): (openPicker): Opens the calendar picker and updates popupWindow. (sendKey): * fast/forms/date/calendar-picker-key-operations-expected.txt: * fast/forms/date/calendar-picker-key-operations.html: * fast/forms/date/calendar-picker-mouse-operations-expected.txt: Added. * fast/forms/date/calendar-picker-mouse-operations.html: Added. * fast/forms/resources/common.js: (cumulativeOffset): (hoverOverElement): (clickElement): * platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html: * platform/gtk/TestExpectations: Added calendar-picker-mouse-operations.html. git-svn-id: http://svn.webkit.org/repository/webkit/trunk/LayoutTests@130111 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/ChangeLog b/ChangeLog index af2bd4b..abc7d6c 100644 --- a/ChangeLog +++ b/ChangeLog
@@ -1,3 +1,28 @@ +2012-10-01 Keishi Hattori <keishi@webkit.org> + + Add more tests for calendar picker + https://bugs.webkit.org/show_bug.cgi?id=98034 + + Reviewed by Kent Tamura. + + This adds basic tests for all key bindings and simple mouse operations. + + * fast/forms/date/calendar-picker-common.js: Added. + (currentMonth): Returns month that the picker is currently showing. + (selectedDate): + (openPicker): Opens the calendar picker and updates popupWindow. + (sendKey): + * fast/forms/date/calendar-picker-key-operations-expected.txt: + * fast/forms/date/calendar-picker-key-operations.html: + * fast/forms/date/calendar-picker-mouse-operations-expected.txt: Added. + * fast/forms/date/calendar-picker-mouse-operations.html: Added. + * fast/forms/resources/common.js: + (cumulativeOffset): + (hoverOverElement): + (clickElement): + * platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html: + * platform/gtk/TestExpectations: Added calendar-picker-mouse-operations.html. + 2012-10-01 Tony Chang <tony@chromium.org> flexbox does wrong baseline item alignment in columns
diff --git a/fast/forms/date/calendar-picker-common.js b/fast/forms/date/calendar-picker-common.js new file mode 100644 index 0000000..ebbf0f3 --- /dev/null +++ b/fast/forms/date/calendar-picker-common.js
@@ -0,0 +1,42 @@ +window.jsTestIsAsync = true; +if (window.internals) + internals.settings.setEnableMockPagePopup(true); + +var popupWindow = null; + +function currentMonth() { + var element = popupWindow.document.querySelector(".selected-month-year"); + if (!element) + return null; + return element.dataset.value; +} + +function availableDatesInCurrentMonth() { + return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.available:not(.not-this-month)"), function(element) { + return element.dataset.submitValue; + }).sort(); +} + +function selectedDate() { + var selected = selectedDates(); + if (selected.length > 1) + testFailed("selectedDate expects single selected date. Found " + selected.length); + return selected[0]; +} + +function selectedDates() { + return Array.prototype.map.call(popupWindow.document.querySelectorAll(".day.day-selected"), function(element) { + return element.dataset.submitValue; + }).sort(); +} + +function openPicker(input) { + sendKey(input, "Down"); + popupWindow = document.getElementById('mock-page-popup').contentWindow; +} + +function sendKey(input, keyName) { + var event = document.createEvent('KeyboardEvent'); + event.initKeyboardEvent('keydown', true, true, document.defaultView, keyName); + input.dispatchEvent(event); +}
diff --git a/fast/forms/date/calendar-picker-key-operations-expected.txt b/fast/forms/date/calendar-picker-key-operations-expected.txt index 0d07542..7569b6e 100644 --- a/fast/forms/date/calendar-picker-key-operations-expected.txt +++ b/fast/forms/date/calendar-picker-key-operations-expected.txt
@@ -6,31 +6,54 @@ Check that page popup doesn't exist at first. PASS document.getElementById("mock-page-popup") is null Check that page popup exists. -PASS pickerWindow.pagePopupController.toString() is "[object PagePopupController]" +PASS popupWindow.pagePopupController.toString() is "[object PagePopupController]" PASS selectedDate() is "2000-01-02" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" Check that arrow keys work properly even when going between weeks and months. PASS selectedDate() is "1999-12-26" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" PASS selectedDate() is "2000-01-02" -PASS selectedMonthYear() is "1999-11" +PASS currentMonth() is "1999-11" PASS selectedDate() is "1999-12-26" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" PASS selectedDate() is "2000-01-02" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" PASS selectedDate() is "1999-12-26" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" PASS selectedDate() is "2000-01-08" -PASS selectedMonthYear() is "1999-11" +PASS currentMonth() is "1999-11" PASS selectedDate() is "1999-12-26" -PASS selectedMonthYear() is "2000-0" +PASS currentMonth() is "2000-0" +press m +FAIL selectedDate() should be 2000-01-26. Was 2000-01-30. +PASS currentMonth() is "2000-1" +press shift + m +PASS selectedDate() is "1999-12-26" +PASS currentMonth() is "2000-0" +press y +PASS selectedDate() is "2000-12-31" +PASS currentMonth() is "2001-0" +press shift + y +PASS selectedDate() is "1999-12-26" +PASS currentMonth() is "2000-0" +press d +PASS selectedDate() is "2009-12-27" +PASS currentMonth() is "2010-0" +press shift + d +PASS selectedDate() is "1999-12-26" +PASS currentMonth() is "2000-0" +PASS document.getElementById("mock-page-popup") is null +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=Today]" PASS focusedElement() is ".clear-button[value=Clear]" PASS focusedElement() is ".year-month-button[value=<<]" PASS focusedElement() is ".clear-button[value=Clear]" +PASS document.getElementById("mock-page-popup") is null +PASS document.getElementById("date").value is "1999-12-26" PASS successfullyParsed is true TEST COMPLETE - +
diff --git a/fast/forms/date/calendar-picker-key-operations.html b/fast/forms/date/calendar-picker-key-operations.html index 4163313..3e875fc 100644 --- a/fast/forms/date/calendar-picker-key-operations.html +++ b/fast/forms/date/calendar-picker-key-operations.html
@@ -2,6 +2,7 @@ <html> <head> <script src="../../js/resources/js-test-pre.js"></script> +<script src="calendar-picker-common.js"></script> </head> <body> <p id="description"></p> @@ -9,52 +10,96 @@ <input type=date id=date value="2000-01-02"> <script> description("Tests if calendar picker key bindings work as expected."); -window.jsTestIsAsync = true; -if (window.internals) - internals.settings.setEnableMockPagePopup(true); debug('Check that page popup doesn\'t exist at first.'); shouldBeNull('document.getElementById("mock-page-popup")'); -sendKey(document.getElementById('date'), 'Down'); +openPicker(document.getElementById('date')); -var pickerWindow = document.getElementById('mock-page-popup').contentWindow; -pickerWindow.addEventListener("resize", function() { +popupWindow.addEventListener("resize", test1, false); + +function test1() { + popupWindow.removeEventListener("resize", test1, false); + debug('Check that page popup exists.'); - shouldBe('pickerWindow.pagePopupController.toString()', '"[object PagePopupController]"'); + shouldBe('popupWindow.pagePopupController.toString()', '"[object PagePopupController]"'); shouldBe('selectedDate()', '"2000-01-02"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); debug('Check that arrow keys work properly even when going between weeks and months.'); eventSender.keyDown('upArrow'); shouldBe('selectedDate()', '"1999-12-26"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); // Move from first row of January 2000 to last row of December 1999. eventSender.keyDown('upArrow'); shouldBe('selectedDate()', '"2000-01-02"'); - shouldBe('selectedMonthYear()', '"1999-11"'); + shouldBe('currentMonth()', '"1999-11"'); eventSender.keyDown('downArrow'); shouldBe('selectedDate()', '"1999-12-26"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); eventSender.keyDown('downArrow'); shouldBe('selectedDate()', '"2000-01-02"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); eventSender.keyDown('upArrow'); shouldBe('selectedDate()', '"1999-12-26"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); // Move from top left of January 2000 to bottom right of December 1999. eventSender.keyDown('leftArrow'); shouldBe('selectedDate()', '"2000-01-08"'); - shouldBe('selectedMonthYear()', '"1999-11"'); + shouldBe('currentMonth()', '"1999-11"'); eventSender.keyDown('rightArrow'); shouldBe('selectedDate()', '"1999-12-26"'); - shouldBe('selectedMonthYear()', '"2000-0"'); + shouldBe('currentMonth()', '"2000-0"'); + + debug("press m"); + eventSender.keyDown('m'); + shouldBe('selectedDate()', '"2000-01-26"'); + shouldBe('currentMonth()', '"2000-1"'); + + debug("press shift + m"); + eventSender.keyDown('M'); + shouldBe('selectedDate()', '"1999-12-26"'); + shouldBe('currentMonth()', '"2000-0"'); + + debug("press y"); + eventSender.keyDown('y'); + shouldBe('selectedDate()', '"2000-12-31"'); + shouldBe('currentMonth()', '"2001-0"'); + + debug("press shift + y"); + eventSender.keyDown('Y'); + shouldBe('selectedDate()', '"1999-12-26"'); + shouldBe('currentMonth()', '"2000-0"'); + + debug("press d"); + eventSender.keyDown('d'); + shouldBe('selectedDate()', '"2009-12-27"'); + shouldBe('currentMonth()', '"2010-0"'); + + debug("press shift + d"); + eventSender.keyDown('D'); + shouldBe('selectedDate()', '"1999-12-26"'); + shouldBe('currentMonth()', '"2000-0"'); + + eventSender.keyDown('\n'); + shouldBeNull('document.getElementById("mock-page-popup")'); + shouldBe('document.getElementById("date").value', '"1999-12-26"'); + + openPicker(document.getElementById('date')); + popupWindow.addEventListener("resize", test2, false); +} + +function test2() { + popupWindow.removeEventListener("resize", test2, false); + + // Test twice in case midnight. + shouldBeTrue('testToday() || testToday()'); debug('Check if tabbing works.'); shouldBe('focusedElement()', '".days-area-container"'); @@ -67,25 +112,30 @@ eventSender.keyDown('\t', ['shiftKey']); shouldBe('focusedElement()', '".clear-button[value=Clear]"'); - finishJSTest(); -}, false); + eventSender.keyDown('\x1B'); + shouldBeNull('document.getElementById("mock-page-popup")'); + shouldBe('document.getElementById("date").value', '"1999-12-26"'); -function selectedDate() { - var element = pickerWindow.document.querySelector(".day-selected"); - if (!element) - return null; - return element.dataset.submitValue; + finishJSTest(); } -function selectedMonthYear() { - var element = pickerWindow.document.querySelector(".selected-month-year"); - if (!element) - return null; - return element.dataset.value; +function testToday() { + eventSender.keyDown('t'); + var now = new Date(); + var expectedDate = serializeDate(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()); + var expectedMonth = now.getUTCFullYear() + "-" + now.getMonth(); + return selectedDate() === expectedDate && currentMonth() === expectedMonth; +} + +function serializeDate(year, month, day) { + var yearString = String(year); + if (yearString.length < 4) + yearString = ("000" + yearString).substr(-4, 4); + return yearString + "-" + ("0" + (month + 1)).substr(-2, 2) + "-" + ("0" + day).substr(-2, 2); } function focusedElement() { - var element = pickerWindow.document.activeElement; + var element = popupWindow.document.activeElement; if (!element) return null; var identifier = "." + element.className; @@ -94,11 +144,6 @@ return identifier; } -function sendKey(input, keyName) { - var event = document.createEvent('KeyboardEvent'); - event.initKeyboardEvent('keydown', true, true, document.defaultView, keyName); - input.dispatchEvent(event); -} </script> <script src="../../js/resources/js-test-post.js"></script> </body>
diff --git a/fast/forms/date/calendar-picker-mouse-operations-expected.txt b/fast/forms/date/calendar-picker-mouse-operations-expected.txt new file mode 100644 index 0000000..e967063 --- /dev/null +++ b/fast/forms/date/calendar-picker-mouse-operations-expected.txt
@@ -0,0 +1,26 @@ +Tests if calendar 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 +PASS selectedDate() is "2000-01-02" +PASS currentMonth() is "2000-0" +Check that hovering over an entry highlights it. +PASS selectedDate() is "1999-12-31" +PASS currentMonth() is "2000-0" +PASS selectedDate() is "2000-01-04" +PASS currentMonth() is "2000-0" +Check that navigating between months maintains selection position. +PASS selectedDate() is "2000-02-08" +PASS currentMonth() is "2000-1" +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 document.getElementById("date").value is "2000-02-05" +PASS successfullyParsed is true + +TEST COMPLETE +
diff --git a/fast/forms/date/calendar-picker-mouse-operations.html b/fast/forms/date/calendar-picker-mouse-operations.html new file mode 100644 index 0000000..070cfd2 --- /dev/null +++ b/fast/forms/date/calendar-picker-mouse-operations.html
@@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<script src="../../js/resources/js-test-pre.js"></script> +<script src="../resources/common.js"></script> +<script src="calendar-picker-common.js"></script> +</head> +<body> +<p id="description"></p> +<div id="console"></div> +<input type=date id=date value="2000-01-02"> +<script> +description("Tests if calendar picker key bindings work as expected."); + +debug('Check that page popup doesn\'t exist at first.'); +shouldBeNull('document.getElementById("mock-page-popup")'); + +openPicker(document.getElementById('date')); + +popupWindow.addEventListener("resize", test, false); + +function test() { + popupWindow.removeEventListener("resize", test, false); + + shouldBe('selectedDate()', '"2000-01-02"'); + shouldBe('currentMonth()', '"2000-0"'); + + debug('Check that hovering over an entry highlights it.'); + hoverOverElement(popupWindow.document.getElementsByClassName("day")[5]); + shouldBe('selectedDate()', '"1999-12-31"'); + shouldBe('currentMonth()', '"2000-0"'); + + hoverOverElement(popupWindow.document.getElementsByClassName("day")[9]); + shouldBe('selectedDate()', '"2000-01-04"'); + shouldBe('currentMonth()', '"2000-0"'); + + debug('Check that navigating between months maintains selection position.'); + eventSender.keyDown('m'); + shouldBe('selectedDate()', '"2000-02-08"'); + shouldBe('currentMonth()', '"2000-1"'); + + debug('Check that moving the mouse outside the popup de-highlights entries.'); + hoverOverElement(document.getElementById('description')); + shouldBeUndefined('selectedDate()'); + + debug('Check that mouse click closes the popup and sets the value.'); + clickElement(popupWindow.document.getElementsByClassName("day")[6]); + shouldBeNull('document.getElementById("mock-page-popup")'); + shouldBe('document.getElementById("date").value', '"2000-02-05"'); + + finishJSTest(); +} +</script> +<script src="../../js/resources/js-test-post.js"></script> +</body> +
diff --git a/fast/forms/resources/common.js b/fast/forms/resources/common.js index 0663ce3..9b85089 100644 --- a/fast/forms/resources/common.js +++ b/fast/forms/resources/common.js
@@ -119,3 +119,35 @@ function getUserAgentShadowTextContent(element) { return internals.youngestShadowRoot(element).textContent; }; + +function cumulativeOffset(element) { + var x = 0; + var y = 0; + var parentFrame = element.ownerDocument.defaultView.frameElement; + if (parentFrame) { + var parentFrameOffset = cumulativeOffset(parentFrame); + x = parentFrameOffset[0]; + y = parentFrameOffset[1]; + } + if (element.parentNode) { + do { + x += element.offsetLeft || 0; + y += element.offsetTop || 0; + element = element.offsetParent; + } while (element); + } + return [x, y]; +} + +function hoverOverElement(element) { + var offset = cumulativeOffset(element); + var centerX = offset[0] + element.offsetWidth / 2; + var centerY = offset[1] + element.offsetHeight / 2; + eventSender.mouseMoveTo(centerX, centerY); +} + +function clickElement(element) { + hoverOverElement(element); + eventSender.mouseDown(); + eventSender.mouseUp(); +}
diff --git a/platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html b/platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html index 79619a1..2833d07 100644 --- a/platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html +++ b/platform/chromium/fast/forms/date/date-suggestion-picker-mouse-operations.html
@@ -2,6 +2,7 @@ <html> <head> <script src="../../../../../fast/js/resources/js-test-pre.js"></script> +<script src="../../../../../fast/forms/resources/common.js"></script> </head> <body style="background-color: #bbbbbb;"> <p id="description"></p> @@ -124,38 +125,6 @@ return null; } -function cumulativeOffset(element) { - var x = 0; - var y = 0; - var parentFrame = element.ownerDocument.defaultView.frameElement; - if (parentFrame) { - var parentFrameOffset = cumulativeOffset(parentFrame); - x = parentFrameOffset[0]; - y = parentFrameOffset[1]; - } - if (element.parentNode) { - do { - x += element.offsetLeft || 0; - y += element.offsetTop || 0; - element = element.offsetParent; - } while (element); - } - return [x, y]; -} - -function hoverOverElement(element) { - var offset = cumulativeOffset(element); - var centerX = offset[0] + element.offsetWidth / 2; - var centerY = offset[1] + element.offsetHeight / 2; - eventSender.mouseMoveTo(centerX, centerY); -} - -function clickElement(element) { - hoverOverElement(element); - eventSender.mouseDown(); - eventSender.mouseUp(); -} - function sendMousedown(element) { var event = document.createEvent('MouseEvent'); event.initEvent('click', true, true);
diff --git a/platform/gtk/TestExpectations b/platform/gtk/TestExpectations index 290a49a..4fa3b0f 100644 --- a/platform/gtk/TestExpectations +++ b/platform/gtk/TestExpectations
@@ -200,6 +200,7 @@ webkit.org/b/29359 fast/forms/date/calendar-picker-appearance-with-step.html [ Skip ] webkit.org/b/29359 fast/forms/date/calendar-picker-appearance.html [ Skip ] webkit.org/b/29359 fast/forms/date/calendar-picker-key-operations.html [ Skip ] +webkit.org/b/29359 fast/forms/date/calendar-picker-mouse-operations.html [ Skip ] webkit.org/b/29359 fast/forms/date/calendar-picker-type-change-onclick.html [ Pass ] webkit.org/b/29359 fast/forms/date/date-stepup-stepdown-from-renderer.html [ Pass ] webkit.org/b/29359 fast/forms/date/no-page-popup-controller.html [ Pass ]