Reset highlighted month for the month picker when the year is changed.

Prior to this CL, the month picker would continue to highlight the same month even after
the year is changed. The new behavior is to always highlight the first month when a year
is changed.

This change is validated by adding: date-picker-month-appearance-after-year-change.html.
The expected results for existing tests are also updated.

Bug: 1021331
Change-Id: Ib661e9b3607fd190a7753060a06a108ff53e8be0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1907487
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714533}

third_party/blink/renderer/core/html/forms/resources/calendarPicker.js

@@ -2502,10 +2502,11 @@ YearListView.prototype.onClick = function(event) {
   ListView.prototype.onClick.call(this, event);
   var year = this.selectedRow + 1;
   if (this.selectedRow !== oldSelectedRow) {
-    var month = this.highlightedMonth ? this.highlightedMonth.month : 0;
+    // Always start with first month when changing the year.
+    const month = new Month(year, 0);
+    this.highlightMonth(month);
     this.dispatchEvent(
-        YearListView.EventTypeYearListViewDidSelectMonth, this,
-        new Month(year, month));
+        YearListView.EventTypeYearListViewDidSelectMonth, this, month);
     this.scrollView.scrollTo(this.selectedRow * YearListCell.GetHeight(), true);
   } else {
     var monthButton = enclosingNodeOrSelfWithClass(

third_party/blink/web_tests/fast/forms/calendar-picker/calendar-picker-mouse-operations-expected.txt

@@ -39,7 +39,7 @@ PASS checkYearListViewScrollOffset() > 0 is true
 PASS checkYearListViewScrollOffset() < 0 is true
 Check that clicking an year list cell opens it.
 PASS checkYearListViewScrollOffset() > 0 is true
-PASS highlightedMonthButton() is "1999-10"
+PASS highlightedMonthButton() is "1999-01"
 Check that clicking the month popup sets the month.
 PASS popupWindow.global.picker.monthPopupView.isVisible is false
 PASS currentMonth() is "1999-06"

third_party/blink/web_tests/fast/forms/calendar-picker/calendar-picker-mouse-operations.html

@@ -83,7 +83,7 @@ function test2() {
     eventSender.mouseScrollBy(0, 10);
     shouldBeTrue('checkYearListViewScrollOffset() > 0');
     clickYearListCell(1999);
-    shouldBeEqualToString('highlightedMonthButton()', '1999-10');
+    shouldBeEqualToString('highlightedMonthButton()', '1999-01');
 
     debug('Check that clicking the month popup sets the month.');
 

third_party/blink/web_tests/fast/forms/calendar-picker/month-picker-mouse-operations-expected.txt

@@ -55,7 +55,7 @@ PASS checkYearListViewScrollOffset() > 0 is true
 PASS checkYearListViewScrollOffset() < 0 is true
 Check that clicking an year list cell opens it.
 PASS checkYearListViewScrollOffset() > 0 is true
-PASS highlightedMonthButton() is "1999-10"
+PASS highlightedMonthButton() is "1999-01"
 Check that clicking the month popup sets the month.
 PASS popupWindow.global.picker.monthPopupView.isVisible is false
 PASS currentMonth() is "1999-06"

third_party/blink/web_tests/fast/forms/calendar-picker/month-picker-mouse-operations.html

@@ -107,7 +107,7 @@ function test() {
     eventSender.mouseScrollBy(0, 10);
     shouldBeTrue('checkYearListViewScrollOffset() > 0');
     clickYearListCell(1999);
-    shouldBeEqualToString('highlightedMonthButton()', '1999-10');
+    shouldBeEqualToString('highlightedMonthButton()', '1999-01');
 
     debug('Check that clicking the month popup sets the month.');
 

third_party/blink/web_tests/fast/forms/calendar-picker/week-picker-mouse-operations-expected.txt

@@ -60,7 +60,7 @@ PASS checkYearListViewScrollOffset() > 0 is true
 PASS checkYearListViewScrollOffset() < 0 is true
 Check that clicking an year list cell opens it.
 PASS checkYearListViewScrollOffset() > 0 is true
-PASS highlightedMonthButton() is "1999-10"
+PASS highlightedMonthButton() is "1999-01"
 Check that clicking the month popup sets the month.
 PASS popupWindow.global.picker.monthPopupView.isVisible is false
 PASS currentMonth() is "1999-06"

third_party/blink/web_tests/fast/forms/calendar-picker/week-picker-mouse-operations.html

@@ -115,7 +115,7 @@ function test() {
     eventSender.mouseScrollBy(0, 10);
     shouldBeTrue('checkYearListViewScrollOffset() > 0');
     clickYearListCell(1999);
-    shouldBeEqualToString('highlightedMonthButton()', '1999-10');
+    shouldBeEqualToString('highlightedMonthButton()', '1999-01');
 
     debug('Check that clicking the month popup sets the month.');
 

third_party/blink/web_tests/virtual/controls-refresh/calendar-picker/date-picker-highlighted-month-after-year-change.html

+<!DOCTYPE html>
+<script>
+testRunner.waitUntilDone();
+</script>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../fast/forms/resources/common.js"></script>
+<script src="../../../fast/forms/resources/picker-common.js"></script>
+<script src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
+<input type=date id=date value="2017-07-31">
+<script>
+
+let t = async_test('Test highlighted month in year view.');
+
+function test1() {
+  clickMonthPopupButton();
+  clickYearListCell(2018);
+  assert_equals(highlightedMonthButton(), "2018-01");
+}
+
+t.step(() => {
+  openPicker(document.getElementById('date'), t.step_func_done(test1));
+});
+</script>