source: Dev/branches/rest-dojo-ui/client/dijit/tests/Tooltip-placement.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 45.6 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>Dojo Tooltip Placement Test</title>
6
7        <style type="text/css">
8                @import "../themes/claro/document.css";
9                @import "css/dijitTests.css";
10               
11                div {font-size:9px}
12        </style>
13
14        <!-- required: a default dijit theme: -->
15        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
16
17        <!-- required: dojo.js -->
18        <script type="text/javascript" src="../../dojo/dojo.js"
19                data-dojo-config="isDebug: true"></script>
20
21        <!-- not needed, for testing alternate themes -->
22        <script type="text/javascript" src="_testCommon.js"></script>
23        <script type="text/javascript">
24                dojo.require("doh.runner");
25                dojo.require("dojo.parser");
26                dojo.require("dijit.dijit"); // optimize: load dijit layer
27                dojo.require("dijit.form.ValidationTextBox");
28                dojo.require("dijit.layout.ContentPane");
29               
30                dojo.ready(function(){
31                        doh.register("parse", function(){
32                                dojo.parser.parse();
33                        });
34
35                        doh.register("other setup", function(){
36                                dijit._MasterTooltip.prototype.duration = 0.05; // speed up tooltip fading
37                                var view = dojo.window.getBox();
38                                var width = view.w;
39                                var height = view.h;
40                               
41                                if(width < 600){
42                                        //Make the larger tooltips smaller so they fit on the page and pass all tests
43                                        dijit.byId("test2").promptMessage="really really really really really really really really really really really really really really really really really really really really";
44                                        dijit.byId("test5").promptMessage="really really really really really really really really really really really really really really really really really really really really";
45                                        dijit.byId("test12").promptMessage="really really really really really really really really really really really really really really really really really really really really";
46                                        dijit.byId("test17").promptMessage="really really really really really really really really really really really really really really really really really really really really";
47                                        dijit.byId("test19").promptMessage="really really really really really really really really really really really really really really really really really really really really";
48                                }else if(width > 1200){
49                                        //Make a shorter tooltip longer in order to span the whole width
50                                        dijit.byId("test1").promptMessage = "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a";
51                                        dijit.byId("test4").promptMessage = "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a";
52                                        dijit.byId("test10").promptMessage = "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a";
53                                        dijit.byId("test20").promptMessage="really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a"
54                                }
55                               
56                                if(height < 600){
57                                        //Make the taller tooltips shorter
58                                        for(var i=1;i<22;i++){
59                                                if(i==7){
60                                                        //skip
61                                                }else{
62                                                        dijit.byId("test"+i+"_tall_skinny").promptMessage="<br><br><br><br>a";
63                                                }
64                                        }
65                                }
66                               
67                                dijit.byId("test1").set("style", "width:"+width*(0.3)+"px");
68                                dijit.byId("test1_tall_skinny").set("style", "width:"+width*(0.3)+"px");
69                                dijit.byId("test2").set("style", "width:"+width*(0.6)+"px");
70                                dijit.byId("test2_tall_skinny").set("style", "width:"+width*(0.6)+"px");
71                                dijit.byId("test3").set("style", "width:"+width*(0.9)+"px");
72                                dijit.byId("test3_tall_skinny").set("style", "width:"+width*(0.9)+"px");
73                                dijit.byId("test4").set("style", "width:"+width*(0.3)+"px");
74                                dijit.byId("test4_tall_skinny").set("style", "width:"+width*(0.3)+"px");
75                                dijit.byId("test5").set("style", "width:"+width*(0.6)+"px");
76                                dijit.byId("test5_tall_skinny").set("style", "width:"+width*(0.6)+"px");
77                                dijit.byId("test6").set("style", "width:"+width*(0.9)+"px");
78                                dijit.byId("test6_tall_skinny").set("style", "width:"+width*(0.9)+"px");
79                                dijit.byId("test7").set("style", "width:"+width*(1.1)+"px");
80                                dijit.byId("test8").set("style", "width:"+width*(0.2)+"px");
81                                dijit.byId("test8_tall_skinny").set("style", "width:"+width*(0.2)+"px");
82                                dijit.byId("test9").set("style", "width:"+width*(0.3)+"px");
83                                dijit.byId("test9_tall_skinny").set("style", "width:"+width*(0.3)+"px");
84                                dijit.byId("test10").set("style", "width:"+width*(0.6)+"px");
85                                dijit.byId("test10_tall_skinny").set("style", "width:"+width*(0.6)+"px");
86                                dijit.byId("test11").set("style", "width:"+width*(0.9)+"px");
87                                dijit.byId("test11_tall_skinny").set("style", "width:"+width*(0.9)+"px");
88                                dijit.byId("test12").set("style", "width:"+width*(0.3)+"px");
89                                dijit.byId("test12_tall_skinny").set("style", "width:"+width*(0.3)+"px");
90                                dijit.byId("test13").set("style", "width:"+width*(0.6)+"px");
91                                dijit.byId("test13_tall_skinny").set("style", "width:"+width*(0.6)+"px");
92                                dijit.byId("test14").set("style", "width:"+width*(0.9)+"px");
93                                dijit.byId("test14_tall_skinny").set("style", "width:"+width*(0.9)+"px");
94                                dijit.byId("test15").set("style", "width:"+width*(0.9)+"px");
95                                dijit.byId("test15_tall_skinny").set("style", "width:"+width*(0.9)+"px");
96                                dijit.byId("test16").set("style", "width:"+width*(0.3)+"px");
97                                dijit.byId("test16_tall_skinny").set("style", "width:"+width*(0.3)+"px");
98                                dijit.byId("test17").set("style", "width:"+width*(0.6)+"px");
99                                dijit.byId("test17_tall_skinny").set("style", "width:"+width*(0.6)+"px");
100                                dijit.byId("test18").set("style", "width:"+width*(0.9)+"px");
101                                dijit.byId("test18_tall_skinny").set("style", "width:"+width*(0.9)+"px");
102                                dijit.byId("test19").set("style", "width:"+width*(0.3)+"px");
103                                dijit.byId("test19_tall_skinny").set("style", "width:"+width*(0.3)+"px");
104                                dijit.byId("test20").set("style", "width:"+width*(0.6)+"px");
105                                dijit.byId("test20_tall_skinny").set("style", "width:"+width*(0.6)+"px");
106                                dijit.byId("test21").set("style", "width:"+width*(0.9)+"px");
107                                dijit.byId("test21_tall_skinny").set("style", "width:"+width*(0.9)+"px");
108                        });
109
110                        //Verify the following is true:
111                        //      1. The tooltip is displayed to the right or the left of the textbox
112                        //      2. The tooltip arrow is next to the textbox
113                        //      3. The user can view the entire tooltip on the screen OR the tooltip is displayed on the side with the largest width available
114                        //      4. If the tooltip is not completely visible, verify that it uses all available height
115                        function testRightOrLeft(textbox, verifyFullWidthIsUtilized){
116                                verifyTooltipArrowPosition(textbox);
117
118                                var textboxPos = dojo.position(textbox.domNode);
119                                var tooltipContainerPos = dojo.position(dojo.query(".dijitTooltip")[0]);
120                               
121                                var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
122                                var toTheLeft = xDiff >= -0.5 && xDiff < 2;
123
124                                xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
125                                var toTheRight = xDiff >= -0.5 && xDiff < 2;
126
127                                doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
128
129                                var tooltip = dijit.Tooltip._masterTT.containerNode;
130                                var tooltipPos = dojo.position(tooltip);
131
132                                var view = dojo.window.getBox();
133                                var isIE6 = dojo.isIE < 7;
134                                //verify the entire width is utilized.  Small tooltips will not utilize the entire width.
135                                if(verifyFullWidthIsUtilized && !isIE6 && !dojo.isOpera){
136                                        if(toTheLeft){
137                                                doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= textboxPos.x, "The entire width was not utilized to the left");                                       
138                                        }else{
139                                                doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= view.w - tooltipContainerPos.x, "The entire width was not utilized to the right");
140                                        }
141                                }
142                       
143                                //If we cannot view the entire tooltip, verify they side with the most space was choosen and the entire height was utilized.
144                                var canViewEntireTooltip = (tooltipContainerPos.x + tooltipContainerPos.w <= view.w+1) &&
145                                                                                   (tooltipPos.y + tooltipPos.h <= view.h+1);                   
146                                if(!canViewEntireTooltip && !isIE6 && !dojo.isOpera){
147                                        if(toTheLeft){
148                                                //verify there is more space on the left than the right
149                                                doh.t(textboxPos.x >= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the left than the right");
150                                        }else{
151                                                doh.t(textboxPos.x <= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the right than the left");
152                                        }
153                                        //verify the entire height is utilized
154                                        doh.t(tooltipPos.h >= view.h, "The entire height was not utilized. Tooltip height="+tooltipPos.h+". View height="+view.h);
155                                }
156                        }
157                       
158                        function toTheLeftOrRight(textbox){
159                                var textboxPos = dojo.position(textbox.domNode);
160                                var tooltipContainerPos = dojo.position(dojo.query(".dijitTooltip")[0]);
161                               
162                                var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
163                                var toTheLeft = xDiff >= -1 && xDiff < 2;
164
165                                xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
166                                var toTheRight = xDiff >= -1 && xDiff < 2;
167
168                                doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
169                        }
170                       
171                        //Verify the tooltip arrow is next to the textbox
172                        function verifyTooltipArrowPosition(textbox){
173                                var textboxPos = dojo.position(textbox.domNode);
174                                var tooltipConnectorPos = dojo.position(dojo.query(".dijitTooltipConnector")[0]);
175                               
176                                var middleOfTextbox = textboxPos.y + (textboxPos.h / 2);
177                                var middleOfTooltipConnector = tooltipConnectorPos.y + (tooltipConnectorPos.h /2);
178
179                                var yDiff = middleOfTextbox - middleOfTooltipConnector;
180                                var yAxisValid = yDiff <= 2 && yDiff >= -1.5; //tooltip arrow is at a similar y coord as the box
181                                doh.t(yAxisValid, "Y axis is invalid. yDiff was: "+yDiff);
182                        }
183                       
184                        //Verify the following is true:
185                        //      1. The tooltip arrow is next to the textbox
186                        //      2. The text fits inside the tooltip
187                        function testNoWrapOrLargeWords(textbox){
188                                verifyTooltipArrowPosition(textbox);
189                               
190                                //Verify the text fits inside the tooltip
191                                var tooltipContainer = dojo.query(".dijitTooltipContainer")[0];
192                                tooltipContainer.style.overflow = "auto";
193                                var scrollWidth = tooltipContainer.scrollWidth;
194                                tooltipContainer.style.overflow = "visible"; //change it back
195                               
196                                var tooltipWidth = dojo.position(tooltipContainer).w;
197                                doh.t(tooltipWidth >= scrollWidth);
198                        }
199               
200                        function testAboveBelow(textbox, verifyConnectorPosition){
201                                var textboxPos = dojo.position(textbox.domNode);
202                                var tooltipConnectorPos = dojo.position(dojo.query(".dijitTooltipConnector")[0]);
203                                var tooltipContainerPos = dojo.position(dojo.query(".dijitTooltip")[0]);
204
205                                if(verifyConnectorPosition){
206                                        var xAxisValid = textboxPos.x <= tooltipConnectorPos.x && tooltipConnectorPos.x <= (textboxPos.x + textboxPos.w);
207                                        doh.t(xAxisValid, "X axis is invalid");
208                                }
209                       
210                                //verify the tooltip is above or below the textbox
211                                var yDiff = textboxPos.y - tooltipContainerPos.y - tooltipContainerPos.h;
212                                var above = yDiff >= -0.5 && yDiff < 1;
213       
214                                yDiff = tooltipContainerPos.y - textboxPos.y - textboxPos.h;
215                                var below = yDiff >= -0.5 && yDiff < 1;
216                       
217                                doh.t(above || below);
218                        }
219
220                        var widget, handler;
221
222                        // init tests for each group
223                        var tooltip_left_right_tall_skinny = [{
224                                name: "test1_tall_skinny",
225                                timeout: 4000,
226                                runTest: function(){
227                                        var d = new doh.Deferred();
228                                        widget = dijit.byId("test1_tall_skinny");
229
230                                        dojo.byId("aboveBelowButton").focus();
231                                        widget.set('value', null);
232
233                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
234                                                testRightOrLeft(widget, false);
235                                        }));
236                                        dijit.byId("test7").focusNode.focus(); //hack for IE6.  test1 is not getting focus in IE6 if we don't focus something else first
237                                        widget.focusNode.focus();
238                               
239                                        return d;
240                                },
241                                tearDown: function(){
242                                        dojo.disconnect(handler);
243                                }
244                        }];
245                        var tooltip_left_right = [{
246                                name: "test1",
247                                timeout: 4000,
248                                runTest: function(){
249                                        var d = new doh.Deferred();
250                                        widget = dijit.byId("test1");
251
252                                        dojo.byId("aboveBelowButton").focus();
253                                        widget.set('value', null);
254
255                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
256                                                testRightOrLeft(widget, true);
257                                        }));
258                                        dijit.byId("test7").focusNode.focus(); //hack for IE6.  test1 is not getting focus in IE6 if we don't focus something else first
259                                        widget.focusNode.focus();
260                               
261                                        return d;
262                                },
263                                tearDown: function(){
264                                        dojo.disconnect(handler);
265                                }
266                        }];
267                        var tooltip_left_right_small = [{
268                                name: "test1_lrs",
269                                timeout: 6000,
270                                runTest: function(){
271                                        var d = new doh.Deferred();
272                               
273                                        var widget = dijit.byId("test1");
274                                        widget.set('value', null);
275                               
276                                        dijit.byId("test7").focusNode.focus();
277                               
278                                        setTimeout(function(){ widget.focusNode.focus();}, 500);
279
280                                        setTimeout(d.getTestCallback(function(){
281                                                testRightOrLeft(widget, false);
282                                        }), 1000);
283                                        return d;
284                                }
285                        }];
286                        var tooltip_above_below_small = [{
287                                name: "test1_abs",
288                                timeout: 3000,
289                                runTest: function(){
290                                        var d = new doh.Deferred();
291               
292                                        var widget = dijit.byId("test1");
293                                        dojo.byId("aboveBelowButton").focus();
294                                        dojo.byId("aboveBelowButton").click();
295                                        widget.focusNode.focus();
296
297                                        setTimeout(d.getTestCallback(function(){
298                                                testAboveBelow(widget, true);
299                                        }), 1000);
300                                        return d;
301                                }
302                        }];
303                        var tooltip_above_below = [{
304                                name: "test1_ab",
305                                timeout: 5000,
306                                runTest: function(){
307                                        var d = new doh.Deferred();
308                                        widget = dijit.byId("test1");
309
310                                        widget.set('value', "a");
311
312                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
313                                                testAboveBelow(widget, true);
314                                        }));
315
316                                        widget.focusNode.focus();
317
318                                        return d;
319                                },
320                                tearDown: function(){
321                                        dojo.disconnect(handler);
322                                }
323                        }];
324                        var tooltip_above_below_tall_skinny = [{
325                                name: "test1_ab_tall_skinny",
326                                timeout: 5000,
327                                runTest: function(){
328                                        var d = new doh.Deferred();
329                                        widget = dijit.byId("test1_tall_skinny");
330
331                                        widget.set('value', "a");
332
333                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
334                                                testAboveBelow(widget, true);
335                                        }));
336
337                                        widget.focusNode.focus();
338
339                                        return d;
340                                },
341                                tearDown: function(){
342                                        dojo.disconnect(handler);
343                                }
344                        }];
345                        var tooltip_left_right_overflow = [{
346                                name: "test22",
347                                timeout: 4000,
348                                runTest: function(){
349                                        var d = new doh.Deferred();
350                                        widget = dijit.byId("test22");
351                                        var cp = dijit.byId("test22_cp");
352
353                                        dojo.byId("afterBeforeButton").focus();
354                                        dojo.byId("afterBeforeButton").click();
355                                        widget.set('value', null);
356
357                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
358                                                toTheLeftOrRight(cp, true);
359                                        }));
360                                        widget.focusNode.focus();
361                               
362                                        return d;
363                                },
364                                tearDown: function(){
365                                        dojo.disconnect(handler);
366                                }
367                        }];
368                        var tooltip_left_right_overflow_rtl = [{
369                                name: "test23",
370                                timeout: 4000,
371                                runTest: function(){
372                                        var d = new doh.Deferred();
373                                        widget = dijit.byId("test23");
374                                        var cp = dijit.byId("test23_cp");
375
376                                        widget.set('value', null);
377
378                                        handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
379                                                toTheLeftOrRight(cp, true);
380                                        }));
381                                        widget.focusNode.focus();
382                               
383                                        return d;
384                                },
385                                tearDown: function(){
386                                        dojo.disconnect(handler);
387                                }
388                        }];
389
390                        // rest of tests
391                        for(var i=2; i<=21; i++){
392                                if(i==7){ continue; }
393                                tooltip_left_right_tall_skinny.push({
394                                        name: "test"+i+"_tall_skinny",
395                                        widget: "test"+i+"_tall_skinny",
396                                        timeout: 3000,
397                                        runTest: function(){
398                                                var d = new doh.Deferred();
399                                                widget = dijit.byId(this.widget);
400
401                                                widget.set('value', null);
402
403                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
404                                                        testRightOrLeft(widget, false);
405                                                }));
406                                                dojo.window.scrollIntoView(widget.focusNode);
407                                                widget.focusNode.focus();
408                                       
409                                                return d;
410                                        },
411                                        tearDown: function(){
412                                                dojo.disconnect(handler);
413                                        }
414                                });
415                                tooltip_left_right.push({
416                                        name: "test"+i,
417                                        widget: "test"+i,
418                                        timeout: 3000,
419                                        runTest: function(){
420                                                var d = new doh.Deferred();
421                                                widget = dijit.byId(this.widget);
422
423                                                widget.set('value', null);
424
425                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
426                                                        var id = widget.id;
427                                                        if(id=="test3" || id=="test6" || id=="test8" || id=="test9" || id=="test13" || id=="test16" || id=="test21"){
428                                                                //These are the nowrap tests and therefore we should only verify the arrow is pointing to the textbox
429                                                                testNoWrapOrLargeWords(widget);
430                                                        }else{
431                                                                testRightOrLeft(widget, true);
432                                                        }
433                                                }));
434                                                dojo.window.scrollIntoView(widget.focusNode);
435                                                widget.focusNode.focus();
436                                       
437                                                return d;
438                                        },
439                                        tearDown: function(){
440                                                dojo.disconnect(handler);
441                                        }
442                                });
443                                tooltip_left_right_small.push({
444                                        name: "test"+i+"_lrs",
445                                        widget: "test"+i,
446                                        timeout: 3000,
447                                        runTest: function(){
448                                                var d = new doh.Deferred();
449                                                widget = dijit.byId(this.widget);
450
451                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
452                                                        testRightOrLeft(widget, false);
453                                                }));
454                                                widget.focusNode.focus();
455
456                                                return d;
457                                        },
458                                        tearDown: function(){
459                                                dojo.disconnect(handler);
460                                        }
461                                });
462                                tooltip_above_below_small.push({
463                                        name: "test"+i+"_abs",
464                                        widget: "test"+i,
465                                        timeout: 3000,
466                                        runTest: function(){
467                                                var d = new doh.Deferred();
468                                                widget = dijit.byId(this.widget);
469
470                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
471                                                        testAboveBelow(widget, true);
472                                                }));
473                                                widget.focusNode.focus();
474
475                                                return d;
476                                        },
477                                        tearDown: function(){
478                                                dojo.disconnect(handler);
479                                        }
480                                });
481                                tooltip_above_below.push({
482                                        name: "test"+i+"_ab",
483                                        widget: "test"+i,
484                                        timeout: 5000,
485                                        runTest: function(){
486                                                var d = new doh.Deferred();
487                                                widget = dijit.byId(this.widget);
488
489                                                widget.set('value', "a");
490
491                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
492                                                        var id = widget.id;
493                                                        if(id=="test3" || id=="test6" || id=="test8" || id=="test9" || id=="test13" || id=="test16" || id=="test21"){
494                                                                //These are the nowrap tests and therefore we should only verify the arrow is pointing to the textbox (in most cases it's off the screen)
495                                                                testAboveBelow(widget, false);
496                                                        }else{
497                                                                testAboveBelow(widget, true);
498                                                        }
499                                                }));
500
501                                                widget.focusNode.focus();
502
503                                                return d;
504                                        },
505                                        tearDown: function(){
506                                                dojo.disconnect(handler);
507                                        }
508                                });
509                                tooltip_above_below_tall_skinny.push({
510                                        name: "test"+i+"_ab_tall_skinny",
511                                        widget: "test"+i+"_tall_skinny",
512                                        timeout: 5000,
513                                        runTest: function(){
514                                                var d = new doh.Deferred();
515                                                widget = dijit.byId(this.widget);
516
517                                                widget.set('value', "a");
518
519                                                handler = dojo.connect(dijit._MasterTooltip.prototype, "_onShow", d.getTestCallback(function(){
520                                                        testAboveBelow(widget, true);
521                                                }));
522
523                                                widget.focusNode.focus();
524
525                                                return d;
526                                        },
527                                        tearDown: function(){
528                                                dojo.disconnect(handler);
529                                        }
530                                });
531                        }
532
533                        doh.register("tooltip_left_right_tall_skinny", tooltip_left_right_tall_skinny);
534                        doh.register("tooltip_left_right", tooltip_left_right);
535                        doh.register("tooltip_left_right_small", tooltip_left_right_small);
536                        doh.register("tooltip_above_below_small", tooltip_above_below_small);
537                        doh.register("tooltip_above_below", tooltip_above_below);
538                        doh.register("tooltip_above_below_tall_skinny", tooltip_above_below_tall_skinny);
539                        doh.register("tooltip_left_right_overflow", tooltip_left_right_overflow);
540                        doh.register("tooltip_left_right_overflow_rtl", tooltip_left_right_overflow_rtl);
541                        doh.run();
542                });
543        </script>
544</head>
545<body class="claro">
546<table>
547
548        <tr>
549        <td style="text-align:right;">
550                <input type="text" id="test1" name="test1" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
551        </td>
552        </tr>   
553        <tr>
554        <td style="text-align:right;">
555                <input type="text" id="test1_tall_skinny" name="test1_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
556        </td>
557        </tr>
558        <tr>
559        <td style="text-align:right;">
560                <input type="text" id="test2" name="test2" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really really really really really really really really really really really reallybig', required:true, missingMessage:'!'"/>
561        </td>
562        </tr>
563        <tr>
564        <td style="text-align:right;">
565                <input type="text" id="test2_tall_skinny" name="test2_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
566        </td>
567        </tr>
568        <tr>
569        <td style="text-align:right;">
570                <input type="text" id="test3" name="test3" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'reallyreallylonggermanwordreallyreallyreallyreallyreallyreallyreallylongword big', required:true, missingMessage:'!'"/>
571        </td>
572        </tr>
573        <tr>
574        <td style="text-align:right;">
575                <input type="text" id="test3_tall_skinny" name="test3_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
576        </td>
577        </tr>
578        <tr>
579        <td style="text-align:left;">
580                <input type="text" id="test4" name="test4" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
581        </td>
582        </tr>
583        <tr>
584        <td style="text-align:left;">
585                <input type="text" id="test4_tall_skinny" name="test4_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
586        </td>
587        </tr>
588        <tr>
589        <td style="text-align:left;">
590                <input type="text" id="test5" name="test5" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallybig', required:true, missingMessage:'!'"/>
591        </td>
592        </tr>
593        <tr>
594        <td style="text-align:left;">
595                <input type="text" id="test5_tall_skinny" name="test5_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
596        </td>
597        </tr>
598        <tr>
599        <td style="text-align:left;">
600                <input type="text" id="test6" name="test6" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<div style=\'white-space: nowrap\'>really really really really big</div>', required:true, missingMessage:'!'"/>
601        </td>
602        </tr>
603        <tr>
604        <td style="text-align:left;">
605                <input type="text" id="test6_tall_skinny" name="test6_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
606        </td>
607        </tr>
608        <tr>
609        <td style="text-align:left;">
610                <input type="text" id="test7" name="test7" data-dojo-type="dijit.form.ValidationTextBox"/>
611        </td>
612        </tr>
613        <tr>
614        <td style="text-align:left;">
615                <input type="text" id="test8" name="test8" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<div style=\'white-space: nowrap\'>really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a</div>', required:true, missingMessage:'!'"/>
616        </td>
617        </tr>
618        <tr>
619        <td style="text-align:left;">
620                <input type="text" id="test8_tall_skinny" name="test8_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
621        </td>
622        </tr>
623        <tr>
624        <td>
625                <button id="aboveBelowButton" onclick="dijit.Tooltip.defaultPosition=['above', 'below']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">above, below</button>
626                <button id="afterBeforeButton" onclick="dijit.Tooltip.defaultPosition=['after', 'before']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">after, before (default)</button>
627                <div id=current>
628                        Current: default (unchanged)
629                </div>
630        </td>
631        </tr>
632        <tr>
633        <td style="text-align:left;">
634                <br><br>
635        </td>
636        </tr>
637        <tr>
638        <td style="text-align:right;">
639                <input type="text" id="test9" name="test9" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword', required:true, missingMessage:'!'"/>
640        </td>
641        </tr>
642        <tr>
643        <td style="text-align:right;">
644                <input type="text" id="test9_tall_skinny" name="test9_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
645        </td>
646        </tr>
647        <tr>
648        <td style="text-align:right;">
649                <input type="text" id="test10" name="test10" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
650        </td>
651        </tr>
652        <tr>
653        <td style="text-align:right;">
654                <input type="text" id="test10_tall_skinny" name="test10_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
655        </td>
656        </tr>
657        <tr>
658        <td style="text-align:right;">
659                <input type="text" id="test11" name="test11" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'a a a a a a a a a a a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
660        </td>
661        </tr>
662        <tr>
663        <td style="text-align:right;">
664                <input type="text" id="test11_tall_skinny" name="test11_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
665        </td>
666        </tr>
667        <tr>
668        <td style="text-align:left;">
669                <input type="text" id="test12" name="test12" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big', required:true, missingMessage:'!'"/>
670        </td>
671        </tr>
672        <tr>
673        <td style="text-align:left;">
674                <input type="text" id="test12_tall_skinny" name="test12_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
675        </td>
676        </tr>
677        <tr>
678        <td style="text-align:left;">
679                <input type="text" id="test13" name="test13" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<div style=\'white-space: nowrap\'>really really really really really really really really really really really really really really really really really big</div>', required:true, missingMessage:'!'"/>
680        </td>
681        </tr>
682        <tr>
683        <td style="text-align:left;">
684                <input type="text" id="test13_tall_skinny" name="test13_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
685        </td>
686        </tr>
687        <tr>
688        <td style="text-align:left;">
689                <input type="text" id="test14" name="test14" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big', required:true, missingMessage:'!'"/>
690        </td>
691        </tr>
692        <tr>
693        <td style="text-align:left;">
694                <input type="text" id="test14_tall_skinny" name="test14_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
695        </td>
696        </tr>
697        <tr>
698        <td style="text-align:left;">
699                <input type="text" id="test15" name="test15" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
700        </td>
701        </tr>
702        <tr>
703        <td style="text-align:left;">
704                <input type="text" id="test15_tall_skinny" name="test15_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
705        </td>
706        </tr>
707        <tr>
708        <td style="text-align:left;">
709                <br>
710        </td>
711        </tr>   
712        <tr>
713        <td style="text-align:right;">
714                <input type="text" id="test16" name="test16" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword big word really big word', required:true, missingMessage:'!'"/>
715        </td>
716        </tr>
717        <tr>
718        <td style="text-align:right;">
719                <input type="text" id="test16_tall_skinny" name="test16_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
720        </td>
721        </tr>
722        <tr>
723        <td style="text-align:right;">
724                <input type="text" id="test17" name="test17" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big', required:true, missingMessage:'!'"/>
725        </td>
726        </tr>
727        <tr>
728        <td style="text-align:right;">
729                <input type="text" id="test17_tall_skinny" name="test17_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
730        </td>
731        </tr>
732        <tr>
733        <td style="text-align:right;">
734                <input type="text" id="test18" name="test18" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'a a a a a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
735        </td>
736        </tr>
737        <tr>
738        <td style="text-align:right;">
739                <input type="text" id="test18_tall_skinny" name="test18_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
740        </td>
741        </tr>
742        <tr>
743        <td style="text-align:left;">
744                <input type="text" id="test19" name="test19" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big', required:true, missingMessage:'!'"/>
745        </td>
746        </tr>
747        <tr>
748        <td style="text-align:left;">
749                <input type="text" id="test19_tall_skinny" name="test19_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
750        </td>
751        </tr>
752        <tr>
753        <td style="text-align:left;">
754                <input type="text" id="test20" name="test20" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
755        </td>
756        </tr>
757        <tr>
758        <td style="text-align:left;">
759                <input type="text" id="test20_tall_skinny" name="test20_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
760        </td>
761        </tr>
762        <tr>
763        <td style="text-align:left;">
764                <input type="text" id="test21" name="test21" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'reallyreallyreallyreallyreallyreallylongword<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
765        </td>
766        </tr>
767        <tr>
768        <td style="text-align:left;">
769                <input type="text" id="test21_tall_skinny" name="test21_tall_skinny" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="regExp:'ab', promptMessage:'<br><br><br><br><br><br><br><br><br><br><br>a', required:true, missingMessage:'!'"/>
770        </td>
771        </tr>
772</table>
773
774<div id="test22_cp" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="style:{height:'90px', width:'100px', padding:'0px'}">
775   <input type="text" id="test22" name="test22" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="style:{fontSize:'100pt'}, promptMessage:'test overflow', required:true"/>
776<br><br><br><br><br>
777</div>
778
779<table width='100%' align='left'><tr><td width='95%'></td><td style="width:'5%'">
780<div id="test23_cp" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="dir:'rtl', style:{height:'100px', width:'100px', border:'1px', overflow:'scroll'}">
781   <input type="text" id="test23" name="test23" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="dir:'rtl', style:{fontSize:'20pt'}, promptMessage:'test overflow', required:true"/>
782</div>
783</td></tr></table>
784
785</body>
786</html>
Note: See TracBrowser for help on using the repository browser.