Skip to content

GitLab

T
tangled
Commit de76679b authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

Update the popup UI for input type="date" 

This CL includes the following changes:
- calendar_picker_refresh.css was added as a way to extend the current
style used for date popup
- calendarPicker.js was changed:
    - to support different sizes for cells
    - to provide different icons for forward, back month buttons
    - todayButton was moved to a different position
- locale_win | icu | mac to change the label used for weekdays to the
shortest one provided by each platform

Added tests to validate the new UI for input type="date". Although the
current change affects other types (datetime-local, week, month) this change
is the first of a series of changes which will update the popup UI for all
these types and tests will be added for each type.

Bug: 988155
Change-Id: Ibfbddd9f523f4adad79b6af2520989c3980bc18c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1721842
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKentaro Hara <haraken@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682420}
parent 76bc353f
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 52 deletions
content/child/blink_platform_impl.cc
View file @ de76679b
...@@ -488,6 +488,8 @@ const DataResource kDataResources[] = { ...@@ -488,6 +488,8 @@ const DataResource kDataResources[] = {
{"calendarPicker.js", IDR_CALENDAR_PICKER_JS, ui::SCALE_FACTOR_NONE, true}, {"calendarPicker.js", IDR_CALENDAR_PICKER_JS, ui::SCALE_FACTOR_NONE, true},
{"calendarPicker.css", IDR_CALENDAR_PICKER_CSS, ui::SCALE_FACTOR_NONE, {"calendarPicker.css", IDR_CALENDAR_PICKER_CSS, ui::SCALE_FACTOR_NONE,
true}, true},
{"calendar_picker_refresh.css", IDR_CALENDAR_PICKER_REFRESH_CSS,
ui::SCALE_FACTOR_NONE, true},
{"listPicker.js", IDR_LIST_PICKER_JS, ui::SCALE_FACTOR_NONE, true}, {"listPicker.js", IDR_LIST_PICKER_JS, ui::SCALE_FACTOR_NONE, true},
{"listPicker.css", IDR_LIST_PICKER_CSS, ui::SCALE_FACTOR_NONE, true}, {"listPicker.css", IDR_LIST_PICKER_CSS, ui::SCALE_FACTOR_NONE, true},
{"pickerButton.css", IDR_PICKER_BUTTON_CSS, ui::SCALE_FACTOR_NONE, true}, {"pickerButton.css", IDR_PICKER_BUTTON_CSS, ui::SCALE_FACTOR_NONE, true},
......
third_party/blink/public/blink_resources.grd
View file @ de76679b
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
<include name="IDR_PICKER_COMMON_JS" file="../renderer/core/html/forms/resources/pickerCommon.js" type="BINDATA" compress="gzip"/> <include name="IDR_PICKER_COMMON_JS" file="../renderer/core/html/forms/resources/pickerCommon.js" type="BINDATA" compress="gzip"/>
<include name="IDR_PICKER_COMMON_CSS" file="../renderer/core/html/forms/resources/pickerCommon.css" type="BINDATA" compress="gzip"/> <include name="IDR_PICKER_COMMON_CSS" file="../renderer/core/html/forms/resources/pickerCommon.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_CSS" file="../renderer/core/html/forms/resources/calendarPicker.css" type="BINDATA" compress="gzip"/> <include name="IDR_CALENDAR_PICKER_CSS" file="../renderer/core/html/forms/resources/calendarPicker.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_REFRESH_CSS" file="../renderer/core/html/forms/resources/calendar_picker_refresh.css" type="BINDATA" compress="gzip"/>
<include name="IDR_CALENDAR_PICKER_JS" file="../renderer/core/html/forms/resources/calendarPicker.js" type="BINDATA" compress="gzip"/> <include name="IDR_CALENDAR_PICKER_JS" file="../renderer/core/html/forms/resources/calendarPicker.js" type="BINDATA" compress="gzip"/>
<include name="IDR_PICKER_BUTTON_CSS" file="../renderer/core/html/forms/resources/pickerButton.css" type="BINDATA" compress="gzip"/> <include name="IDR_PICKER_BUTTON_CSS" file="../renderer/core/html/forms/resources/pickerButton.css" type="BINDATA" compress="gzip"/>
<include name="IDR_SUGGESTION_PICKER_CSS" file="../renderer/core/html/forms/resources/suggestionPicker.css" type="BINDATA" compress="gzip"/> <include name="IDR_SUGGESTION_PICKER_CSS" file="../renderer/core/html/forms/resources/suggestionPicker.css" type="BINDATA" compress="gzip"/>
......
third_party/blink/renderer/core/html/forms/date_time_chooser_impl.cc
View file @ de76679b
...@@ -121,9 +121,15 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) { ...@@ -121,9 +121,15 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) {
AddString("<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data); AddString("<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
data->Append(Platform::Current()->GetDataResource("pickerCommon.css")); data->Append(Platform::Current()->GetDataResource("pickerCommon.css"));
data->Append(Platform::Current()->GetDataResource("pickerButton.css")); if (!RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
data->Append(Platform::Current()->GetDataResource("pickerButton.css"));
}
data->Append(Platform::Current()->GetDataResource("suggestionPicker.css")); data->Append(Platform::Current()->GetDataResource("suggestionPicker.css"));
data->Append(Platform::Current()->GetDataResource("calendarPicker.css")); data->Append(Platform::Current()->GetDataResource("calendarPicker.css"));
if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
data->Append(
Platform::Current()->GetDataResource("calendar_picker_refresh.css"));
}
AddString( AddString(
"</style></head><body><div id=main>Loading...</div><script>\n" "</style></head><body><div id=main>Loading...</div><script>\n"
"window.dialogArguments = {\n", "window.dialogArguments = {\n",
...@@ -169,6 +175,8 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) { ...@@ -169,6 +175,8 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) {
AddProperty("dayLabels", locale_->WeekDayShortLabels(), data); AddProperty("dayLabels", locale_->WeekDayShortLabels(), data);
AddProperty("isLocaleRTL", locale_->IsRTL(), data); AddProperty("isLocaleRTL", locale_->IsRTL(), data);
AddProperty("isRTL", parameters_->is_anchor_element_rtl, data); AddProperty("isRTL", parameters_->is_anchor_element_rtl, data);
AddProperty("isFormControlsRefreshEnabled",
RuntimeEnabledFeatures::FormControlsRefreshEnabled(), data);
AddProperty("mode", parameters_->type.GetString(), data); AddProperty("mode", parameters_->type.GetString(), data);
if (parameters_->suggestions.size()) { if (parameters_->suggestions.size()) {
Vector<String> suggestion_values; Vector<String> suggestion_values;
......
third_party/blink/renderer/core/html/forms/resources/calendarPicker.js
View file @ de76679b
...@@ -46,6 +46,7 @@ var global = { ...@@ -46,6 +46,7 @@ var global = {
dayLabels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], dayLabels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
shortMonthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], shortMonthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
isLocaleRTL: false, isLocaleRTL: false,
isFormControlsRefreshEnabled: false,
mode: 'date', mode: 'date',
weekLabel: 'Week', weekLabel: 'Week',
anchorRectInScreen: new Rectangle(0, 0, 0, 0), anchorRectInScreen: new Rectangle(0, 0, 0, 0),
...@@ -2914,7 +2915,7 @@ function CalendarHeaderView(calendarPicker) { ...@@ -2914,7 +2915,7 @@ function CalendarHeaderView(calendarPicker) {
* @type {!MonthPopupButton} * @type {!MonthPopupButton}
*/ */
this.monthPopupButton = new MonthPopupButton( this.monthPopupButton = new MonthPopupButton(
this.calendarPicker.calendarTableView.width() - CalendarTableView.BorderWidth * 2 - this.calendarPicker.calendarTableView.width() - CalendarTableView.GetBorderWidth() * 2 -
CalendarNavigationButton.Width * 3 - CalendarNavigationButton.LeftMargin * 2); CalendarNavigationButton.Width * 3 - CalendarNavigationButton.LeftMargin * 2);
this.monthPopupButton.attachTo(titleElement); this.monthPopupButton.attachTo(titleElement);
...@@ -2928,19 +2929,21 @@ function CalendarHeaderView(calendarPicker) { ...@@ -2928,19 +2929,21 @@ function CalendarHeaderView(calendarPicker) {
this._previousMonthButton.on(CalendarNavigationButton.EventTypeRepeatingButtonClick, this.onNavigationButtonClick); this._previousMonthButton.on(CalendarNavigationButton.EventTypeRepeatingButtonClick, this.onNavigationButtonClick);
this._previousMonthButton.element.setAttribute('aria-label', global.params.axShowPreviousMonth); this._previousMonthButton.element.setAttribute('aria-label', global.params.axShowPreviousMonth);
/** if (!global.params.isFormControlsRefreshEnabled) {
* @type {!CalendarNavigationButton} /**
* @const * @type {!CalendarNavigationButton}
*/ * @const
this._todayButton = new CalendarNavigationButton(); */
this._todayButton.attachTo(this); this._todayButton = new CalendarNavigationButton();
this._todayButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onNavigationButtonClick); this._todayButton.attachTo(this);
this._todayButton.element.classList.add(CalendarHeaderView.ClassNameTodayButton); this._todayButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onNavigationButtonClick);
var monthContainingToday = Month.createFromToday(); this._todayButton.element.classList.add(CalendarHeaderView.GetClassNameTodayButton());
this._todayButton.setDisabled( var monthContainingToday = Month.createFromToday();
monthContainingToday < this.calendarPicker.minimumMonth || this._todayButton.setDisabled(
monthContainingToday > this.calendarPicker.maximumMonth); monthContainingToday < this.calendarPicker.minimumMonth ||
this._todayButton.element.setAttribute('aria-label', global.params.todayLabel); monthContainingToday > this.calendarPicker.maximumMonth);
this._todayButton.element.setAttribute('aria-label', global.params.todayLabel);
}
/** /**
* @type {!CalendarNavigationButton} * @type {!CalendarNavigationButton}
...@@ -2953,11 +2956,11 @@ function CalendarHeaderView(calendarPicker) { ...@@ -2953,11 +2956,11 @@ function CalendarHeaderView(calendarPicker) {
this._nextMonthButton.element.setAttribute('aria-label', global.params.axShowNextMonth); this._nextMonthButton.element.setAttribute('aria-label', global.params.axShowNextMonth);
if (global.params.isLocaleRTL) { if (global.params.isLocaleRTL) {
this._nextMonthButton.element.innerHTML = CalendarHeaderView._BackwardTriangle; this._nextMonthButton.element.innerHTML = CalendarHeaderView.GetBackwardTriangle();
this._previousMonthButton.element.innerHTML = CalendarHeaderView._ForwardTriangle; this._previousMonthButton.element.innerHTML = CalendarHeaderView.GetForwardTriangle();
} else { } else {
this._nextMonthButton.element.innerHTML = CalendarHeaderView._ForwardTriangle; this._nextMonthButton.element.innerHTML = CalendarHeaderView.GetForwardTriangle();
this._previousMonthButton.element.innerHTML = CalendarHeaderView._BackwardTriangle; this._previousMonthButton.element.innerHTML = CalendarHeaderView.GetBackwardTriangle();
} }
} }
...@@ -2967,11 +2970,38 @@ CalendarHeaderView.Height = 24; ...@@ -2967,11 +2970,38 @@ CalendarHeaderView.Height = 24;
CalendarHeaderView.BottomMargin = 10; CalendarHeaderView.BottomMargin = 10;
CalendarHeaderView._ForwardTriangle = CalendarHeaderView._ForwardTriangle =
'<svg width=\'4\' height=\'7\'><polygon points=\'0,7 0,0, 4,3.5\' style=\'fill:#6e6e6e;\' /></svg>'; '<svg width=\'4\' height=\'7\'><polygon points=\'0,7 0,0, 4,3.5\' style=\'fill:#6e6e6e;\' /></svg>';
CalendarHeaderView._ForwardTriangleRefresh =
'<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\
<path d=\"M15.3516 8.60156L8 15.9531L0.648438 8.60156L1.35156 7.89844L7.5 14.0469V0H8.5V14.0469L14.6484 7.89844L15.3516 8.60156Z\" fill=\"#101010\"/>\
</svg>'
CalendarHeaderView.GetForwardTriangle = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarHeaderView._ForwardTriangleRefresh;
}
return CalendarHeaderView._ForwardTriangle;
}
CalendarHeaderView._BackwardTriangle = CalendarHeaderView._BackwardTriangle =
'<svg width=\'4\' height=\'7\'><polygon points=\'0,3.5 4,7 4,0\' style=\'fill:#6e6e6e;\' /></svg>'; '<svg width=\'4\' height=\'7\'><polygon points=\'0,3.5 4,7 4,0\' style=\'fill:#6e6e6e;\' /></svg>';
CalendarHeaderView._BackwardTriangleRefresh =
'<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\
<path d=\"M14.6484 8.10156L8.5 1.95312V16H7.5V1.95312L1.35156 8.10156L0.648438 7.39844L8 0.046875L15.3516 7.39844L14.6484 8.10156Z\" fill=\"#101010\"/>\
</svg>'
CalendarHeaderView.GetBackwardTriangle = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarHeaderView._BackwardTriangleRefresh;
}
return CalendarHeaderView._BackwardTriangle;
}
CalendarHeaderView.ClassNameCalendarHeaderView = 'calendar-header-view'; CalendarHeaderView.ClassNameCalendarHeaderView = 'calendar-header-view';
CalendarHeaderView.ClassNameCalendarTitle = 'calendar-title'; CalendarHeaderView.ClassNameCalendarTitle = 'calendar-title';
CalendarHeaderView.ClassNameTodayButton = 'today-button'; CalendarHeaderView.ClassNameTodayButton = 'today-button';
CalendarHeaderView.ClassNameTodayButtonRefresh = 'today-button-refresh';
CalendarHeaderView.GetClassNameTodayButton = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarHeaderView.ClassNameTodayButtonRefresh;
}
return CalendarHeaderView.ClassNameTodayButton;
}
CalendarHeaderView.prototype.onCurrentMonthChanged = function() { CalendarHeaderView.prototype.onCurrentMonthChanged = function() {
this.monthPopupButton.setCurrentMonth(this.calendarPicker.currentMonth()); this.monthPopupButton.setCurrentMonth(this.calendarPicker.currentMonth());
...@@ -2997,15 +3027,22 @@ CalendarHeaderView.prototype.onNavigationButtonClick = function(sender) { ...@@ -2997,15 +3027,22 @@ CalendarHeaderView.prototype.onNavigationButtonClick = function(sender) {
*/ */
CalendarHeaderView.prototype.setDisabled = function(disabled) { CalendarHeaderView.prototype.setDisabled = function(disabled) {
this.disabled = disabled; this.disabled = disabled;
if (global.params.isFormControlsRefreshEnabled) {
this._previousMonthButton.element.style.visibility = this.disabled ? 'hidden' : 'visible';
this._nextMonthButton.element.style.visibility = this.disabled ? 'hidden' : 'visible';
}
this.monthPopupButton.element.disabled = this.disabled; this.monthPopupButton.element.disabled = this.disabled;
this._previousMonthButton.setDisabled( this._previousMonthButton.setDisabled(
this.disabled || this.calendarPicker.currentMonth() <= this.calendarPicker.minimumMonth); this.disabled || this.calendarPicker.currentMonth() <= this.calendarPicker.minimumMonth);
this._nextMonthButton.setDisabled( this._nextMonthButton.setDisabled(
this.disabled || this.calendarPicker.currentMonth() >= this.calendarPicker.maximumMonth); this.disabled || this.calendarPicker.currentMonth() >= this.calendarPicker.maximumMonth);
var monthContainingToday = Month.createFromToday(); if (this._todayButton) {
this._todayButton.setDisabled( var monthContainingToday = Month.createFromToday();
this.disabled || monthContainingToday < this.calendarPicker.minimumMonth || this._todayButton.setDisabled(
monthContainingToday > this.calendarPicker.maximumMonth); this.disabled || monthContainingToday < this.calendarPicker.minimumMonth ||
monthContainingToday > this.calendarPicker.maximumMonth);
}
}; };
/** /**
...@@ -3015,9 +3052,9 @@ CalendarHeaderView.prototype.setDisabled = function(disabled) { ...@@ -3015,9 +3052,9 @@ CalendarHeaderView.prototype.setDisabled = function(disabled) {
function DayCell() { function DayCell() {
ListCell.call(this); ListCell.call(this);
this.element.classList.add(DayCell.ClassNameDayCell); this.element.classList.add(DayCell.ClassNameDayCell);
this.element.style.width = DayCell.Width + 'px'; this.element.style.width = DayCell.GetWidth() + 'px';
this.element.style.height = DayCell.Height + 'px'; this.element.style.height = DayCell.GetHeight() + 'px';
this.element.style.lineHeight = (DayCell.Height - DayCell.PaddingSize * 2) + 'px'; this.element.style.lineHeight = (DayCell.GetHeight() - DayCell.PaddingSize * 2) + 'px';
this.element.setAttribute('role', 'gridcell'); this.element.setAttribute('role', 'gridcell');
/** /**
* @type {?Day} * @type {?Day}
...@@ -3027,8 +3064,22 @@ function DayCell() { ...@@ -3027,8 +3064,22 @@ function DayCell() {
DayCell.prototype = Object.create(ListCell.prototype); DayCell.prototype = Object.create(ListCell.prototype);
DayCell.Width = 34; DayCell._Width = 34;
DayCell.Height = hasInaccuratePointingDevice() ? 34 : 20; DayCell._WidthRefresh = 28;
DayCell.GetWidth = function() {
if (global.params.isFormControlsRefreshEnabled) {
return DayCell._WidthRefresh;
}
return DayCell._Width;
}
DayCell._Height = hasInaccuratePointingDevice() ? 34 : 20;
DayCell._HeightRefresh = 28;
DayCell.GetHeight = function() {
if (global.params.isFormControlsRefreshEnabled) {
return DayCell._HeightRefresh;
}
return DayCell._Height;
}
DayCell.PaddingSize = 1; DayCell.PaddingSize = 1;
DayCell.ClassNameDayCell = 'day-cell'; DayCell.ClassNameDayCell = 'day-cell';
DayCell.ClassNameHighlighted = 'highlighted'; DayCell.ClassNameHighlighted = 'highlighted';
...@@ -3120,8 +3171,8 @@ function WeekNumberCell() { ...@@ -3120,8 +3171,8 @@ function WeekNumberCell() {
ListCell.call(this); ListCell.call(this);
this.element.classList.add(WeekNumberCell.ClassNameWeekNumberCell); this.element.classList.add(WeekNumberCell.ClassNameWeekNumberCell);
this.element.style.width = (WeekNumberCell.Width - WeekNumberCell.SeparatorWidth) + 'px'; this.element.style.width = (WeekNumberCell.Width - WeekNumberCell.SeparatorWidth) + 'px';
this.element.style.height = WeekNumberCell.Height + 'px'; this.element.style.height = WeekNumberCell.GetHeight() + 'px';
this.element.style.lineHeight = (WeekNumberCell.Height - WeekNumberCell.PaddingSize * 2) + 'px'; this.element.style.lineHeight = (WeekNumberCell.GetHeight() - WeekNumberCell.PaddingSize * 2) + 'px';
/** /**
* @type {?Week} * @type {?Week}
*/ */
...@@ -3131,7 +3182,14 @@ function WeekNumberCell() { ...@@ -3131,7 +3182,14 @@ function WeekNumberCell() {
WeekNumberCell.prototype = Object.create(ListCell.prototype); WeekNumberCell.prototype = Object.create(ListCell.prototype);
WeekNumberCell.Width = 48; WeekNumberCell.Width = 48;
WeekNumberCell.Height = DayCell.Height; WeekNumberCell._Height = DayCell._Height;
WeekNumberCell._HeightRefresh = DayCell._HeightRefresh;
WeekNumberCell.GetHeight = function() {
if (global.params.isFormControlsRefreshEnabled) {
return WeekNumberCell._HeightRefresh;
}
return WeekNumberCell._Height;
}
WeekNumberCell.SeparatorWidth = 1; WeekNumberCell.SeparatorWidth = 1;
WeekNumberCell.PaddingSize = 1; WeekNumberCell.PaddingSize = 1;
WeekNumberCell.ClassNameWeekNumberCell = 'week-number-cell'; WeekNumberCell.ClassNameWeekNumberCell = 'week-number-cell';
...@@ -3208,7 +3266,7 @@ function CalendarTableHeaderView(hasWeekNumberColumn) { ...@@ -3208,7 +3266,7 @@ function CalendarTableHeaderView(hasWeekNumberColumn) {
for (var i = 0; i < DaysPerWeek; ++i) { for (var i = 0; i < DaysPerWeek; ++i) {
var weekDayNumber = (global.params.weekStartDay + i) % DaysPerWeek; var weekDayNumber = (global.params.weekStartDay + i) % DaysPerWeek;
var labelElement = createElement('div', 'week-day-label', global.params.dayLabels[weekDayNumber]); var labelElement = createElement('div', 'week-day-label', global.params.dayLabels[weekDayNumber]);
labelElement.style.width = DayCell.Width + 'px'; labelElement.style.width = DayCell.GetWidth() + 'px';
this.element.appendChild(labelElement); this.element.appendChild(labelElement);
if (getLanguage() === 'ja') { if (getLanguage() === 'ja') {
if (weekDayNumber === 0) if (weekDayNumber === 0)
...@@ -3221,7 +3279,14 @@ function CalendarTableHeaderView(hasWeekNumberColumn) { ...@@ -3221,7 +3279,14 @@ function CalendarTableHeaderView(hasWeekNumberColumn) {
CalendarTableHeaderView.prototype = Object.create(View.prototype); CalendarTableHeaderView.prototype = Object.create(View.prototype);
CalendarTableHeaderView.Height = 25; CalendarTableHeaderView._Height = 25;
CalendarTableHeaderView._HeightRefresh = 29;
CalendarTableHeaderView.GetHeight = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarTableHeaderView._HeightRefresh;
}
return CalendarTableHeaderView._Height;
}
/** /**
* @constructor * @constructor
...@@ -3230,7 +3295,7 @@ CalendarTableHeaderView.Height = 25; ...@@ -3230,7 +3295,7 @@ CalendarTableHeaderView.Height = 25;
function CalendarRowCell() { function CalendarRowCell() {
ListCell.call(this); ListCell.call(this);
this.element.classList.add(CalendarRowCell.ClassNameCalendarRowCell); this.element.classList.add(CalendarRowCell.ClassNameCalendarRowCell);
this.element.style.height = CalendarRowCell.Height + 'px'; this.element.style.height = CalendarRowCell.GetHeight() + 'px';
this.element.setAttribute('role', 'row'); this.element.setAttribute('role', 'row');
/** /**
...@@ -3250,7 +3315,14 @@ function CalendarRowCell() { ...@@ -3250,7 +3315,14 @@ function CalendarRowCell() {
CalendarRowCell.prototype = Object.create(ListCell.prototype); CalendarRowCell.prototype = Object.create(ListCell.prototype);
CalendarRowCell.Height = DayCell.Height; CalendarRowCell._Height = DayCell._Height;
CalendarRowCell._HeightRefresh = DayCell._HeightRefresh;
CalendarRowCell.GetHeight = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarRowCell._HeightRefresh;
}
return CalendarRowCell._Height;
}
CalendarRowCell.ClassNameCalendarRowCell = 'calendar-row-cell'; CalendarRowCell.ClassNameCalendarRowCell = 'calendar-row-cell';
CalendarRowCell._recycleBin = []; CalendarRowCell._recycleBin = [];
...@@ -3325,15 +3397,33 @@ function CalendarTableView(calendarPicker) { ...@@ -3325,15 +3397,33 @@ function CalendarTableView(calendarPicker) {
var headerView = new CalendarTableHeaderView(this.hasWeekNumberColumn); var headerView = new CalendarTableHeaderView(this.hasWeekNumberColumn);
headerView.attachTo(this, this.scrollView); headerView.attachTo(this, this.scrollView);
if (global.params.isFormControlsRefreshEnabled) {
/**
* @type {!CalendarNavigationButton}
* @const
*/
var todayButton = new CalendarNavigationButton();
todayButton.attachTo(this);
todayButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onTodayButtonClick);
todayButton.element.textContent = global.params.todayLabel;
todayButton.element.classList.add(CalendarHeaderView.GetClassNameTodayButton());
var monthContainingToday = Month.createFromToday();
todayButton.setDisabled(
monthContainingToday < this.calendarPicker.minimumMonth ||
monthContainingToday > this.calendarPicker.maximumMonth);
todayButton.element.setAttribute('aria-label', global.params.todayLabel);
}
if (this.hasWeekNumberColumn) { if (this.hasWeekNumberColumn) {
this.setWidth(DayCell.Width * DaysPerWeek + WeekNumberCell.Width); this.setWidth(DayCell.GetWidth() * DaysPerWeek + WeekNumberCell.Width);
/** /**
* @type {?Array} * @type {?Array}
* @const * @const
*/ */
this._weekNumberCells = []; this._weekNumberCells = [];
} else { } else {
this.setWidth(DayCell.Width * DaysPerWeek); this.setWidth(DayCell.GetWidth() * DaysPerWeek);
} }
/** /**
...@@ -3354,7 +3444,22 @@ function CalendarTableView(calendarPicker) { ...@@ -3354,7 +3444,22 @@ function CalendarTableView(calendarPicker) {
CalendarTableView.prototype = Object.create(ListView.prototype); CalendarTableView.prototype = Object.create(ListView.prototype);
CalendarTableView.BorderWidth = 1; CalendarTableView._BorderWidth = 1;
CalendarTableView._BorderWidthRefresh = 0;
CalendarTableView.GetBorderWidth = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarTableView._BorderWidthRefresh;
}
return CalendarTableView._BorderWidth;
}
CalendarTableView._TodayButtonHeight = 0;
CalendarTableView._TodayButtonHeightRefresh = 28;
CalendarTableView.GetTodayButtonHeight = function() {
if (global.params.isFormControlsRefreshEnabled) {
return CalendarTableView._TodayButtonHeightRefresh;
}
return CalendarTableView._TodayButtonHeight;
}
CalendarTableView.ClassNameCalendarTableView = 'calendar-table-view'; CalendarTableView.ClassNameCalendarTableView = 'calendar-table-view';
/** /**
...@@ -3362,7 +3467,7 @@ CalendarTableView.ClassNameCalendarTableView = 'calendar-table-view'; ...@@ -3362,7 +3467,7 @@ CalendarTableView.ClassNameCalendarTableView = 'calendar-table-view';
* @return {!number} * @return {!number}
*/ */
CalendarTableView.prototype.rowAtScrollOffset = function(scrollOffset) { CalendarTableView.prototype.rowAtScrollOffset = function(scrollOffset) {
return Math.floor(scrollOffset / CalendarRowCell.Height); return Math.floor(scrollOffset / CalendarRowCell.GetHeight());
}; };
/** /**
...@@ -3370,7 +3475,7 @@ CalendarTableView.prototype.rowAtScrollOffset = function(scrollOffset) { ...@@ -3370,7 +3475,7 @@ CalendarTableView.prototype.rowAtScrollOffset = function(scrollOffset) {
* @return {!number} * @return {!number}
*/ */
CalendarTableView.prototype.scrollOffsetForRow = function(row) { CalendarTableView.prototype.scrollOffsetForRow = function(row) {
return row * CalendarRowCell.Height; return row * CalendarRowCell.GetHeight();
}; };
/** /**
...@@ -3392,6 +3497,10 @@ CalendarTableView.prototype.onClick = function(event) { ...@@ -3392,6 +3497,10 @@ CalendarTableView.prototype.onClick = function(event) {
this.calendarPicker.selectRangeContainingDay(dayCell.day); this.calendarPicker.selectRangeContainingDay(dayCell.day);
}; };
CalendarTableView.prototype.onTodayButtonClick = function(sender) {
this.calendarPicker.selectRangeContainingDay(Day.createFromToday());
}
/** /**
* @param {?Event} event * @param {?Event} event
*/ */
...@@ -3439,14 +3548,17 @@ CalendarTableView.prototype.prepareNewCell = function(row) { ...@@ -3439,14 +3548,17 @@ CalendarTableView.prototype.prepareNewCell = function(row) {
* @return {!number} Height in pixels. * @return {!number} Height in pixels.
*/ */
CalendarTableView.prototype.height = function() { CalendarTableView.prototype.height = function() {
return this.scrollView.height() + CalendarTableHeaderView.Height + CalendarTableView.BorderWidth * 2; return this.scrollView.height() + CalendarTableHeaderView.GetHeight() + CalendarTableView.GetBorderWidth() * 2 + CalendarTableView.GetTodayButtonHeight();
}; };
/** /**
* @param {!number} height Height in pixels. * @param {!number} height Height in pixels.
*/ */
CalendarTableView.prototype.setHeight = function(height) { CalendarTableView.prototype.setHeight = function(height) {
this.scrollView.setHeight(height - CalendarTableHeaderView.Height - CalendarTableView.BorderWidth * 2); this.scrollView.setHeight(height - CalendarTableHeaderView.GetHeight() - CalendarTableView.GetBorderWidth() * 2 - CalendarTableView.GetTodayButtonHeight());
if (global.params.isFormControlsRefreshEnabled) {
this.element.style.height = height + 'px';
}
}; };
/** /**
...@@ -3689,6 +3801,7 @@ CalendarPicker.ClassNameCalendarPicker = 'calendar-picker'; ...@@ -3689,6 +3801,7 @@ CalendarPicker.ClassNameCalendarPicker = 'calendar-picker';
CalendarPicker.ClassNamePreparing = 'preparing'; CalendarPicker.ClassNamePreparing = 'preparing';
CalendarPicker.EventTypeCurrentMonthChanged = 'currentMonthChanged'; CalendarPicker.EventTypeCurrentMonthChanged = 'currentMonthChanged';
CalendarPicker.commitDelayMs = 100; CalendarPicker.commitDelayMs = 100;
CalendarPicker.VisibleRowsRefresh = 6;
/** /**
* @param {!Event} event * @param {!Event} event
...@@ -3794,9 +3907,9 @@ CalendarPicker.prototype.setCurrentMonth = function(month, behavior) { ...@@ -3794,9 +3907,9 @@ CalendarPicker.prototype.setCurrentMonth = function(month, behavior) {
CalendarPicker.prototype.adjustHeight = function() { CalendarPicker.prototype.adjustHeight = function() {
var rowForFirstDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.firstDay()).row; var rowForFirstDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.firstDay()).row;
var rowForLastDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.lastDay()).row; var rowForLastDayInMonth = this.calendarTableView.columnAndRowForDay(this._currentMonth.lastDay()).row;
var numberOfRows = rowForLastDayInMonth - rowForFirstDayInMonth + 1; var numberOfRows = global.params.isFormControlsRefreshEnabled ? CalendarPicker.VisibleRowsRefresh : rowForLastDayInMonth - rowForFirstDayInMonth + 1;
var calendarTableViewHeight = var calendarTableViewHeight =
CalendarTableHeaderView.Height + numberOfRows * DayCell.Height + CalendarTableView.BorderWidth * 2; CalendarTableHeaderView.GetHeight() + numberOfRows * DayCell.GetHeight() + CalendarTableView.GetBorderWidth() * 2 + CalendarTableView.GetTodayButtonHeight();
var height = (this.monthPopupView.isVisible ? YearListView.Height : calendarTableViewHeight) + var height = (this.monthPopupView.isVisible ? YearListView.Height : calendarTableViewHeight) +
CalendarHeaderView.Height + CalendarHeaderView.BottomMargin + CalendarPicker.Padding * 2 + CalendarHeaderView.Height + CalendarHeaderView.BottomMargin + CalendarPicker.Padding * 2 +
CalendarPicker.BorderWidth * 2; CalendarPicker.BorderWidth * 2;
...@@ -3827,6 +3940,9 @@ CalendarPicker.prototype.firstVisibleDay = function() { ...@@ -3827,6 +3940,9 @@ CalendarPicker.prototype.firstVisibleDay = function() {
*/ */
CalendarPicker.prototype.lastVisibleDay = function() { CalendarPicker.prototype.lastVisibleDay = function() {
var lastVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().lastDay()).row; var lastVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().lastDay()).row;
if (global.params.isFormControlsRefreshEnabled) {
lastVisibleRow = this.calendarTableView.columnAndRowForDay(this.currentMonth().firstDay()).row + CalendarPicker.VisibleRowsRefresh - 1;
}
var lastVisibleDay = this.calendarTableView.dayAtColumnAndRow(DaysPerWeek - 1, lastVisibleRow); var lastVisibleDay = this.calendarTableView.dayAtColumnAndRow(DaysPerWeek - 1, lastVisibleRow);
if (!lastVisibleDay) if (!lastVisibleDay)
lastVisibleDay = Day.Maximum; lastVisibleDay = Day.Maximum;
...@@ -4019,7 +4135,7 @@ CalendarPicker.prototype.onCalendarTableKeyDown = function(event) { ...@@ -4019,7 +4135,7 @@ CalendarPicker.prototype.onCalendarTableKeyDown = function(event) {
*/ */
CalendarPicker.prototype.width = function() { CalendarPicker.prototype.width = function() {
return this.calendarTableView.width() + return this.calendarTableView.width() +
(CalendarTableView.BorderWidth + CalendarPicker.BorderWidth + CalendarPicker.Padding) * 2; (CalendarTableView.GetBorderWidth() + CalendarPicker.BorderWidth + CalendarPicker.Padding) * 2;
}; };
/** /**
...@@ -4039,7 +4155,7 @@ CalendarPicker.prototype.setHeight = function(height) { ...@@ -4039,7 +4155,7 @@ CalendarPicker.prototype.setHeight = function(height) {
resizeWindow(this.width(), this._height); resizeWindow(this.width(), this._height);
this.calendarTableView.setHeight( this.calendarTableView.setHeight(
this._height - CalendarHeaderView.Height - CalendarHeaderView.BottomMargin - CalendarPicker.Padding * 2 - this._height - CalendarHeaderView.Height - CalendarHeaderView.BottomMargin - CalendarPicker.Padding * 2 -
CalendarTableView.BorderWidth * 2); CalendarPicker.BorderWidth * 2);
}; };
/** /**
......
third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css 0 → 100644
View file @ de76679b
/* Copyright (C) 2019 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
body {
font: 12px "Segoe UI", system-ui, Roboto, Ubuntu, sans-serif;
}
.calendar-picker {
background-color: #ffffff;
border-radius: 2px;
}
.calendar-table-view {
border: 0;
}
.calendar-table-header-view {
background-color: #ffffff;
border: 0;
height: 29px;
}
.week-day-label {
line-height: 28px;
}
.calendar-navigation-button {
-webkit-align-self: center;
background-color: #ffffff;
border: 0;
color: #101010;
padding: 0;
text-align: center;
width: 28px;
}
.calendar-navigation-button svg {
padding-top: 4px;
}
.calendar-navigation-button:hover {
background-color: #F3F3F3;
}
.calendar-navigation-button:disabled {
color: #C5C5C5;
}
.calendar-title {
-webkit-align-self: flex-start;
flex: 1;
text-align: left;
}
.month-popup-button {
border-width: 0px !important;
font-weight: bold;
padding: 0;
}
.month-popup-button .disclosure-triangle {
margin: 0;
margin-inline-start: 4px;
}
.day-cell {
background-color: #ffffff;
border: 0;
border-radius: 2px;
color: #767676;
padding: 1px;
text-align: center;
}
.day-cell.current-month {
color: #101010;
}
.week-number-cell.highlighted,
.day-cell.highlighted {
background-color: #F3F3F3;
}
.week-number-cell.selected,
.day-cell.selected {
background-color: #D9EBF9;
font-weight: bold;
}
.week-number-cell.disabled,
.day-cell.disabled {
background-color: #ffffff;
color: #C5C5C5;
}
.day-cell.highlighted.today,
.day-cell.today {
background-color: #0078D4;
border: 0;
color: #FFFFFF;
font-weight: bold;
}
.today-button-refresh {
border: 0;
bottom: 12px;
color: #0078D4;
font-size: 12px;
height: 20px;
padding: 4px;
position: absolute;
right: 20px;
width: auto;
}
third_party/blink/renderer/platform/text/locale_icu.cc
View file @ de76679b
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
#include "base/memory/ptr_util.h" #include "base/memory/ptr_util.h"
#include "base/stl_util.h" #include "base/stl_util.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/wtf/date_math.h" #include "third_party/blink/renderer/platform/wtf/date_math.h"
#include "third_party/blink/renderer/platform/wtf/text/string_buffer.h" #include "third_party/blink/renderer/platform/wtf/text/string_buffer.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h" #include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
...@@ -248,8 +249,13 @@ void LocaleICU::InitializeCalendar() { ...@@ -248,8 +249,13 @@ void LocaleICU::InitializeCalendar() {
UCAL_FIRST_DAY_OF_WEEK) - UCAL_FIRST_DAY_OF_WEEK) -
UCAL_SUNDAY; UCAL_SUNDAY;
week_day_short_labels_ = CreateLabelVector( if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
short_date_format_, UDAT_SHORT_WEEKDAYS, UCAL_SUNDAY, 7); week_day_short_labels_ = CreateLabelVector(
short_date_format_, UDAT_NARROW_WEEKDAYS, UCAL_SUNDAY, 7);
} else {
week_day_short_labels_ = CreateLabelVector(
short_date_format_, UDAT_SHORT_WEEKDAYS, UCAL_SUNDAY, 7);
}
if (!week_day_short_labels_) if (!week_day_short_labels_)
week_day_short_labels_ = CreateFallbackWeekDayShortLabels(); week_day_short_labels_ = CreateFallbackWeekDayShortLabels();
} }
......
third_party/blink/renderer/platform/text/locale_mac.mm
View file @ de76679b
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
#include "base/memory/ptr_util.h" #include "base/memory/ptr_util.h"
#include "base/stl_util.h" #include "base/stl_util.h"
#include "third_party/blink/renderer/platform/language.h" #include "third_party/blink/renderer/platform/language.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/web_test_support.h" #include "third_party/blink/renderer/platform/web_test_support.h"
#include "third_party/blink/renderer/platform/wtf/date_math.h" #include "third_party/blink/renderer/platform/wtf/date_math.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h" #include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
...@@ -135,7 +136,9 @@ const Vector<String>& LocaleMac::WeekDayShortLabels() { ...@@ -135,7 +136,9 @@ const Vector<String>& LocaleMac::WeekDayShortLabels() {
if (!week_day_short_labels_.IsEmpty()) if (!week_day_short_labels_.IsEmpty())
return week_day_short_labels_; return week_day_short_labels_;
week_day_short_labels_.ReserveCapacity(7); week_day_short_labels_.ReserveCapacity(7);
NSArray* array = [ShortDateFormatter() shortWeekdaySymbols]; NSArray* array = RuntimeEnabledFeatures::FormControlsRefreshEnabled()
? [ShortDateFormatter() veryShortWeekdaySymbols]
: [ShortDateFormatter() shortWeekdaySymbols];
if ([array count] == 7) { if ([array count] == 7) {
for (unsigned i = 0; i < 7; ++i) for (unsigned i = 0; i < 7; ++i)
week_day_short_labels_.push_back(String([array objectAtIndex:i])); week_day_short_labels_.push_back(String([array objectAtIndex:i]));
......
third_party/blink/renderer/platform/text/locale_win.cc
View file @ de76679b
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
#include "base/memory/ptr_util.h" #include "base/memory/ptr_util.h"
#include "base/stl_util.h" #include "base/stl_util.h"
#include "third_party/blink/renderer/platform/language.h" #include "third_party/blink/renderer/platform/language.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/text/date_components.h" #include "third_party/blink/renderer/platform/text/date_components.h"
#include "third_party/blink/renderer/platform/text/date_time_format.h" #include "third_party/blink/renderer/platform/text/date_time_format.h"
#include "third_party/blink/renderer/platform/web_test_support.h" #include "third_party/blink/renderer/platform/web_test_support.h"
...@@ -295,9 +296,19 @@ void LocaleWin::EnsureWeekDayShortLabels() { ...@@ -295,9 +296,19 @@ void LocaleWin::EnsureWeekDayShortLabels() {
LOCALE_SABBREVDAYNAME2, LOCALE_SABBREVDAYNAME3, LOCALE_SABBREVDAYNAME2, LOCALE_SABBREVDAYNAME3,
LOCALE_SABBREVDAYNAME4, LOCALE_SABBREVDAYNAME5, LOCALE_SABBREVDAYNAME4, LOCALE_SABBREVDAYNAME5,
LOCALE_SABBREVDAYNAME6}; LOCALE_SABBREVDAYNAME6};
const LCTYPE kTypesRefresh[7] = {
LOCALE_SSHORTESTDAYNAME7, // Sunday
LOCALE_SSHORTESTDAYNAME1, // Monday
LOCALE_SSHORTESTDAYNAME2, LOCALE_SSHORTESTDAYNAME3,
LOCALE_SSHORTESTDAYNAME4, LOCALE_SSHORTESTDAYNAME5,
LOCALE_SSHORTESTDAYNAME6};
week_day_short_labels_.ReserveCapacity(base::size(kTypes)); week_day_short_labels_.ReserveCapacity(base::size(kTypes));
for (unsigned i = 0; i < base::size(kTypes); ++i) { for (unsigned i = 0; i < base::size(kTypes); ++i) {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypes[i])); if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypesRefresh[i]));
} else {
week_day_short_labels_.push_back(GetLocaleInfoString(kTypes[i]));
}
if (week_day_short_labels_.back().IsEmpty()) { if (week_day_short_labels_.back().IsEmpty()) {
week_day_short_labels_.Shrink(0); week_day_short_labels_.Shrink(0);
week_day_short_labels_.ReserveCapacity(base::size(WTF::kWeekdayName)); week_day_short_labels_.ReserveCapacity(base::size(WTF::kWeekdayName));
......
third_party/blink/web_tests/fast/forms/calendar-picker/resources/calendar-picker-common.js
View file @ de76679b
...@@ -69,8 +69,8 @@ function hoverOverDayCellAt(column, row) { ...@@ -69,8 +69,8 @@ function hoverOverDayCellAt(column, row) {
var y = offset[1]; var y = offset[1];
if (popupWindow.global.picker.calendarTableView.hasWeekNumberColumn) if (popupWindow.global.picker.calendarTableView.hasWeekNumberColumn)
x += popupWindow.WeekNumberCell.Width; x += popupWindow.WeekNumberCell.Width;
x += (column + 0.5) * popupWindow.DayCell.Width; x += (column + 0.5) * popupWindow.DayCell.GetWidth();
y += (row + 0.5) * popupWindow.DayCell.Height + popupWindow.CalendarTableHeaderView.Height; y += (row + 0.5) * popupWindow.DayCell.GetHeight() + popupWindow.CalendarTableHeaderView.GetHeight();
eventSender.mouseMoveTo(x, y); eventSender.mouseMoveTo(x, y);
}; };
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-coarse.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="10000-12-31">
<script>
internals.settings.setAvailablePointerTypes('fine,coarse');
internals.settings.setPrimaryPointerType('fine')
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-rtl.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<html dir="rtl">
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="1800-05-12" lang="ar-AE">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
</html>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-step.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<!-- Check if step attribute is reflected in the appearance of the calendar picker. -->
<input type="date" id="date" value="2010-12-31" step="3">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-zoom150.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<body style="zoom: 1.5">
<p>Calendar picker should respect zoom level.</p>
<input type=date id=date value="2013-01-10">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="10000-12-31">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-disabled-values.html 0 → 100644
View file @ de76679b
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date min="2019-06-02" value="2019-06-11" max="2019-06-23">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment