Changeset 122212 in webkit

Timestamp:

Jul 10, 2012 4:19:37 AM (12 years ago)

Author:

tkent@chromium.org

Message:

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.

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.

Location:

trunk

Files:

• ChangeLog (modified) (1 diff)
• ManualTests/forms/calendar-picker.html (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/Resources/calendarPicker.js (modified) (2 diffs)

trunk/ChangeLog

@@ +1 @@
+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>
 

trunk/ManualTests/forms/calendar-picker.html

@@ -59 +59 @@
 var arabicArguments = {
     locale: 'ar',
+    isRTL: true,
     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
@@ -96 +97 @@
 
 function selected(select) {
+    var frame = document.getElementsByTagName('iframe')[0];
+    frame.style.width = '100px';
+    frame.style.height = '100px';
     switch (select.selectedIndex) {
     case 0:

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebCore/Resources/calendarPicker.js

@@ -311 +311 @@
     }
     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 main = $("main");
+    var desiredBodyWidth = maxEnd + MainPadding + MainBorder;
+
     var mainHeight = main.offsetHeight;
     main.style.width = "auto";
@@ -356 +366 @@
     if (global.params.isRTL)
         document.body.dir = "rtl";
+    else
+        document.body.dir = "ltr";
     var main = $("main");
     var params = global.params;