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
188 lines (173 loc) • 8.47 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>_RadioButtonMixin tests</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../../themes/dijit.css";
#table {
margin: 0;
padding: 2px;
}
#table, .dijit, BUTTON {
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.RadioButton");
dojo.require("dojox.mobile.RadioButton");
dojo.ready(function(){
doh.register("attributes", [
{
name: "dijit",
runTest: function(){
var dijit_attributes = dijit.byId('dijit_attributes');
doh.is("something", dijit_attributes.focusNode.value, 'dijit HTML element original value');
doh.t(dijit_attributes.get('checked'), "dijit original get('checked')");
doh.t(!!dijit_attributes.focusNode.checked, 'dijit HTML element originally checked');
doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass+"Checked"), "dijit baseClass checked");
dijit_attributes.set('value', "something else");
dijit.byId('dijit_attributes2').set('checked', true);
doh.f(dijit_attributes.get('checked'), "dijit get('checked')");
doh.t(!dijit_attributes.focusNode.checked, 'dijit HTML element unchecked');
doh.f(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass+"Checked"), "dijit baseClass not checked");
doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass), "dijit baseClass");
doh.t(dojo.hasClass(dijit_attributes.domNode, "mblRedButton"), "dijit original class");
doh.is("something else", dijit_attributes.focusNode.value, 'dijit HTML element value');
}
},
{
name: "mobile",
runTest: function(){
var mobile_attributes = dijit.byId('mobile_attributes');
doh.is("something", mobile_attributes.focusNode.value, 'mobile HTML element original value');
doh.t(mobile_attributes.get('checked'), "mobile original get('checked')");
doh.t(!!mobile_attributes.focusNode.checked, 'mobile HTML element originally checked');
doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass+"Checked"), "mobile baseClass checked");
dijit.byId('mobile_attributes2').set('checked', true);
mobile_attributes.set('value', "something else");
doh.f(mobile_attributes.get('checked'), "mobile get('checked')");
doh.t(!mobile_attributes.focusNode.checked, 'mobile HTML element unchecked');
doh.f(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass+"Checked"), "mobile baseClass not checked");
doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass), "mobile baseClass");
doh.t(dojo.hasClass(mobile_attributes.domNode, "mblRedButton"), "mobile original class");
doh.is("something else", mobile_attributes.focusNode.value, 'mobile HTML element value');
}
}
]);
doh.register("events", [
{
name: "dijit",
timeout: 5000,
runTest: function(){
var
d = new doh.Deferred(),
dijit_events = dijit.byId('dijit_events'),
calledOnClick = false,
nop = function(){ return false; };
function onChange(v){
dijit_events.set('onChange', nop);
d.callback(true);
}
dijit_events.set('onChange', onChange);
dijit_events._onClick({ preventDefault: nop });
return d;
}
},
{
name: "mobile",
timeout: 5000,
runTest: function(){
var
d = new doh.Deferred(),
mobile_events = dijit.byId('mobile_events'),
nop = function(){ return false; };
function onChange(){
mobile_events.set('onChange', nop);
d.callback(true);
}
mobile_events.set("onChange", onChange);
setTimeout(function(){ mobile_events.focusNode.click({ preventDefault: nop }); }, 0);
return d;
}
}
]);
doh.register("programmatic", [
{
name: "dijit",
timeout: 5000,
runTest: function(){
new dijit.form.RadioButton({name:"dijit_programmatic", id:"dijit_programmatic", checked:true, "aria-label":"dijit_programmatic"}).placeAt("dijit_programmatic_container", "first");
var dijit_programmatic = dijit.byId('dijit_programmatic');
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.t(dijit_programmatic.get('checked'), 'dijit widget checked');
doh.t(!!dijit_programmatic.focusNode.checked, 'dijit HTML element checked');
}
},
{
name: "mobile",
timeout: 5000,
runTest: function(){
new dojox.mobile.RadioButton({name:"mobile_programmatic", id:"mobile_programmatic", checked:true, "aria-label":"mobile_programmatic"}).placeAt("mobile_programmatic_container", "first");
var mobile_programmatic = dijit.byId('mobile_programmatic');
if(dojo.isIE < 8){ // older IE ignores setting checked after creation but before appending to the DOM
dojo.attr(mobile_programmatic.focusNode, "checked", mobile_programmatic.checked);
}
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.t(!!mobile_programmatic.focusNode.checked, 'mobile HTML element checked');
doh.t(mobile_programmatic.get('checked'), 'mobile widget checked');
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">_RadioButtonMixin (dijit and mobile) non-robot tests</h1>
<table id="table">
<tr>
<th class="layout"> </th>
<th class="layout" colspan=2>dijit</th>
<th class="layout" colspan=2>mobile</th>
</tr>
<tr>
<td class="layout">attributes</td>
<td class="layout"><input name="dijit_attributes" id="dijit_attributes" data-dojo-type="dijit/form/RadioButton" data-dojo-props='checked: true, "class":"mblRedButton", value:"something", name:"dijit_attributes", "aria-label":"dijit_attributes" '/></td>
<td class="layout"><input name="dijit_attributes" aria-label="dijit_attributes2" id="dijit_attributes2" type="radio" value="other" dojoType="dijit.form.RadioButton">
<td class="layout"><input name="mobile_attributes" aria-label="mobile_attributes" type="radio" value="something" class="mblRedButton" checked id="mobile_attributes" dojoType="dojox.mobile.RadioButton"/></td>
<td class="layout"><input name="mobile_attributes" aria-label="mobile_attributes2" id="mobile_attributes2" type="radio" value="other" dojoType="dojox.mobile.RadioButton">
</tr>
<tr>
<tr>
<td class="layout">Events</td>
<td class="layout"><input name="dijit_events" id="dijit_events" data-dojo-type="dijit/form/RadioButton" data-dojo-props='onClick:function(){ return true; }, name:"dijit_events", "aria-label":"dijit_events"' /></td>
<td class="layout"><input name="dijit_events" aria-label="dijit_events2" type="radio" value="other" dojoType="dijit.form.RadioButton">
<td class="layout"><input name="mobile_events" aria-label="mobile_events" type="radio" id="mobile_events" data-dojo-type="dojox.mobile.RadioButton" data-dojo-props='onClick:function(){ return true; }' /></td>
<td class="layout"><input name="mobile_events" aria-label="mobile_events2" type="radio" value="other" dojoType="dojox.mobile.RadioButton">
</tr>
<tr>
<td class="layout">Programmatic</td>
<td class="layout" id="dijit_programmatic_container"></td>
<td class="layout"><input name="dijit_programmatic" type="radio" aria-label="dijit_programmatic" value="other" dojoType="dijit.form.RadioButton">
<td class="layout" id="mobile_programmatic_container"></td>
<td class="layout"><input name="mobile_programmatic" type="radio" aria-label="mobile_programmatic" value="other" dojoType="dojox.mobile.RadioButton">
</tr>
</table>
</body>
</html>