RTL calendar picker for <input type=date> is too narrow and clipped
authortkent@chromium.org <tkent@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 10 Jul 2012 11:19:37 +0000 (11:19 +0000)
committertkent@chromium.org <tkent@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 10 Jul 2012 11:19:37 +0000 (11:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=90864

Reviewed by Kentaro Hara.

.:

* ManualTests/forms/calendar-picker.html:
- Add isRTL:true for the arabic setting
- Reset the iframe size when the setting is changed.

Source/WebCore:

Tests: ManualTests/forms/calendar-picker.html

* Resources/calendarPicker.js:
(fixWindowSize):
Checks the left edge of elemenets in RTL.
(layout): Add dir=ltr for the manual test, which re-uses the document.

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

ChangeLog
ManualTests/forms/calendar-picker.html
Source/WebCore/ChangeLog
Source/WebCore/Resources/calendarPicker.js

index 23f44d5..86e1d4f 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,14 @@
+2012-07-10  Kent Tamura  <tkent@chromium.org>
+
+        RTL calendar picker for <input type=date> is too narrow and clipped
+        https://bugs.webkit.org/show_bug.cgi?id=90864
+
+        Reviewed by Kentaro Hara.
+
+        * ManualTests/forms/calendar-picker.html:
+        - Add isRTL:true for the arabic setting
+        - Reset the iframe size when the setting is changed.
+
 2012-07-10  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r122178.
index ff01028..a38dc30 100644 (file)
@@ -58,6 +58,7 @@ var japaneseArguments = {
 };
 var arabicArguments = {
     locale: 'ar',
+    isRTL: true,
     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
@@ -95,6 +96,9 @@ function openCalendar(args) {
 }
 
 function selected(select) {
+    var frame = document.getElementsByTagName('iframe')[0];
+    frame.style.width = '100px';
+    frame.style.height = '100px';
     switch (select.selectedIndex) {
     case 0:
         openCalendar(englishArguments);
index 4a5b8ca..6ed0174 100644 (file)
@@ -1,3 +1,17 @@
+2012-07-10  Kent Tamura  <tkent@chromium.org>
+
+        RTL calendar picker for <input type=date> is too narrow and clipped
+        https://bugs.webkit.org/show_bug.cgi?id=90864
+
+        Reviewed by Kentaro Hara.
+
+        Tests: ManualTests/forms/calendar-picker.html
+
+        * Resources/calendarPicker.js:
+        (fixWindowSize):
+        Checks the left edge of elemenets in RTL.
+        (layout): Add dir=ltr for the manual test, which re-uses the document.
+
 2012-07-10  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r122178.
index 4a7ef06..f2a851f 100644 (file)
@@ -310,13 +310,23 @@ function fixWindowSize() {
             maxCellWidth = headers[i].offsetWidth;
     }
     var DaysAreaContainerBorder = 1;
-    var maxRight = Math.max(yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth,
-                            daysAreaElement.offsetLeft + maxCellWidth * 7 + DaysAreaContainerBorder);
+    var main = $("main");
+    var yearMonthEnd;
+    var daysAreaEnd;
+    if (global.params.isRTL) {
+        var startOffset = main.offsetLeft + main.offsetWidth;
+        yearMonthEnd = startOffset - yearMonthRightElement.offsetLeft;
+        daysAreaEnd = startOffset - (daysAreaElement.offsetLeft + daysAreaElement.offsetWidth) + maxCellWidth * 7 + DaysAreaContainerBorder;
+    } else {
+        yearMonthEnd = yearMonthRightElement.offsetLeft + yearMonthRightElement.offsetWidth;
+        daysAreaEnd = daysAreaElement.offsetLeft + maxCellWidth * 7 + DaysAreaContainerBorder;
+    }
+
+    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd);
     var MainPadding = 6;
     var MainBorder = 1;
-    var desiredBodyWidth = maxRight + MainPadding + MainBorder;
+    var desiredBodyWidth = maxEnd + MainPadding + MainBorder;
 
-    var main = $("main");
     var mainHeight = main.offsetHeight;
     main.style.width = "auto";
     daysAreaElement.style.width = "100%";
@@ -355,6 +365,8 @@ function checkLimits() {
 function layout() {
     if (global.params.isRTL)
         document.body.dir = "rtl";
+    else
+        document.body.dir = "ltr";
     var main = $("main");
     var params = global.params;
     main.removeChild(main.firstChild);