REGRESSION (r129738): Calendar picker is too wide when the input is rtl
[WebKit-https.git] / ManualTests / forms / calendar-picker.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Calendar Picker test</title>
6 <style>
7 body {
8     background-color: #eeffff;
9 }
10 iframe {
11     z-index: 2147483647;
12     width: 100px;
13     height: 100px;
14     border: 0;
15     overflow: hidden;
16 }
17 </style>
18 </head>
19 <body>
20
21 <p>This is a testbed for a calendar picker.</p>
22 <select onchange="selected(this)">
23  <option>English</option>
24  <option>Japanese</option>
25  <option>Arabic</option>
26  <option>with datalist</option>
27  <option>with long datalist</option>
28  <option>Arabic with datalist</option>
29  <option>Arabic with long datalist</option>
30 </select>
31
32 <div><input type="text" id="date"></div>
33 <iframe></iframe>
34
35 <ol id="console" style="font-family:monospace;">
36 </ol>
37
38 <script>
39 var englishArguments = {
40     locale: 'en-US',
41     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
42     'July', 'August', 'September', 'October', 'November', 'December'],
43     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
44     todayLabel : 'Today',
45     clearLabel : 'Clear',
46     cancelLabel : 'Cancel',
47     weekStartDay : 0,
48     step : "86400000",
49     stepBase: "0",
50     max : '2099-12-31',
51 };
52 var japaneseArguments = {
53     locale: 'ja-JP',
54     monthLabels : ['1月', '2月', '3月', '4月', '5月', '6月',
55     '7月', '8月', '9月', '10月', '11月', '12月'],
56     dayLabels : ['日', '月', '火', '水', '木', '金', '土'],
57     todayLabel : '今日',
58     clearLabel : 'クリア',
59     cancelLabel : '取り消し',
60     weekStartDay : 0,
61     step : "86400000",
62     stepBase: "0",
63     max : '2099-03-15',
64 };
65 var arabicArguments = {
66     locale: 'ar',
67     isRTL: false,
68     isCalendarRTL: true,
69     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
70                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
71     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
72     todayLabel : 'اليوم',
73     clearLabel : 'مسح',
74     weekStartDay : 5,
75     step : "86400000",
76     stepBase: "0",
77     max : '2020-05-15',
78 };
79 var datalistArguments = {
80     locale: 'en-US',
81     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
82     'July', 'August', 'September', 'October', 'November', 'December'],
83     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
84     todayLabel : 'Today',
85     clearLabel : 'Clear',
86     cancelLabel : 'Cancel',
87     weekStartDay : 0,
88     step : "86400000",
89     stepBase: "0",
90     max : '2099-12-31',
91     suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
92     localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
93     suggestionLabels : ['', 'Birthday', '', 'Christmas'],
94     showOtherDateEntry: true,
95     otherDateLabel: 'Other...',
96     inputWidth: 127,
97     suggestionHighlightColor: "#0000ff",
98     suggestionHighlightTextColor: "#ffffff"
99 };
100 var longDatalistArguments = {
101     locale: 'en-US',
102     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
103     'July', 'August', 'September', 'October', 'November', 'December'],
104     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
105     todayLabel : 'Today',
106     clearLabel : 'Clear',
107     cancelLabel : 'Cancel',
108     weekStartDay : 0,
109     step : "86400000",
110     stepBase: "0",
111     max : '2099-12-31',
112     suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
113         "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
114         "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
115         "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
116         "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
117         "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
118         "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
119         "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
120         "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
121         "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
122         "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
123         "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
124         "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
125         "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
126         "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
127         "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
128         "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
129         "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
130         "2012-03-30", "2012-03-31"],
131     localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
132         "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
133         "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
134         "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
135         "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
136         "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
137         "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
138         "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
139         "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
140         "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
141         "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
142         "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
143         "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
144         "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
145         "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
146     suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
147         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
148         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
149         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
150         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
151         "", "", "", "", "", "", "", ""],
152     showOtherDateEntry: true,
153     otherDateLabel: 'Other...',
154     inputWidth: 127,
155     suggestionHighlightColor: "#0000ff",
156     suggestionHighlightTextColor: "#ffffff"
157 };
158
159 var arabicDatalistArguments = {
160     locale: 'ar',
161     isRTL: true,
162     isCalendarRTL: true,
163     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
164                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
165     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
166     todayLabel : 'اليوم',
167     clearLabel : 'مسح',
168     weekStartDay : 5,
169     step : "86400000",
170     stepBase: "0",
171     max : '2020-05-15',
172     suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
173     localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
174     suggestionLabels : ['', 'Birthday', '', 'Christmas'],
175     showOtherDateEntry: true,
176     otherDateLabel: 'Other...',
177     inputWidth: 127,
178     suggestionHighlightColor: "#0000ff",
179     suggestionHighlightTextColor: "#ffffff"
180 };
181
182 var arabicLongDatalistArguments = {
183     locale: 'ar',
184     isRTL: true,
185     isCalendarRTL: true,
186     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
187                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
188     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
189     todayLabel : 'اليوم',
190     clearLabel : 'مسح',
191     weekStartDay : 5,
192     step : "86400000",
193     stepBase: "0",
194     max : '2020-05-15',
195     suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
196         "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
197         "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
198         "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
199         "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
200         "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
201         "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
202         "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
203         "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
204         "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
205         "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
206         "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
207         "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
208         "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
209         "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
210         "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
211         "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
212         "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
213         "2012-03-30", "2012-03-31"],
214     localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
215         "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
216         "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
217         "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
218         "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
219         "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
220         "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
221         "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
222         "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
223         "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
224         "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
225         "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
226         "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
227         "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
228         "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
229     suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
230         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
231         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
232         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
233         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
234         "", "", "", "", "", "", "", ""],
235     showOtherDateEntry: true,
236     otherDateLabel: 'Other...',
237     inputWidth: 127,
238     suggestionHighlightColor: "#0000ff",
239     suggestionHighlightTextColor: "#ffffff"
240 };
241
242 function openCalendar(args) {
243     var frame = document.getElementsByTagName('iframe')[0];
244     var doc = frame.contentDocument;
245     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
246     var commonCssLink = doc.createElement('link');
247     commonCssLink.rel = 'stylesheet';
248     commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
249     doc.head.appendChild(commonCssLink);
250     var suggestionPickerCssLink = doc.createElement('link');
251     suggestionPickerCssLink.rel = 'stylesheet';
252     suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
253     doc.head.appendChild(suggestionPickerCssLink);
254     var link = doc.createElement('link');
255     link.rel = 'stylesheet';
256     link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
257     doc.head.appendChild(link);
258     var commonJsScript = doc.createElement('script');
259     commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
260     doc.body.appendChild(commonJsScript);
261     var suggestionPickerJsScript = doc.createElement('script');
262     suggestionPickerJsScript.src = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.js?' + (new Date()).getTime();
263     doc.body.appendChild(suggestionPickerJsScript);
264     var script = doc.createElement('script');
265     script.src = '../../Source/WebCore/Resources/pagepopups/calendarPicker.js?' + (new Date()).getTime();
266     doc.body.appendChild(script);
267
268     var pagePopupController = {
269         setValueAndClosePopup: function(numValue, stringValue) {
270             window.log('number=' + numValue + ', string="' + stringValue + '"');
271             if (numValue == 0)
272                 window.document.getElementById('date').value = stringValue;
273         },
274         localizeNumberString: function(numString) {
275             if (typeof numString == "number")
276                 return numString.toLocaleString();
277             return numString.toString();
278         }
279     }
280
281     setTimeout(function() {
282         frame.contentWindow.postMessage(JSON.stringify(args), "*");
283         frame.contentWindow.pagePopupController = pagePopupController;
284     }, 100);
285 }
286
287 function selected(select) {
288     var frame = document.getElementsByTagName('iframe')[0];
289     frame.style.width = '100px';
290     frame.style.height = '100px';
291     switch (select.selectedIndex) {
292     case 0:
293         openCalendar(englishArguments);
294         break;
295     case 1:
296         openCalendar(japaneseArguments);
297         break;
298     case 2:
299         openCalendar(arabicArguments);
300         break;
301     case 3:
302         openCalendar(datalistArguments);
303         break;
304     case 4:
305         openCalendar(longDatalistArguments);
306         break;
307     case 5:
308         openCalendar(arabicDatalistArguments);
309         break;
310     case 6:
311         openCalendar(arabicLongDatalistArguments);
312         break;
313     }
314 }
315
316 function log(str) {
317     var entry = document.createElement('li');
318     entry.innerText = str;
319     document.getElementById('console').appendChild(entry);
320 }
321
322 openCalendar(englishArguments);
323 </script>
324 </body>
325 </html>