SuggestionPicker should support rtl
authorkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 27 Sep 2012 08:17:24 +0000 (08:17 +0000)
committerkeishi@webkit.org <keishi@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 27 Sep 2012 08:17:24 +0000 (08:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=97555

Reviewed by Kent Tamura.

.:

* ManualTests/forms/calendar-picker.html: Added tests for Arabic with datalist.

Source/WebCore:

Add support for rtl to SuggestionPicker. We add another parameter
because text direction for the calendar picker should depend on the UI
language but the text direction for suggestion picker should depend on
the input element style.

Test: platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html

* Resources/pagepopups/calendarPicker.js:
(CalendarPicker.prototype._layout):
* Resources/pagepopups/pickerCommon.css:
(.rtl): Added so we can change styles when in rtl mode.
* Resources/pagepopups/suggestionPicker.css:
(.suggestion-list-entry .label):
(.rtl .suggestion-list-entry .label): Change float direction to left.
* Resources/pagepopups/suggestionPicker.js:
(SuggestionPicker.prototype._layout):
* html/shadow/CalendarPickerElement.cpp:
(WebCore::CalendarPickerElement::openPopup): Set isAnchorElementRTL to true if the input element is rtl.
* platform/DateTimeChooser.h:
(DateTimeChooserParameters): Added isAnchorElementRTL.

Source/WebKit/chromium:

* src/DateTimeChooserImpl.cpp:
(WebKit::DateTimeChooserImpl::writeDocument):

LayoutTests:

* platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png: Added.
* platform/chromium/TestExpectations:
* platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.txt: Added.
* platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html: Added.

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

16 files changed:
ChangeLog
LayoutTests/ChangeLog
LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png [new file with mode: 0644]
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.txt [new file with mode: 0644]
LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html [new file with mode: 0644]
ManualTests/forms/calendar-picker.html
Source/WebCore/ChangeLog
Source/WebCore/Resources/pagepopups/calendarPicker.js
Source/WebCore/Resources/pagepopups/pickerCommon.css
Source/WebCore/Resources/pagepopups/suggestionPicker.css
Source/WebCore/Resources/pagepopups/suggestionPicker.js
Source/WebCore/html/shadow/CalendarPickerElement.cpp
Source/WebCore/platform/DateTimeChooser.h
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/src/DateTimeChooserImpl.cpp

index baee8ef..0476546 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,12 @@
+2012-09-27  Keishi Hattori  <keishi@webkit.org>
+
+        SuggestionPicker should support rtl
+        https://bugs.webkit.org/show_bug.cgi?id=97555
+
+        Reviewed by Kent Tamura.
+
+        * ManualTests/forms/calendar-picker.html: Added tests for Arabic with datalist.
+
 2012-09-27  Patrick Gansterer  <paroga@webkit.org>
 
         [WINCE] Enable JIT by default
index 92d1b0b..a81993c 100644 (file)
@@ -1,3 +1,15 @@
+2012-09-27  Keishi Hattori  <keishi@webkit.org>
+
+        SuggestionPicker should support rtl
+        https://bugs.webkit.org/show_bug.cgi?id=97555
+
+        Reviewed by Kent Tamura.
+
+        * platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png: Added.
+        * platform/chromium/TestExpectations:
+        * platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.txt: Added.
+        * platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html: Added.
+
 2012-09-27  Christophe Dumez  <christophe.dumez@intel.com>
 
         [EFL] fast/layers/video-layer.html needs rebaselining after r129687
diff --git a/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png
new file mode 100644 (file)
index 0000000..a46eb6e
Binary files /dev/null and b/LayoutTests/platform/chromium-mac/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.png differ
index 0de940f..225ed11 100644 (file)
@@ -3506,6 +3506,8 @@ webkit.org/b/89167 media/track/track-cue-rendering-snap-to-lines-not-set.html [
 
 webkit.org/b/95588 [ Mac ] fast/dom/shadow/shadowdom-for-textarea-complex-shadow.html [ ImageOnlyFailure ]
 
+webkit.org/b/97558 [ Win Linux ] platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html [ ImageOnlyFailure ]
+
 webkit.org/b/95070 [ Win Release ] inspector/styles/media-queries.html [ Failure Pass ]
 
 webkit.org/b/95101 [ SnowLeopard ] fast/text/atsui-bidi-control.html [ Pass Timeout ]
diff --git a/LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.txt b/LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl-expected.txt
new file mode 100644 (file)
index 0000000..8d1c8b6
--- /dev/null
@@ -0,0 +1 @@
diff --git a/LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html b/LayoutTests/platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html
new file mode 100644 (file)
index 0000000..80b4100
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<body dir="rtl" style="padding: 0 50px;">
+<input type=date id=date list=suggestions style="width: 100px;">
+<datalist id=suggestions>
+    <option label="Today">2012-01-01</option>
+    <option label="Tomorrow">2012-01-02</option>
+    <option>2012-01-03</option>
+    <option>2012-01-04</option>
+    <option>2012-01-05</option>
+    <option>2012-01-06</option>
+    <option>2012-01-07</option>
+    <option>2012-01-08</option>
+    <option>2012-01-09</option>
+    <option>2012-01-10</option>
+    <option>2012-01-11</option>
+    <option>2012-01-12</option>
+    <option>2012-01-13</option>
+    <option>2012-01-14</option>
+    <option>2012-01-15</option>
+    <option>2012-01-16</option>
+    <option>2012-01-17</option>
+    <option>2012-01-18</option>
+    <option>2012-01-19</option>
+    <option>2012-01-20</option>
+</datalist>
+<script>
+testRunner.dumpAsText(true);
+testRunner.waitUntilDone();
+if (window.internals)
+    internals.settings.setEnableMockPagePopup(true);
+
+document.getElementById('date').focus();
+if (window.eventSender)
+    eventSender.keyDown('downArrow');
+var pickerWindow = document.getElementById('mock-page-popup').contentWindow;
+pickerWindow.onresize = function() {
+    testRunner.notifyDone();
+}
+</script>
+</body>
index 3e3e33e..5352b50 100644 (file)
@@ -25,6 +25,8 @@ iframe {
  <option>Arabic</option>
  <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>
@@ -148,6 +150,85 @@ var longDatalistArguments = {
     suggestionHighlightTextColor: "#ffffff"
 };
 
+var arabicDatalistArguments = {
+    locale: 'ar',
+    isRTL: true,
+    monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+                   'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
+    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    todayLabel : 'اليوم',
+    clearLabel : 'مسح',
+    weekStartDay : 5,
+    step : 1,
+    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,
+    monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+                   'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
+    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    todayLabel : 'اليوم',
+    clearLabel : 'مسح',
+    weekStartDay : 5,
+    step : 1,
+    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;
@@ -213,6 +294,12 @@ function selected(select) {
     case 4:
         openCalendar(longDatalistArguments);
         break;
+    case 5:
+        openCalendar(arabicDatalistArguments);
+        break;
+    case 6:
+        openCalendar(arabicLongDatalistArguments);
+        break;
     }
 }
 
index 804dbb0..2b044d3 100644 (file)
@@ -1,3 +1,31 @@
+2012-09-27  Keishi Hattori  <keishi@webkit.org>
+
+        SuggestionPicker should support rtl
+        https://bugs.webkit.org/show_bug.cgi?id=97555
+
+        Reviewed by Kent Tamura.
+
+        Add support for rtl to SuggestionPicker. We add another parameter
+        because text direction for the calendar picker should depend on the UI
+        language but the text direction for suggestion picker should depend on
+        the input element style.
+
+        Test: platform/chromium/fast/forms/date/date-suggestion-picker-appearance-rtl.html
+
+        * Resources/pagepopups/calendarPicker.js:
+        (CalendarPicker.prototype._layout):
+        * Resources/pagepopups/pickerCommon.css:
+        (.rtl): Added so we can change styles when in rtl mode.
+        * Resources/pagepopups/suggestionPicker.css:
+        (.suggestion-list-entry .label):
+        (.rtl .suggestion-list-entry .label): Change float direction to left.
+        * Resources/pagepopups/suggestionPicker.js:
+        (SuggestionPicker.prototype._layout):
+        * html/shadow/CalendarPickerElement.cpp:
+        (WebCore::CalendarPickerElement::openPopup): Set isAnchorElementRTL to true if the input element is rtl.
+        * platform/DateTimeChooser.h:
+        (DateTimeChooserParameters): Added isAnchorElementRTL.
+
 2012-09-27  Takashi Sakamoto  <tasak@google.com>
 
         Follow-up to r129723 to once more allow parsing of scoped names in IDL files.
index 3758006..db9afff 100644 (file)
@@ -341,7 +341,8 @@ CalendarPicker.prototype.cleanup = function() {
 };
 
 CalendarPicker.prototype._layout = function() {
-    this._element.style.direction = global.params.isRTL ? "rtl" : "ltr";
+    if (this._config.isCalendarRTL)
+        this._element.classList.add("rtl");
     this.yearMonthController.attachTo(this._element);
     this.daysTable.attachTo(this._element);
     this._layoutButtons();
index 71c5ea4..696751a 100644 (file)
@@ -29,3 +29,7 @@ body {
     margin: 0;
     overflow: hidden;
 }
+
+.rtl {
+    direction: rtl;
+}
index aca47dd..55aba00 100644 (file)
 }
 
 .suggestion-list-entry .label {
-    padding-left: 20px;
     text-align: right;
     color: #737373;
     float: right;
-    margin-right: 4px;
+    padding: 0 20px 0 4px;
+}
+
+.rtl .suggestion-list-entry .label {
+    float: left;
 }
 
 .measuring-width .suggestion-list-entry .label {
index 090f7fb..3c0e95c 100644 (file)
@@ -161,6 +161,8 @@ SuggestionPicker.prototype._fixWindowSize = function() {
 };
 
 SuggestionPicker.prototype._layout = function() {
+    if (this._config.isRTL)
+        this._element.classList.add("rtl");
     this._containerElement = createElement("ul", "suggestion-list");
     this._containerElement.addEventListener("click", this._handleEntryClick.bind(this), false);
     for (var i = 0; i < this._config.suggestionValues.length; ++i) {
index 7513f5b..66accd3 100644 (file)
@@ -142,6 +142,7 @@ void CalendarPickerElement::openPopup()
         parameters.step = step.toDouble();
     parameters.anchorRectInRootView = document()->view()->contentsToRootView(hostInput()->pixelSnappedBoundingBox());
     parameters.currentValue = input->value();
+    parameters.isAnchorElementRTL = input->computedStyle()->direction() == RTL;
     if (HTMLDataListElement* dataList = input->dataList()) {
         RefPtr<HTMLCollection> options = dataList->options();
         for (unsigned i = 0; HTMLOptionElement* option = toHTMLOptionElement(options->item(i)); ++i) {
index 6c98e3f..be6709c 100644 (file)
@@ -47,6 +47,7 @@ struct DateTimeChooserParameters {
     double maximum;
     double step;
     bool required;
+    bool isAnchorElementRTL;
 };
 
 // For pickers like color pickers and date pickers.
index d638ae0..3be1546 100644 (file)
@@ -1,3 +1,13 @@
+2012-09-27  Keishi Hattori  <keishi@webkit.org>
+
+        SuggestionPicker should support rtl
+        https://bugs.webkit.org/show_bug.cgi?id=97555
+
+        Reviewed by Kent Tamura.
+
+        * src/DateTimeChooserImpl.cpp:
+        (WebKit::DateTimeChooserImpl::writeDocument):
+
 2012-09-26  Yoshifumi Inoue  <yosin@chromium.org>
 
         [Forms] Adding localization texts for multiple fields date/time input UI
index 4e2c69e..0f6c562 100644 (file)
@@ -107,7 +107,8 @@ void DateTimeChooserImpl::writeDocument(WebCore::DocumentWriter& writer)
     addProperty("monthLabels", WebCore::monthLabels(), writer);
     addProperty("dayLabels", WebCore::weekDayShortLabels(), writer);
     Direction dir = direction(WebCore::monthLabels()[0][0]);
-    addProperty("isRTL", dir == RightToLeft || dir == RightToLeftArabic, writer);
+    addProperty("isCalendarRTL", dir == RightToLeft || dir == RightToLeftArabic, writer);
+    addProperty("isRTL", m_parameters.isAnchorElementRTL, writer);
     if (m_parameters.suggestionValues.size()) {
         addProperty("inputWidth", static_cast<unsigned>(m_parameters.anchorRectInRootView.width()), writer);
         addProperty("suggestionValues", m_parameters.suggestionValues, writer);