You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
14 KiB
256 lines
14 KiB
<!DOCTYPE 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>_ButtonMixin 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.Dialog"); |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dojox.mobile.Button"); |
|
|
|
dojo.ready(function(){ |
|
|
|
doh.register("attributes", [ |
|
{ |
|
name: "dijit", |
|
runTest: function(){ |
|
var dijit_attributes = dijit.byId('dijit_attributes'); |
|
doh.is("original", dijit_attributes.get('label'), "dijit original get('label')"); |
|
dijit_attributes.set('label', "label"); |
|
doh.is("label", dijit_attributes.get('label'), "dijit get('label')"); |
|
doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass), "dijit baseClass"); |
|
doh.t(dojo.hasClass(dijit_attributes.domNode, "mblRedButton"), "dijit original class"); |
|
dijit_attributes.set('class', "mblBlueButton"); |
|
doh.t(dojo.hasClass(dijit_attributes.domNode, "mblBlueButton"), "dijit new class"); |
|
} |
|
}, |
|
{ |
|
name: "mobile", |
|
runTest: function(){ |
|
var mobile_attributes = dijit.byId('mobile_attributes'); |
|
doh.is("original", mobile_attributes.get('label'), "mobile original get('label')"); |
|
mobile_attributes.set('label', "label"); |
|
doh.is("label", mobile_attributes.get('label'), "mobile get('label')"); |
|
doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass), "mobile baseClass"); |
|
doh.t(dojo.hasClass(mobile_attributes.domNode, "mblRedButton"), "mobile original class"); |
|
mobile_attributes.set('class', "mblBlueButton"); |
|
doh.t(dojo.hasClass(mobile_attributes.domNode, "mblBlueButton"), "mobile new class"); |
|
} |
|
} |
|
]); |
|
|
|
doh.register("programmatic", [ |
|
{ |
|
name: "dijit", |
|
timeout: 2000, |
|
runTest: function(){ |
|
new dijit.form.Button({id:"dijit_programmatic", type:"button", label:"No srcNodeRef"}).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.is("No srcNodeRef", dijit_programmatic.get('label'), 'dijit widget label'); |
|
} |
|
}, |
|
{ |
|
name: "mobile", |
|
timeout: 2000, |
|
runTest: function(){ |
|
new dojox.mobile.Button({id:"mobile_programmatic", type:"button", label:"No srcNodeRef"}).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.is("No srcNodeRef", mobile_programmatic.get('label'), 'mobile widget label'); |
|
} |
|
} |
|
]); |
|
|
|
var runTests = function(t,i){ |
|
var d = new doh.Deferred(), |
|
form = document.getElementById('myform'), |
|
clicks = document.getElementById('clicks'), |
|
submits = document.getElementById('submits'), |
|
bubbles = document.getElementById('bubbles'); |
|
form.reset(); |
|
document.getElementById('native'+i).click(); |
|
setTimeout(function(){ |
|
var nativeClicks = clicks.value; |
|
var nativeSubmits = submits.value; |
|
var nativeBubbles = bubbles.value; |
|
form.reset(); |
|
document.getElementById('widget'+i).click(); |
|
setTimeout(function(){ |
|
var widgetClicks = clicks.value; |
|
var widgetSubmits = submits.value; |
|
var widgetBubbles = bubbles.value; |
|
form.reset(); |
|
document.getElementById('mobile'+i).click(); |
|
setTimeout(function(){ |
|
var mobileClicks = clicks.value; |
|
var mobileSubmits = submits.value; |
|
var mobileBubbles = bubbles.value; |
|
form.reset(); |
|
document.getElementById('dialogButton'+i).click(); |
|
setTimeout(d.getTestCallback(function(){ |
|
var dialogClicks = clicks.value; |
|
var dialogSubmits = submits.value; |
|
var dialogBubbles = bubbles.value; |
|
t.is(nativeClicks, widgetClicks, "widget clicks"); |
|
t.is(nativeSubmits, widgetSubmits, "widget submits"); |
|
t.is(nativeBubbles, widgetBubbles, "widget bubbles"); |
|
t.isNot("000", widgetClicks+""+widgetSubmits+""+widgetBubbles, "not all 0"); |
|
t.is(nativeClicks, mobileClicks, "mobile clicks"); |
|
t.is(nativeSubmits, mobileSubmits, "mobile submits"); |
|
t.is(nativeBubbles, mobileBubbles, "mobile bubbles"); |
|
t.is(nativeClicks, dialogClicks, "dialog clicks"); |
|
t.is(nativeSubmits, dialogSubmits, "dialog submits"); |
|
t.is(nativeBubbles, dialogBubbles, "dialog bubbles"); |
|
}), 0); |
|
}, 0); |
|
}, 0); |
|
}, 0); |
|
return d; |
|
}; |
|
|
|
doh.register("click behavior", [ |
|
{ |
|
name: "return true", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,1); |
|
} |
|
}, |
|
{ |
|
name: "return false", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,2); |
|
} |
|
}, |
|
{ |
|
name: "stopProgation + return true", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,3); |
|
} |
|
}, |
|
{ |
|
name: "stopProgation + return false", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,4); |
|
} |
|
}, |
|
{ |
|
name: "preventDefault + return true", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,5); |
|
} |
|
}, |
|
{ |
|
name: "preventDefault + return false", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
runTests(t,6); |
|
} |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
<h1 class="testTitle">_ButtonMixin (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/Button" data-dojo-props='type:"button", label:"original", "class":"mblRedButton"'/></td> |
|
<td class="layout"><button type="button" class="mblRedButton" id="mobile_attributes" dojoType="dojox.mobile.Button" label="original"/></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> |
|
<form id="myform" method="get" onsubmit="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;" style="border:1px solid black;margin:10px 0;"> |
|
<legend>Compare native and widget click event behavior:</legend> |
|
<label for="submits">Submits</label><input id="submits" size="4" disabled value="0"> |
|
<label for="bubbles">Bubbles</label><input id="bubbles" size="4" disabled value="0"> |
|
<label for="clicks">Clicks</label><input id="clicks" size="4" disabled value="0"> |
|
<input type="reset" id="formContainerReset"> |
|
<br> |
|
<button id="native1" type="submit" onclick="document.getElementById('clicks').value++;return true;">native return true</button> |
|
<button id="widget1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button">widget return true</button> |
|
<button id="mobile1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dojox/mobile/Button">mobile return true</button> |
|
<button id="dialog1" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton1').click();return false;" data-dojo-type="dijit/form/Button">dialog return true</button> |
|
<br> |
|
<button id="native2" type="submit" onclick="document.getElementById('clicks').value++;return false;">native return false</button> |
|
<button id="widget2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button">widget return false</button> |
|
<button id="mobile2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dojox/mobile/Button">mobile return false</button> |
|
<button id="dialog2" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton2').click();return false;" data-dojo-type="dijit/form/Button">dialog return false</button> |
|
<br> |
|
<button id="native3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;">native stopPropagation + return true</button> |
|
<button id="widget3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button">widget stopPropagation + return true</button> |
|
<button id="mobile3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return true</button> |
|
<button id="dialog3" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton3').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return true</button> |
|
<br> |
|
<button id="native4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;">native stopPropagation + return false</button> |
|
<button id="widget4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button">widget stopPropagation + return false</button> |
|
<button id="mobile4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return false</button> |
|
<button id="dialog4" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton4').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return false</button> |
|
<br> |
|
<button id="native5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;">native preventDefault + return true</button> |
|
<button id="widget5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button">widget preventDefault + return true</button> |
|
<button id="mobile5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return true</button> |
|
<button id="dialog5" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton5').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return true</button> |
|
<br> |
|
<button id="native6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;">native preventDefault + return false</button> |
|
<button id="widget6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button">widget preventDefault + return false</button> |
|
<button id="mobile6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return false</button> |
|
<button id="dialog6" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton6').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return false</button> |
|
</form> |
|
<div data-dojo-type="dijit/Dialog" onExecute="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;"> |
|
<button id="dialogButton1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button"></button> |
|
<button id="dialogButton2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button"></button> |
|
<button id="dialogButton3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button"></button> |
|
<button id="dialogButton4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button"></button> |
|
<button id="dialogButton5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button"></button> |
|
<button id="dialogButton6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button"></button> |
|
</div> |
|
</body> |
|
</html>
|
|
|