dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
600 lines (564 loc) • 35.6 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo Tooltip Placement Test</title>
<script type="text/javascript" src="boilerplate.js"></script>
<style type="text/css">
div {font-size:9px}
</style>
<script type="text/javascript">
require([
"doh/runner",
"dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/query", "dojo/sniff", "dojo/window",
"dijit/Tooltip",
"dojo/domReady!"
], function(doh, dom, domGeom, domStyle, query, has, winUtils, Tooltip){
doh.register("setup", function(){
Tooltip._MasterTooltip.prototype.duration = 0.05; // speed up tooltip fading
var view = winUtils.getBox();
var width = view.w;
var height = view.h;
if(width < 600){
//Make the larger tooltips smaller so they fit on the page and pass all tests
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");
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");
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");
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");
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");
}else if(width > 1200){
//Make a shorter tooltip longer in order to span the whole width
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");
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");
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");
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");
}
if(height < 600){
//Make the taller tooltips shorter
for(var i=1;i<22;i++){
if(i==7){
//skip
}else{
dom.byId("test"+i+"_tall_skinny").setAttribute("promptMessage", "<br><br><br><br>a");
}
}
}
domStyle.set("test1", "width", width*(0.3)+"px");
domStyle.set("test1_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test2", "width", width*(0.6)+"px");
domStyle.set("test2_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test3", "width", width*(0.9)+"px");
domStyle.set("test3_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test4", "width", width*(0.3)+"px");
domStyle.set("test4_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test5", "width", width*(0.6)+"px");
domStyle.set("test5_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test6", "width", width*(0.9)+"px");
domStyle.set("test6_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test7", "width", width*(1.1)+"px");
domStyle.set("test8", "width", width*(0.2)+"px");
domStyle.set("test8_tall_skinny", "width", width*(0.2)+"px");
domStyle.set("test9", "width", width*(0.3)+"px");
domStyle.set("test9_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test10", "width", width*(0.6)+"px");
domStyle.set("test10_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test11", "width", width*(0.9)+"px");
domStyle.set("test11_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test12", "width", width*(0.3)+"px");
domStyle.set("test12_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test13", "width", width*(0.6)+"px");
domStyle.set("test13_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test14", "width", width*(0.9)+"px");
domStyle.set("test14_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test15", "width", width*(0.9)+"px");
domStyle.set("test15_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test16", "width", width*(0.3)+"px");
domStyle.set("test16_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test17", "width", width*(0.6)+"px");
domStyle.set("test17_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test18", "width", width*(0.9)+"px");
domStyle.set("test18_tall_skinny", "width", width*(0.9)+"px");
domStyle.set("test19", "width", width*(0.3)+"px");
domStyle.set("test19_tall_skinny", "width", width*(0.3)+"px");
domStyle.set("test20", "width", width*(0.6)+"px");
domStyle.set("test20_tall_skinny", "width", width*(0.6)+"px");
domStyle.set("test21", "width", width*(0.9)+"px");
domStyle.set("test21_tall_skinny", "width", width*(0.9)+"px");
});
//Verify the following is true:
// 1. The tooltip is displayed to the right or the left of the textbox
// 2. The tooltip arrow is next to the textbox
// 3. The user can view the entire tooltip on the screen OR the tooltip is displayed on the side with the largest width available
// 4. If the tooltip is not completely visible, verify that it uses all available height
function testRightOrLeft(textbox, verifyFullWidthIsUtilized){
verifyTooltipArrowPosition(textbox);
var textboxPos = domGeom.position(textbox);
var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
var toTheLeft = xDiff >= -0.5 && xDiff < 2;
xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
var toTheRight = xDiff >= -0.5 && xDiff < 2;
doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
var tooltip = Tooltip._masterTT.containerNode;
var tooltipPos = domGeom.position(tooltip);
var view = winUtils.getBox();
var isIE6 = has("ie") < 7;
//verify the entire width is utilized. Small tooltips will not utilize the entire width.
if(verifyFullWidthIsUtilized && !isIE6 && !has("opera")){
if(toTheLeft){
doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= textboxPos.x, "The entire width was not utilized to the left");
}else{
doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= view.w - tooltipContainerPos.x, "The entire width was not utilized to the right");
}
}
//If we cannot view the entire tooltip, verify they side with the most space was chosen and the entire height was utilized.
var canViewEntireTooltip = (tooltipContainerPos.x + tooltipContainerPos.w <= view.w+1) &&
(tooltipPos.y + tooltipPos.h <= view.h+1);
if(!canViewEntireTooltip && !isIE6 && !has("opera")){
if(toTheLeft){
//verify there is more space on the left than the right
doh.t(textboxPos.x >= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the left than the right");
}else{
doh.t(textboxPos.x <= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the right than the left");
}
//verify the entire height is utilized
doh.t(tooltipPos.h >= view.h, "The entire height was not utilized. Tooltip height="+tooltipPos.h+". View height="+view.h);
}
}
function toTheLeftOrRight(textbox){
var textboxPos = domGeom.position(textbox);
var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
var toTheLeft = xDiff >= -1 && xDiff < 2;
xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
var toTheRight = xDiff >= -1 && xDiff < 2;
doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
}
//Verify the tooltip arrow is next to the textbox
function verifyTooltipArrowPosition(textbox){
var textboxPos = domGeom.position(textbox);
var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
var middleOfTextbox = textboxPos.y + (textboxPos.h / 2);
var middleOfTooltipConnector = tooltipConnectorPos.y + (tooltipConnectorPos.h /2);
var yDiff = middleOfTextbox - middleOfTooltipConnector;
var yAxisValid = yDiff <= 2 && yDiff >= -1.5; //tooltip arrow is at a similar y coord as the box
doh.t(yAxisValid, "Y axis is invalid. yDiff was: "+yDiff);
}
// Test for when the tooltip has large words or nowrap so that it can't be displayed properly,
// given the space available. Verify the following is true:
// 1. The tooltip arrow is next to the textbox
// Note that tooltip text may be cut off if there wasn't enough room to display the tooltip
// to the left/right of the anchor node
function testNoWrapOrLargeWords(textbox){
verifyTooltipArrowPosition(textbox);
}
function testAboveBelow(textbox, verifyConnectorPosition){
var textboxPos = domGeom.position(textbox);
var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
if(verifyConnectorPosition){
var xAxisValid = textboxPos.x <= tooltipConnectorPos.x && tooltipConnectorPos.x <= (textboxPos.x + textboxPos.w);
doh.t(xAxisValid, "X axis is invalid");
}
//verify the tooltip is above or below the textbox
var yDiff = textboxPos.y - tooltipContainerPos.y - tooltipContainerPos.h;
var above = yDiff >= -0.5 && yDiff < 1;
yDiff = tooltipContainerPos.y - textboxPos.y - textboxPos.h;
var below = yDiff >= -0.5 && yDiff < 1;
doh.t(above || below, "above || below, yDiff == " + yDiff);
}
for(var i=1; i<=21; i++){
if(i==7){ continue; }
(function(i){
// Need the closure to run tests on each node, rather than repeating on "test21" node
var node = dom.byId("test"+i),
skinnyNode = dom.byId("test"+i+"_tall_skinny"),
nowrapTest = (i==3 || i==6 || i==8 || i==9 || i==13 || i==16 || i==21);
doh.register("test" + i, [
{
name: "test"+i+"_tall_skinny",
runTest: function(){
var d = new doh.Deferred();
winUtils.scrollIntoView(skinnyNode);
Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
testRightOrLeft(skinnyNode, false);
}), 100);
return d;
}
},
{
name: "test"+i,
runTest: function(){
var d = new doh.Deferred();
winUtils.scrollIntoView(node);
Tooltip.show(node.getAttribute("promptMessage"), node);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
if(nowrapTest){
// For nowrap tests we should only verify the arrow is pointing to the textbox
testNoWrapOrLargeWords(node);
}else{
testRightOrLeft(node, true);
}
}), 100);
return d;
}
},
{
name: "test"+i+"_lrs",
runTest: function(){
var d = new doh.Deferred();
Tooltip.show("!", node);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
testRightOrLeft(node, false);
}), 100);
return d;
}
},
{
name: "test"+i+"_abs",
runTest: function(){
var d = new doh.Deferred();
winUtils.scrollIntoView(node);
Tooltip.hide(node); // needed since show() below matches node & content of show() above
Tooltip.show("!", node, ["below", "above"]);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
testAboveBelow(node, true);
}), 100);
return d;
}
},
{
name: "test"+i+"_ab",
runTest: function(){
var d = new doh.Deferred();
Tooltip.show(node.getAttribute("promptMessage"), node, ["below", "above"]);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
if(nowrapTest){
// For nowrap tests we should only verify the arrow is pointing to the textbox
// (in most cases it's off the screen)
testAboveBelow(node, false);
}else{
testAboveBelow(node, true);
}
}), 100);
return d;
}
},
{
name: "test"+i+"_ab_tall_skinny",
runTest: function(){
var d = new doh.Deferred();
winUtils.scrollIntoView(skinnyNode);
Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode, ["below", "above"]);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
testAboveBelow(skinnyNode, true);
}), 100);
return d;
}
}
]);
})(i); // end closure
}
doh.register("anchor inside overflowed div", [
{
name: "test22",
runTest: function(){
var d = new doh.Deferred();
var node = dom.byId("test22");
var cp = dom.byId("test22_cp");
winUtils.scrollIntoView(cp);
Tooltip.hide(node); // needed since show() below matches node & content of show() above
Tooltip.show(node.getAttribute("promptMessage"), node);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
toTheLeftOrRight(cp, true);
}), 100);
return d;
}
},
{
name: "test23",
runTest: function(){
var d = new doh.Deferred();
var node = dom.byId("test23");
var cp = dom.byId("test23_cp");
Tooltip.show(node.getAttribute("promptMessage"), node, null, true);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
toTheLeftOrRight(cp, true);
}), 100);
return d;
}
}
]);
if(has("svg")){
doh.register("svg tooltip", [
{
name: "setup",
runTest: function(){
document.body.insertAdjacentHTML("beforeend",
"<div id='svgWrapper' style='position: relative; top: 100px; left: 100px;'>" +
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>" +
"<rect id='theRectangle' width='300' height='100' " +
"style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)' />" +
"</svg>" +
"</div>"
);
winUtils.scrollIntoView("svgWrapper");
}
},
{
name: "display",
runTest: function(){
var d = new doh.Deferred();
var cp = dom.byId("theRectangle");
Tooltip.show("SVG tooltip", cp, null, true);
setTimeout(d.getTestCallback(function(){
// use timeout to wait for fade out of tooltip from old position, and fade in to new position
toTheLeftOrRight(cp, true);
}), 100);
return d;
}
}
]);
}
doh.run();
});
</script>
</head>
<body class="claro">
<table>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test1_tall_skinny" name="test1_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test2_tall_skinny" name="test2_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test3" promptMessage='reallyreallylonggermanwordreallyreallyreallyreallyreallyreallyreallylongword big'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test3_tall_skinny" name="test3_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test4_tall_skinny" name="test4_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test5_tall_skinny" name="test5_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test6" promptMessage="<div style='white-space: nowrap'>really really really really big</div>"/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test6_tall_skinny" name="test6_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test7" name="test7"/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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>"/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test8_tall_skinny" name="test8_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<br><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test9" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test9_tall_skinny" name="test9_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test10_tall_skinny" name="test10_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test11_tall_skinny" name="test11_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test12_tall_skinny" name="test12_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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>"/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test13_tall_skinny" name="test13_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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 big'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test14_tall_skinny" name="test14_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test15_tall_skinny" name="test15_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<br>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test16" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword big word really big word'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test16_tall_skinny" name="test16_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test17_tall_skinny" name="test17_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:right;">
<input type="text" id="test18_tall_skinny" name="test18_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test19_tall_skinny" name="test19_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<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'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test20_tall_skinny" name="test20_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test21" promptMessage='reallyreallyreallyreallyreallyreallylongword<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
<tr>
<td style="text-align:left;">
<input type="text" id="test21_tall_skinny" name="test21_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
</td>
</tr>
</table>
<div id="test22_cp" style="height:90px; width:100px; padding:0px; overflow: auto;">
<input type="text" id="test22" style="fontSize:100pt" promptMessage='test overflow'/>
<br><br><br><br><br>
</div>
<table width='100%' align='left'><tr><td width='95%'></td><td style="width:5%">
<div id="test23_cp" dir='rtl' style="height:100px; width:100px; border:1px; overflow:scroll">
<input type="text" id="test23" dir='rtl' style="fontSize:20pt" promptMessage='test overflow'/>
</div>
</td></tr></table>
</body>
</html>