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.
207 lines
7.7 KiB
207 lines
7.7 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Dojo Form Widget Vertical Alignment Test</title> |
|
|
|
<style type="text/css"> |
|
@import "../../themes/claro/document.css"; |
|
@import "../css/dijitTests.css"; |
|
BUTTON, SELECT, INPUT { |
|
vertical-align: middle; |
|
} |
|
</style> |
|
|
|
<!-- required: the default dijit theme: --> |
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
|
|
<!-- only needed for alternate theme testing: --> |
|
<script type="text/javascript" src="../_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("doh.runner"); |
|
dojo.require("dijit.dijit"); // optimize: load dijit layer |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dijit.form.DropDownButton"); |
|
dojo.require("dijit.form.ComboButton"); |
|
dojo.require("dijit.Menu"); |
|
dojo.require("dijit.MenuItem"); |
|
dojo.require("dijit.form.Select"); |
|
dojo.require("dijit.form.ComboBox"); |
|
dojo.require("dijit.form.TextBox"); |
|
dojo.require("dijit.form.NumberTextBox"); |
|
dojo.require("dojo.parser"); |
|
|
|
dojo.ready(function(){ |
|
|
|
function test_all(pre){ |
|
function compare2native(className){ |
|
var |
|
widget = dijit.byId(pre + "_" + className), |
|
pos = dojo.position(widget.domNode), |
|
mid = pos.y + (pos.h >> 1); |
|
|
|
doh.t(Math.abs(mid - native_mid) <= 1, "native y:h = " + native_pos.y + ":" + native_pos.h + ", " + className + " y:h = " + pos.y + ":" + pos.h); |
|
} |
|
var |
|
nativeNode = dojo.byId(pre+"_native"), |
|
native_pos = dojo.position(nativeNode), |
|
native_mid = native_pos.y + (native_pos.h >> 1); |
|
|
|
compare2native("Button"); |
|
compare2native("DropDown"); |
|
compare2native("ComboButton"); |
|
compare2native("Select"); |
|
compare2native("ComboBox"); |
|
compare2native("TextBox"); |
|
compare2native("NumberTextBox"); |
|
} |
|
|
|
doh.register("check alignment", [ |
|
{ |
|
name: "p", |
|
runTest: function(){ |
|
test_all("p"); |
|
} |
|
}, |
|
{ |
|
name: "div", |
|
runTest: function(){ |
|
test_all("div"); |
|
} |
|
}, |
|
{ |
|
name: "font", |
|
runTest: function(){ |
|
test_all("font"); |
|
} |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
<h1 class="testTitle">Dojo Form Widget Vertical Alignment Test</h1> |
|
|
|
<p>In a P</p> |
|
<p class="box" style='white-space:nowrap;'> |
|
<button id="p_native">native</button> |
|
<button id="p_Button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", iconClass:"plusIcon", value:"Button"'> |
|
Button |
|
</button> |
|
<button id="p_DropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='type:"button", value:"DropDown", label:"DropDown"'> |
|
<span data-dojo-type="dijit/Menu" data-dojo-props='style:"display:none;"'> |
|
<span data-dojo-type="dijit/MenuItem">DropDown MenuItem</span> |
|
</span> |
|
</button> |
|
<button id="p_ComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"options", iconClass:"plusIcon", title:"title"'> |
|
<span>Create</span> |
|
<span data-dojo-type="dijit/Menu"> |
|
<span data-dojo-type="dijit/MenuItem">One</span> |
|
<span data-dojo-type="dijit/MenuItem">Two</span> |
|
</span> |
|
</button> |
|
<label for="p_Select">Select</label> |
|
<select id="p_Select" data-dojo-type="dijit/form/Select"> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="p_ComboBox">ComboBox</label> |
|
<select id="p_ComboBox" data-dojo-type="dijit/form/ComboBox" data-dojo-props='style:{width:"5em"}'> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="p_TextBox">TextBox</label> |
|
<input id="p_TextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"Text", style:{width:"5em"}'/> |
|
<label for="p_NumberTextBox">NumberTextBox</label> |
|
<input id="p_NumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='value:23, style:{width:"3em"}'/> |
|
</p> |
|
|
|
<p>In a DIV</p> |
|
<div style='white-space:nowrap;'> |
|
<button id="div_native">native</button> |
|
<button id="div_Button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", iconClass:"plusIcon", value:"Create"'> |
|
Button |
|
</button> |
|
<button id="div_DropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='type:"button", value:"DropDown", label:"DropDown"'> |
|
<span data-dojo-type="dijit/Menu"> |
|
<span data-dojo-type="dijit/MenuItem">DropDown MenuItem</span> |
|
</span> |
|
</button> |
|
<button id="div_ComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"options", iconClass:"plusIcon", title:"title"'> |
|
<span>Create</span> |
|
<span data-dojo-type="dijit/Menu"> |
|
<span data-dojo-type="dijit/MenuItem">One</span> |
|
<span data-dojo-type="dijit/MenuItem">Two</span> |
|
</span> |
|
</button> |
|
<label for="div_Select">Select</label> |
|
<select id="div_Select" data-dojo-type="dijit/form/Select"> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="div_ComboBox">ComboBox</label> |
|
<select id="div_ComboBox" data-dojo-type="dijit/form/ComboBox" data-dojo-props='style:{width:"5em"}'> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="div_TextBox">TextBox</label> |
|
<input id="div_TextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"Text", style:{width:"5em"}'/> |
|
<label for="div_NumberTextBox">NumberTextBox</label> |
|
<input id="div_NumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='value:23, style:{width:"3em"}'/> |
|
</div> |
|
|
|
<p>font-size 200%</p> |
|
<div style="font-size: 200%;white-space:nowrap;"> |
|
<button id="font_native">native</button> |
|
<button id="font_Button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", iconClass:"plusIcon", value:"Button"'> |
|
Button |
|
</button> |
|
<button id="font_DropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='type:"button", value:"DropDown", label:"DropDown"'> |
|
<span data-dojo-type="dijit/Menu"> |
|
<span data-dojo-type="dijit/MenuItem">DropDown MenuItem</span> |
|
</span> |
|
</button> |
|
<button id="font_ComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"options", iconClass:"plusIcon", title:"title"'> |
|
<span>Create</span> |
|
<span data-dojo-type="dijit/Menu"> |
|
<span data-dojo-type="dijit/MenuItem">One</span> |
|
<span data-dojo-type="dijit/MenuItem">Two</span> |
|
</span> |
|
</button> |
|
<label for="font_Select">Select</label> |
|
<select id="font_Select" data-dojo-type="dijit/form/Select"> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="font_ComboBox">ComboBox</label> |
|
<select id="font_ComboBox" data-dojo-type="dijit/form/ComboBox" data-dojo-props='style:{width:"5em"}'> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="font_TextBox">TextBox</label> |
|
<input id="font_TextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"Text", style:{width:"5em"}'/> |
|
<label for="font_NumberTextBox">NumberTextBox</label> |
|
<input id="font_NumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='value:23, style:{width:"3em"}'/> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|