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 baee8ef5e5ae3f3586e7e25134a731633ac00cea..04765462da06902696458ea33558e9308e966f52 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 92d1b0b088f08f01f712fdb927f7233bd777eb17..a81993c6f3d6867a4ca4c80b5b8647d75cdae34a 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 0de940fe2d20a66d8ed69ecd5fb9cadcd40ca839..225ed113ca17adbc44a9190ca2233ace49b19185 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 3e3e33e83b282c9728cf2d805b131ec4b2b352fc..5352b502924db4e3194972b6e41130cc66e6d644 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 804dbb000773babab1fa26cc5323a844869e1e0e..2b044d37e3852ffa4b623a8c1b73af1a8b8d9663 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 3758006f96705262e8062644bd7d708eff0bd15b..db9afff3831c2b633bd37791364a624adb1359fc 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 71c5ea493135a2c0f556815e8092ba01f92ba190..696751a4193641355f6262c1edf33ecd99a855df 100644 (file)
@@ -29,3 +29,7 @@ body {
     margin: 0;
     overflow: hidden;
 }
+
+.rtl {
+    direction: rtl;
+}
index aca47ddff79aa23700731bb1d2120ddf3c2da170..55aba00c277dd81176800a192881f0b8db41e63f 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 090f7fbf6ab40e7d8afc1b85704b341c0b735b09..3c0e95c6aa60352ab85f5cf615b385ba07a222c7 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 7513f5b716f376fb5cea4d671a7996b497ab6a60..66accd3e21dc62e3760394a90f76459b8afc3d11 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 6c98e3f17212fa41edc2c46e14290bba01324c70..be6709ccf8f6cf2c6ebf8ac73f852b7722a0c59f 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 d638ae03664a67d21fc1710fce90fb72e09f49f2..3be1546f1931d23769a34ecde6de6bb5bfbf2b1b 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 4e2c69e9f0bd5aaf6ab4aa77c93aa02fcbe2e001..0f6c5623a4d9f113a3b00f7929d5eb5f888f278e 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);