source: Dev/trunk/src/client/dijit/tests/Tooltip-placement.html @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 35.1 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        <script type="text/javascript" src="boilerplate.js"></script>
8
9        <style type="text/css">
10                div {font-size:9px}
11        </style>
12
13        <script type="text/javascript">
14                require([
15                        "doh/runner",
16                        "dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/query", "dojo/sniff", "dojo/window",
17                        "dijit/Tooltip",
18                        "dojo/domReady!"
19                ], function(doh, dom, domGeom, domStyle, query, has, winUtils, Tooltip){
20                        doh.register("setup", function(){
21                                Tooltip._MasterTooltip.prototype.duration = 0.05; // speed up tooltip fading
22                                var view = winUtils.getBox();
23                                var width = view.w;
24                                var height = view.h;
25                               
26                                if(width < 600){
27                                        //Make the larger tooltips smaller so they fit on the page and pass all tests
28                                        dom.byId("test2").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
29                                        dom.byId("test5").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
30                                        dom.byId("test12").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
31                                        dom.byId("test17").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
32                                        dom.byId("test19").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
33                                }else if(width > 1200){
34                                        //Make a shorter tooltip longer in order to span the whole width
35                                        dom.byId("test1").setAttribute("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");
36                                        dom.byId("test4").setAttribute("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");
37                                        dom.byId("test10").setAttribute("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");
38                                        dom.byId("test20").setAttribute("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");
39                                }
40                               
41                                if(height < 600){
42                                        //Make the taller tooltips shorter
43                                        for(var i=1;i<22;i++){
44                                                if(i==7){
45                                                        //skip
46                                                }else{
47                                                        dom.byId("test"+i+"_tall_skinny").setAttribute("promptMessage", "<br><br><br><br>a");
48                                                }
49                                        }
50                                }
51                               
52                                domStyle.set("test1", "width", width*(0.3)+"px");
53                                domStyle.set("test1_tall_skinny", "width", width*(0.3)+"px");
54                                domStyle.set("test2", "width", width*(0.6)+"px");
55                                domStyle.set("test2_tall_skinny", "width", width*(0.6)+"px");
56                                domStyle.set("test3", "width", width*(0.9)+"px");
57                                domStyle.set("test3_tall_skinny", "width", width*(0.9)+"px");
58                                domStyle.set("test4", "width", width*(0.3)+"px");
59                                domStyle.set("test4_tall_skinny", "width", width*(0.3)+"px");
60                                domStyle.set("test5", "width", width*(0.6)+"px");
61                                domStyle.set("test5_tall_skinny", "width", width*(0.6)+"px");
62                                domStyle.set("test6", "width", width*(0.9)+"px");
63                                domStyle.set("test6_tall_skinny", "width", width*(0.9)+"px");
64                                domStyle.set("test7", "width", width*(1.1)+"px");
65                                domStyle.set("test8", "width", width*(0.2)+"px");
66                                domStyle.set("test8_tall_skinny", "width", width*(0.2)+"px");
67                                domStyle.set("test9", "width", width*(0.3)+"px");
68                                domStyle.set("test9_tall_skinny", "width", width*(0.3)+"px");
69                                domStyle.set("test10", "width", width*(0.6)+"px");
70                                domStyle.set("test10_tall_skinny", "width", width*(0.6)+"px");
71                                domStyle.set("test11", "width", width*(0.9)+"px");
72                                domStyle.set("test11_tall_skinny", "width", width*(0.9)+"px");
73                                domStyle.set("test12", "width", width*(0.3)+"px");
74                                domStyle.set("test12_tall_skinny", "width", width*(0.3)+"px");
75                                domStyle.set("test13", "width", width*(0.6)+"px");
76                                domStyle.set("test13_tall_skinny", "width", width*(0.6)+"px");
77                                domStyle.set("test14", "width", width*(0.9)+"px");
78                                domStyle.set("test14_tall_skinny", "width", width*(0.9)+"px");
79                                domStyle.set("test15", "width", width*(0.9)+"px");
80                                domStyle.set("test15_tall_skinny", "width", width*(0.9)+"px");
81                                domStyle.set("test16", "width", width*(0.3)+"px");
82                                domStyle.set("test16_tall_skinny", "width", width*(0.3)+"px");
83                                domStyle.set("test17", "width", width*(0.6)+"px");
84                                domStyle.set("test17_tall_skinny", "width", width*(0.6)+"px");
85                                domStyle.set("test18", "width", width*(0.9)+"px");
86                                domStyle.set("test18_tall_skinny", "width", width*(0.9)+"px");
87                                domStyle.set("test19", "width", width*(0.3)+"px");
88                                domStyle.set("test19_tall_skinny", "width", width*(0.3)+"px");
89                                domStyle.set("test20", "width", width*(0.6)+"px");
90                                domStyle.set("test20_tall_skinny", "width", width*(0.6)+"px");
91                                domStyle.set("test21", "width", width*(0.9)+"px");
92                                domStyle.set("test21_tall_skinny", "width", width*(0.9)+"px");
93                        });
94
95                        //Verify the following is true:
96                        //      1. The tooltip is displayed to the right or the left of the textbox
97                        //      2. The tooltip arrow is next to the textbox
98                        //      3. The user can view the entire tooltip on the screen OR the tooltip is displayed on the side with the largest width available
99                        //      4. If the tooltip is not completely visible, verify that it uses all available height
100                        function testRightOrLeft(textbox, verifyFullWidthIsUtilized){
101                                verifyTooltipArrowPosition(textbox);
102
103                                var textboxPos = domGeom.position(textbox);
104                                var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
105                               
106                                var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
107                                var toTheLeft = xDiff >= -0.5 && xDiff < 2;
108
109                                xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
110                                var toTheRight = xDiff >= -0.5 && xDiff < 2;
111
112                                doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
113
114                                var tooltip = Tooltip._masterTT.containerNode;
115                                var tooltipPos = domGeom.position(tooltip);
116
117                                var view = winUtils.getBox();
118                                var isIE6 = has("ie") < 7;
119                                //verify the entire width is utilized.  Small tooltips will not utilize the entire width.
120                                if(verifyFullWidthIsUtilized && !isIE6 && !has("opera")){
121                                        if(toTheLeft){
122                                                doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= textboxPos.x, "The entire width was not utilized to the left");                                       
123                                        }else{
124                                                doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= view.w - tooltipContainerPos.x, "The entire width was not utilized to the right");
125                                        }
126                                }
127                       
128                                //If we cannot view the entire tooltip, verify they side with the most space was choosen and the entire height was utilized.
129                                var canViewEntireTooltip = (tooltipContainerPos.x + tooltipContainerPos.w <= view.w+1) &&
130                                                                                   (tooltipPos.y + tooltipPos.h <= view.h+1);                   
131                                if(!canViewEntireTooltip && !isIE6 && !has("opera")){
132                                        if(toTheLeft){
133                                                //verify there is more space on the left than the right
134                                                doh.t(textboxPos.x >= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the left than the right");
135                                        }else{
136                                                doh.t(textboxPos.x <= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the right than the left");
137                                        }
138                                        //verify the entire height is utilized
139                                        doh.t(tooltipPos.h >= view.h, "The entire height was not utilized. Tooltip height="+tooltipPos.h+". View height="+view.h);
140                                }
141                        }
142                       
143                        function toTheLeftOrRight(textbox){
144                                var textboxPos = domGeom.position(textbox);
145                                var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
146                               
147                                var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
148                                var toTheLeft = xDiff >= -1 && xDiff < 2;
149
150                                xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
151                                var toTheRight = xDiff >= -1 && xDiff < 2;
152
153                                doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
154                        }
155                       
156                        //Verify the tooltip arrow is next to the textbox
157                        function verifyTooltipArrowPosition(textbox){
158                                var textboxPos = domGeom.position(textbox);
159                                var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
160                               
161                                var middleOfTextbox = textboxPos.y + (textboxPos.h / 2);
162                                var middleOfTooltipConnector = tooltipConnectorPos.y + (tooltipConnectorPos.h /2);
163
164                                var yDiff = middleOfTextbox - middleOfTooltipConnector;
165                                var yAxisValid = yDiff <= 2 && yDiff >= -1.5; //tooltip arrow is at a similar y coord as the box
166                                doh.t(yAxisValid, "Y axis is invalid. yDiff was: "+yDiff);
167                        }
168                       
169                        // Test for when the tooltip has large words or nowrap so that it can't be displayed properly,
170                        // given the space available.   Verify the following is true:
171                        //         1. The tooltip arrow is next to the textbox
172                        // Note that tooltip text may be cut off if there wasn't enough room to display the tooltip
173                        // to the left/right of the anchor node
174                        function testNoWrapOrLargeWords(textbox){
175                                verifyTooltipArrowPosition(textbox);
176                        }
177               
178                        function testAboveBelow(textbox, verifyConnectorPosition){
179                                var textboxPos = domGeom.position(textbox);
180                                var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
181                                var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
182
183                                if(verifyConnectorPosition){
184                                        var xAxisValid = textboxPos.x <= tooltipConnectorPos.x && tooltipConnectorPos.x <= (textboxPos.x + textboxPos.w);
185                                        doh.t(xAxisValid, "X axis is invalid");
186                                }
187                       
188                                //verify the tooltip is above or below the textbox
189                                var yDiff = textboxPos.y - tooltipContainerPos.y - tooltipContainerPos.h;
190                                var above = yDiff >= -0.5 && yDiff < 1;
191       
192                                yDiff = tooltipContainerPos.y - textboxPos.y - textboxPos.h;
193                                var below = yDiff >= -0.5 && yDiff < 1;
194
195                                doh.t(above || below, "above || below, yDiff == " + yDiff);
196                        }
197
198                        for(var i=1; i<=21; i++){
199                                if(i==7){ continue; }
200                                (function(i){
201                                        // Need the closure to run tests on each node, rather than repeating on "test21" node
202                                        var node = dom.byId("test"+i),
203                                                skinnyNode = dom.byId("test"+i+"_tall_skinny"),
204                                                nowrapTest = (i==3 || i==6 || i==8 || i==9 || i==13 || i==16 || i==21);
205                                        doh.register("test" + i, [
206                                                {
207                                                        name: "test"+i+"_tall_skinny",
208                                                        runTest: function(){
209                                                                var d = new doh.Deferred();
210                                                                winUtils.scrollIntoView(skinnyNode);
211                                                                Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode);
212                                                                setTimeout(d.getTestCallback(function(){
213                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
214                                                                        testRightOrLeft(skinnyNode, false);
215                                                                }), 100);
216                                                                return d;
217                                                        }
218                                                },
219                                                {
220                                                        name: "test"+i,
221                                                        runTest: function(){
222                                                                var d = new doh.Deferred();
223                                                                winUtils.scrollIntoView(node);
224                                                                Tooltip.show(node.getAttribute("promptMessage"), node);
225                                                                setTimeout(d.getTestCallback(function(){
226                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
227                                                                        if(nowrapTest){
228                                                                                // For nowrap tests  we should only verify the arrow is pointing to the textbox
229                                                                                testNoWrapOrLargeWords(node);
230                                                                        }else{
231                                                                                testRightOrLeft(node, true);
232                                                                        }
233                                                                }), 100);
234                                                                return d;
235                                                        }
236                                                },
237                                                {
238                                                        name: "test"+i+"_lrs",
239                                                        runTest: function(){
240                                                                var d = new doh.Deferred();
241                                                                Tooltip.show("!", node);
242                                                                setTimeout(d.getTestCallback(function(){
243                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
244                                                                        testRightOrLeft(node, false);
245                                                                }), 100);
246                                                                return d;
247                                                        }
248                                                },
249                                                {
250                                                        name: "test"+i+"_abs",
251                                                        runTest: function(){
252                                                                var d = new doh.Deferred();
253                                                                winUtils.scrollIntoView(node);
254                                                                Tooltip.hide(node);     // needed since show() below matches node & content of show() above
255                                                                Tooltip.show("!", node, ["below", "above"]);
256                                                                setTimeout(d.getTestCallback(function(){
257                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
258                                                                        testAboveBelow(node, true);
259                                                                }), 100);
260                                                                return d;
261                                                        }
262                                                },
263                                                {
264                                                        name: "test"+i+"_ab",
265                                                        runTest: function(){
266                                                                var d = new doh.Deferred();
267                                                                Tooltip.show(node.getAttribute("promptMessage"), node, ["below", "above"]);
268                                                                setTimeout(d.getTestCallback(function(){
269                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
270                                                                        if(nowrapTest){
271                                                                                // For nowrap tests we should only verify the arrow is pointing to the textbox
272                                                                                // (in most cases it's off the screen)
273                                                                                testAboveBelow(node, false);
274                                                                        }else{
275                                                                                testAboveBelow(node, true);
276                                                                        }
277                                                                }), 100);
278                                                                return d;
279                                                        }
280                                                },
281                                                {
282                                                        name: "test"+i+"_ab_tall_skinny",
283                                                        runTest: function(){
284                                                                var d = new doh.Deferred();
285                                                                winUtils.scrollIntoView(skinnyNode);
286                                                                Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode, ["below", "above"]);
287                                                                setTimeout(d.getTestCallback(function(){
288                                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
289                                                                        testAboveBelow(skinnyNode, true);
290                                                                }), 100);
291                                                                return d;
292                                                        }
293                                                }
294                                        ]);
295                                })(i);  // end closure
296                        }
297
298                        doh.register("anchor inside overflowed div", [
299                                {
300                                        name: "test22",
301                                        runTest: function(){
302                                                var d = new doh.Deferred();
303                                                var node = dom.byId("test22");
304                                                var cp = dom.byId("test22_cp");
305                                                winUtils.scrollIntoView(cp);
306                                                Tooltip.hide(node);     // needed since show() below matches node & content of show() above
307                                                Tooltip.show(node.getAttribute("promptMessage"), node);
308                                                setTimeout(d.getTestCallback(function(){
309                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
310                                                        toTheLeftOrRight(cp, true);
311                                                }), 100);
312                                                return d;
313                                        }
314                                },
315                                {
316                                        name: "test23",
317                                        runTest: function(){
318                                                var d = new doh.Deferred();
319                                                var node = dom.byId("test23");
320                                                var cp = dom.byId("test23_cp");
321                                                Tooltip.show(node.getAttribute("promptMessage"), node, null, true);
322                                                setTimeout(d.getTestCallback(function(){
323                                                        // use timeout to wait for fade out of tooltip from old position, and fade in to new position
324                                                        toTheLeftOrRight(cp, true);
325                                                }), 100);
326                                                return d;
327                                        }
328                                }
329                        ]);
330
331                        doh.run();
332                });
333        </script>
334</head>
335<body class="claro">
336<table>
337
338        <tr>
339        <td style="text-align:right;">
340                <input type="text" id="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<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
341        </td>
342        </tr>   
343        <tr>
344        <td style="text-align:right;">
345                <input type="text" id="test1_tall_skinny" name="test1_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
346        </td>
347        </tr>
348        <tr>
349        <td style="text-align:right;">
350                <input type="text" id="test2" 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'/>
351        </td>
352        </tr>
353        <tr>
354        <td style="text-align:right;">
355                <input type="text" id="test2_tall_skinny" name="test2_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
356        </td>
357        </tr>
358        <tr>
359        <td style="text-align:right;">
360                <input type="text" id="test3" promptMessage='reallyreallylonggermanwordreallyreallyreallyreallyreallyreallyreallylongword big'/>
361        </td>
362        </tr>
363        <tr>
364        <td style="text-align:right;">
365                <input type="text" id="test3_tall_skinny" name="test3_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
366        </td>
367        </tr>
368        <tr>
369        <td style="text-align:left;">
370                <input type="text" id="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<br><br><br><br><br><br><br><br><br>a'/>
371        </td>
372        </tr>
373        <tr>
374        <td style="text-align:left;">
375                <input type="text" id="test4_tall_skinny" name="test4_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
376        </td>
377        </tr>
378        <tr>
379        <td style="text-align:left;">
380                <input type="text" id="test5" 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'/>
381        </td>
382        </tr>
383        <tr>
384        <td style="text-align:left;">
385                <input type="text" id="test5_tall_skinny" name="test5_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
386        </td>
387        </tr>
388        <tr>
389        <td style="text-align:left;">
390                <input type="text" id="test6" promptMessage="<div style='white-space: nowrap'>really really really really big</div>"/>
391        </td>
392        </tr>
393        <tr>
394        <td style="text-align:left;">
395                <input type="text" id="test6_tall_skinny" name="test6_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
396        </td>
397        </tr>
398        <tr>
399        <td style="text-align:left;">
400                <input type="text" id="test7" name="test7"/>
401        </td>
402        </tr>
403        <tr>
404        <td style="text-align:left;">
405                <input type="text" id="test8" 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>"/>
406        </td>
407        </tr>
408        <tr>
409        <td style="text-align:left;">
410                <input type="text" id="test8_tall_skinny" name="test8_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
411        </td>
412        </tr>
413        <tr>
414        <td style="text-align:left;">
415                <br><br>
416        </td>
417        </tr>
418        <tr>
419        <td style="text-align:right;">
420                <input type="text" id="test9" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword'/>
421        </td>
422        </tr>
423        <tr>
424        <td style="text-align:right;">
425                <input type="text" id="test9_tall_skinny" name="test9_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
426        </td>
427        </tr>
428        <tr>
429        <td style="text-align:right;">
430                <input type="text" id="test10" 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'/>
431        </td>
432        </tr>
433        <tr>
434        <td style="text-align:right;">
435                <input type="text" id="test10_tall_skinny" name="test10_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
436        </td>
437        </tr>
438        <tr>
439        <td style="text-align:right;">
440                <input type="text" id="test11" 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'/>
441        </td>
442        </tr>
443        <tr>
444        <td style="text-align:right;">
445                <input type="text" id="test11_tall_skinny" name="test11_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
446        </td>
447        </tr>
448        <tr>
449        <td style="text-align:left;">
450                <input type="text" id="test12" 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'/>
451        </td>
452        </tr>
453        <tr>
454        <td style="text-align:left;">
455                <input type="text" id="test12_tall_skinny" name="test12_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
456        </td>
457        </tr>
458        <tr>
459        <td style="text-align:left;">
460                <input type="text" id="test13" 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>"/>
461        </td>
462        </tr>
463        <tr>
464        <td style="text-align:left;">
465                <input type="text" id="test13_tall_skinny" name="test13_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
466        </td>
467        </tr>
468        <tr>
469        <td style="text-align:left;">
470                <input type="text" id="test14" 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'/>
471        </td>
472        </tr>
473        <tr>
474        <td style="text-align:left;">
475                <input type="text" id="test14_tall_skinny" name="test14_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
476        </td>
477        </tr>
478        <tr>
479        <td style="text-align:left;">
480                <input type="text" id="test15" 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'/>
481        </td>
482        </tr>
483        <tr>
484        <td style="text-align:left;">
485                <input type="text" id="test15_tall_skinny" name="test15_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
486        </td>
487        </tr>
488        <tr>
489        <td style="text-align:left;">
490                <br>
491        </td>
492        </tr>   
493        <tr>
494        <td style="text-align:right;">
495                <input type="text" id="test16" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword big word really big word'/>
496        </td>
497        </tr>
498        <tr>
499        <td style="text-align:right;">
500                <input type="text" id="test16_tall_skinny" name="test16_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
501        </td>
502        </tr>
503        <tr>
504        <td style="text-align:right;">
505                <input type="text" id="test17" 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'/>
506        </td>
507        </tr>
508        <tr>
509        <td style="text-align:right;">
510                <input type="text" id="test17_tall_skinny" name="test17_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
511        </td>
512        </tr>
513        <tr>
514        <td style="text-align:right;">
515                <input type="text" id="test18" 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'/>
516        </td>
517        </tr>
518        <tr>
519        <td style="text-align:right;">
520                <input type="text" id="test18_tall_skinny" name="test18_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
521        </td>
522        </tr>
523        <tr>
524        <td style="text-align:left;">
525                <input type="text" id="test19" 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'/>
526        </td>
527        </tr>
528        <tr>
529        <td style="text-align:left;">
530                <input type="text" id="test19_tall_skinny" name="test19_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
531        </td>
532        </tr>
533        <tr>
534        <td style="text-align:left;">
535                <input type="text" id="test20" 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'/>
536        </td>
537        </tr>
538        <tr>
539        <td style="text-align:left;">
540                <input type="text" id="test20_tall_skinny" name="test20_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
541        </td>
542        </tr>
543        <tr>
544        <td style="text-align:left;">
545                <input type="text" id="test21" promptMessage='reallyreallyreallyreallyreallyreallylongword<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
546        </td>
547        </tr>
548        <tr>
549        <td style="text-align:left;">
550                <input type="text" id="test21_tall_skinny" name="test21_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
551        </td>
552        </tr>
553</table>
554
555<div id="test22_cp" style="height:90px; width:100px; padding:0px; overflow: auto;">
556   <input type="text" id="test22" style="fontSize:100pt" promptMessage='test overflow'/>
557<br><br><br><br><br>
558</div>
559
560<table width='100%' align='left'><tr><td width='95%'></td><td style="width:5%">
561<div id="test23_cp" dir='rtl' style="height:100px; width:100px; border:1px; overflow:scroll">
562   <input type="text" id="test23" dir='rtl' style="fontSize:20pt" promptMessage='test overflow'/>
563</div>
564</td></tr></table>
565
566</body>
567</html>
Note: See TracBrowser for help on using the repository browser.