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
287 lines (271 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_ExpandingTextAreaMixin tests</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../../themes/dijit.css";
#table {
margin: 0;
padding: 2px;
}
#table, TEXTAREA {
font-family: monospace;
font-size: 12pt;
}
#table .layout {
padding: 2px;
font-size: 100%;
margin: 0;
}
</style>
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.Textarea");
dojo.require("dojox.mobile.ExpandingTextArea");
dojo.ready(function(){
var maxLengthNativeSupport = "maxLength" in document.createElement("textarea");
doh.register("attributes", [
{
name: "dijit",
runTest: function(){
var dijit_attributes = dijit.byId('dijit_attributes');
doh.is("", dijit_attributes.textbox.value, "dijit original value");
doh.is("", dijit_attributes.get('value'), "dijit original get('value')");
if(maxLengthNativeSupport){
doh.is("20", dijit_attributes.textbox.getAttribute("maxlength"), "dijit original maxLength");
}
doh.is("20", dijit_attributes.get('maxLength'), "dijit original get('maxLength')");
dijit_attributes.set('maxLength', "9");
doh.is("", dijit_attributes.textbox.value, "dijit value");
doh.is("", dijit_attributes.get('value'), "dijit get('value')");
if(maxLengthNativeSupport){
doh.is("9", dijit_attributes.textbox.getAttribute("maxlength"), "dijit maxLength");
}
doh.is("9", dijit_attributes.get('maxLength'), "dijit get('maxLength')");
// cols
doh.is("20", dijit_attributes.textbox.getAttribute("cols"), "dijit original cols");
doh.is("20", dijit_attributes.get('cols'), "dijit original get('cols')");
dijit_attributes.set('cols', "19");
doh.is("19", dijit_attributes.textbox.getAttribute("cols"), "dijit cols");
doh.is("19", dijit_attributes.get('cols'), "dijit get('cols')");
}
},
{
name: "mobile",
runTest: function(){
var mobile_attributes = dijit.byId('mobile_attributes');
doh.is("", mobile_attributes.textbox.value, "mobile original value");
doh.is("", mobile_attributes.get('value'), "mobile original get('value')");
if(maxLengthNativeSupport){
doh.is("20", mobile_attributes.textbox.getAttribute("maxlength"), "mobile original maxLength");
}
doh.is("20", mobile_attributes.get('maxLength'), "mobile original get('maxLength')");
mobile_attributes.set('maxLength', "9");
doh.is("", mobile_attributes.textbox.value, "mobile value");
doh.is("", mobile_attributes.get('value'), "mobile get('value')");
if(maxLengthNativeSupport){
doh.is("9", mobile_attributes.textbox.getAttribute("maxlength"), "mobile maxLength");
}
doh.is("9", mobile_attributes.get('maxLength'), "mobile get('maxLength')");
// cols
doh.is("20", mobile_attributes.textbox.getAttribute("cols"), "mobile original cols");
doh.is("20", mobile_attributes.get('cols'), "mobile original get('cols')");
mobile_attributes.set('cols', "19");
doh.is("19", mobile_attributes.textbox.getAttribute("cols"), "mobile cols");
doh.is("19", mobile_attributes.get('cols'), "mobile get('cols')");
}
}
]);
doh.register("events", [
{
name: "dijit",
timeout: 5000,
runTest: function(){
var
d = new doh.Deferred(),
dijit_events = dijit.byId('dijit_events'),
nop = function(){ return false; };
function onFocus(){
dijit_events.set('onFocus', nop);
dijit_events.set("value", "Focus");
dijit_events.set('onBlur', onBlur);
dijit.byId('mobile_events').focus();
}
function onBlur(){
dijit_events.set('onChange', onChange);
dijit_events.set('onBlur', nop);
dijit_events.set("value", "Blur");
}
function onChange(){
dijit_events.set('onChange', nop);
dijit_events.set("value", "Change");
dijit_events.focus();
d.callback(true);
}
doh.is(nop.toString(), dijit_events.get('onFocus').toString(), "get('onFocus')");
doh.is(nop.toString(), dijit_events.get('onBlur').toString(), "get('onBlur')");
doh.is(nop.toString(), dijit_events.get('onChange').toString(), "get('onChange')");
dijit_events.set('onFocus', onFocus);
setTimeout(dojo.hitch(dijit_events, "focus"), 0);
return d;
}
},
{
name: "mobile",
timeout: 10000,
runTest: function(){
var
d = new doh.Deferred(),
mobile_events = dijit.byId('mobile_events'),
focusHandle, blurhandle,
nop = function(){ return false; };
function onFocus(){
mobile_events.disconnect(focusHandle);
mobile_events.set("value", "Focus");
blurhandle = mobile_events.connect(mobile_events, '_onBlur', onBlur);
dijit.byId('dijit_events').focus();
}
function onBlur(){
mobile_events.set('onChange', onChange);
mobile_events.disconnect(blurhandle);
mobile_events.set("value", "Blur");
}
function onChange(){
mobile_events.set('onChange', nop);
mobile_events.set("value", "Change");
mobile_events.focus();
d.callback(true);
}
doh.is(nop.toString(), mobile_events.get('onChange').toString(), "get('onChange')");
mobile_events.textbox.value = "changing";
focusHandle = mobile_events.connect(mobile_events, '_onFocus', onFocus);
setTimeout(dojo.hitch(mobile_events, "focus"), 0);
return d;
}
}
]);
doh.register("programmatic", [
{
name: "dijit",
timeout: 5000,
runTest: function(){
new dijit.form.Textarea({id:"dijit_programmatic", value:"No srcNodeRef", "aria-label":"dijit_programmatic"}).placeAt("dijit_programmatic_container", "first");
var dijit_programmatic = dijit.byId('dijit_programmatic');
dijit_programmatic.resize();
var focushandle = dijit_programmatic.connect(dijit_programmatic, '_onFocus',
function(){
d.getTestCallback(function(){
dijit_programmatic.disconnect(focushandle);
var pos = dojo.position(dijit_programmatic.domNode, true);
doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'dijit position');
doh.is("No srcNodeRef", dijit_programmatic.textbox.value, 'dijit textbox value');
doh.is("No srcNodeRef", dijit_programmatic.get('value'), 'dijit widget value');
})();
}
);
var d = new doh.Deferred();
setTimeout(dojo.hitch(dijit_programmatic, "focus"), 0);
return d;
}
},
{
name: "mobile",
timeout: 5000,
runTest: function(){
new dojox.mobile.ExpandingTextArea({id:"mobile_programmatic", value:"No srcNodeRef","aria-label":"mobile_programmatic"}).placeAt("mobile_programmatic_container", "first");
var mobile_programmatic = dijit.byId('mobile_programmatic');
mobile_programmatic.resize();
var focushandle = mobile_programmatic.connect(mobile_programmatic, '_onFocus',
function(){
d.getTestCallback(function(){
mobile_programmatic.disconnect(focushandle);
var pos = dojo.position(mobile_programmatic.domNode, true);
doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
doh.is("No srcNodeRef", mobile_programmatic.textbox.value, 'mobile textbox value');
doh.is("No srcNodeRef", mobile_programmatic.get('value'), 'mobile widget value');
})();
}
);
var d = new doh.Deferred();
setTimeout(dojo.hitch(mobile_programmatic, "focus"), 0);
return d;
}
}
]);
doh.register("sizes", [
{
name: "dijit",
runTest: function(){
var dijit_size = dijit.byId('dijit_size');
var originalH = dijit_size.domNode.offsetHeight;
var originalVal = dijit_size.value;
dijit_size.set('value', originalVal + "\n");
var newH = dijit_size.domNode.offsetHeight;
doh.t(newH > originalH, "expand: " + newH + ' ' + originalH);
dijit_size.set('value', originalVal);
newH = dijit_size.domNode.offsetHeight;
doh.is(newH, originalH, "shrink: " + newH + ' ' + originalH);
}
},
{
name: "mobile",
runTest: function(){
var mobile_size = dijit.byId('mobile_size');
var originalH = mobile_size.domNode.offsetHeight;
var originalVal = mobile_size.value;
mobile_size.set('value', originalVal + "\n");
var newH = mobile_size.domNode.offsetHeight;
doh.t(newH > originalH, "expand: " + newH + ' ' + originalH);
mobile_size.set('value', originalVal);
newH = mobile_size.domNode.offsetHeight;
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">_ExpandingTextAreaMixin (dijit and mobile) non-robot tests</h1>
<table id="table">
<tr>
<th class="layout"> </th>
<th class="layout">dijit</th>
<th class="layout">mobile</th>
</tr>
<tr>
<td class="layout">attributes</td>
<td class="layout"><input id="dijit_attributes" aria-label="dijit_attr" data-dojo-type="dijit/form/Textarea" data-dojo-props='value:"", placeHolder:"original", maxLength:"20", cols:20'/></td>
<td class="layout"><textarea id="mobile_attributes" aria-label="mobilet_attr" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props='cols:20, placeHolder:"original", maxLength:20'></textarea></td>
</tr>
<tr>
<td class="layout">Events</td>
<td class="layout"><input id="dijit_events" aria-label="dijit_events"data-dojo-type="dijit/form/Textarea" data-dojo-props='value:"", onFocus:function(){ return false; }, onBlur:function(){ return false; }, onChange:function(){ return false; }'/></td>
<td class="layout"><textarea id="mobile_events" aria-label="mobile_events" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props='onChange:function(){ return false; }'></textarea></td>
</tr>
<tr>
<td class="layout">Programmatic</td>
<td class="layout" id="dijit_programmatic_container"></td>
<td class="layout" id="mobile_programmatic_container"></td>
</tr>
<tr>
<td class="layout">Size</td>
<td class="layout"><textarea id="dijit_size" aria-label="dijit_size" data-dojo-type="dijit/form/Textarea" data-dojo-props=''
>line 1
line 2
line 3</textarea></td>
<td class="layout"><textarea id="mobile_size" aria-label="mobile_size" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props=''
>line 1
line 2
line 3</textarea></td>
</tr>
</table>
</body>
</html>