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
178 lines (163 loc) • 6.28 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>_ToggleButtonMixin 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;
}
.mblRedButtonChecked {
border-style: inset;
}
</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.ToggleButton");
dojo.require("dojox.mobile.ToggleButton");
dojo.ready(function(){
doh.register("attributes", [
{
name: "dijit",
runTest: function(){
var dijit_attributes = dijit.byId('dijit_attributes');
doh.t(dijit_attributes.get('checked'), "dijit original get('checked')");
doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass+"Checked"), "dijit baseClass checked");
dijit_attributes.set('checked', false);
doh.f(dijit_attributes.get('checked'), "dijit get('checked')");
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");
}
},
{
name: "mobile",
runTest: function(){
var mobile_attributes = dijit.byId('mobile_attributes');
doh.t(mobile_attributes.get('checked'), "mobile original get('checked')");
doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass+"Checked"), "mobile baseClass checked");
mobile_attributes.set('checked', false);
doh.f(mobile_attributes.get('checked'), "mobile get('checked')");
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.register("events", [
{
name: "dijit",
timeout: 2000,
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,
stopPropagation: nop
});
return d;
}
},
{
name: "mobile",
timeout: 2000,
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,
stopPropagation: nop
});
}, 0);
return d;
}
}
]);
doh.register("programmatic", [
{
name: "dijit",
timeout: 2000,
runTest: function(){
new dijit.form.ToggleButton({id:"dijit_programmatic", type:"button", checked:true, label:"No srcNodeRef", "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');
}
},
{
name: "mobile",
timeout: 2000,
runTest: function(){
new dojox.mobile.ToggleButton({id:"mobile_programmatic", type:"button", checked:true, label:"No srcNodeRef", "aria-label":"mobile_programmatic"}).placeAt("mobile_programmatic_container", "first");
var mobile_programmatic = dijit.byId('mobile_programmatic');
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.get('checked'), 'mobile widget checked');
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">_ToggleButtonMixin (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" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='type:"button", checked: true, label:"original", "class":"mblRedButton"'/></td>
<td class="layout"><button type="button" class="mblRedButton" checked id="mobile_attributes" dojoType="dojox.mobile.ToggleButton" label="original"/></td>
</tr>
<tr>
<tr>
<td class="layout">Events</td>
<td class="layout"><button id="dijit_events" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='type:"button", onClick:function(){ return true; }'>innerHTML</button></td>
<td class="layout"><button type="button" id="mobile_events" data-dojo-type="dojox.mobile.ToggleButton" data-dojo-props='type:"button", onClick:function(){ return true; }'>innerHTML</button></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>
</table>
</body>
</html>