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
284 lines (256 loc) • 13.2 kB
HTML
<!--
Test case for dijit/_base/place.
Remove in 2.0 in favor of dijit/tests/place.html
-->
<html>
<head>
<title>dijit/_base/place unit test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
html {
overflow: hidden; /* ie6 needs this */
}
body {
height: 100%;
padding: 0;
margin: 0;
border: 0;
}
.aroundNode {
position: absolute;
width: 20px;
height: 20px;
background: yellow;
}
#popup {
position: absolute;
width: 75px;
background: blue;
color: white;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: false"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dojo.window");
dojo.require("dijit.dijit");
dojo.ready(function(){
// The around nodes
var aroundTop = dojo.byId("aroundTop"),
aroundBottom = dojo.byId("aroundBottom"),
aroundLeft = dojo.byId("aroundLeft"),
aroundRight = dojo.byId("aroundRight");
// The popup (aka dropdown)
var popup = dojo.byId("popup");
doh.register("dijit/_base/place",
[
function placeOnScreenTL(t){
// Place popup at (10,7)... dijit.placeOnScreen() should choose the top-left corner, because
// any of the other corner would make the popup go partially off the screen
var ret = dijit.placeOnScreen(popup, {x: 10, y:7}, ["TR", "BR", "BL", "TL"]);
doh.is("TL", ret.corner, "top left corner chosen");
doh.is("10px", popup.style.left, "x coord");
doh.is("7px", popup.style.top, "y coord");
doh.is(75, ret.w, "it's 75px wide");
},
function placeOnScreenTR(t){
// Place popup at top right... dijit.placeOnScreen() should choose the top-right corner, because
// any of the other corner would make the popup go partially off the screen
var viewport = dojo.window.getBox(),
ret = dijit.placeOnScreen(popup, {x: viewport.w-10, y:7}, ["TL", "BR", "TR", "BL"]),
popupCoords = dojo.position(popup);
doh.is("TR", ret.corner, "top left corner chosen");
doh.is(viewport.w-10, popupCoords.x + popupCoords.w, "x coord");
doh.is("7px", popup.style.top, "y coord");
doh.is(75, ret.w, "it's 75px wide");
},
function placeOnScreenAroundNodeT(t){
// Dropdown from "aroundTop" node. Should pick the second choice, since the first
// goes offscreen.
var ret = dijit.placeOnScreenAroundNode(popup, aroundTop, {
"TL": "BL", // aroundTop's top-left corner with the popup's bottom-left corner (fails)
"BL": "TL", // aroundTop's bottom-left corner with the popup's top-left corner (works)
"BR": "TR" // aroundTop's bottom-right corner with the popup's top-right corner (works)
});
doh.is("BL", ret.aroundCorner, "around corner");
doh.is("TL", ret.corner, "popup's corner");
doh.is("20px", popup.style.top, "underneath around node");
doh.is(Math.round(dojo.position(aroundTop).x), Math.round(popup.style.left.replace("px", "")),
"left sides aligned");
},
function placeOnScreenAroundNodeTooltip(t){
// Same as above test except that shape of drop down changes depending on where it's positioned.
// Simulates tooltip placement (tooltip shape changes b/c of the arrow).
// Should pick the third choice this time
function layoutNode(node, aroundCorner, nodeCorner){
node.style.width = (nodeCorner == "TL" ? "5000px" : "75px");
}
var ret = dijit.placeOnScreenAroundNode(popup, aroundTop, {
"TL": "BL", // aroundTop's top-left corner with the popup's bottom-left corner (fails)
"BL": "TL", // aroundTop's bottom-left corner with the popup's top-left corner (works)
"BR": "TR" // aroundTop's bottom-right corner with the popup's top-right corner (works)
}, layoutNode);
doh.is("BR", ret.aroundCorner, "around corner");
doh.is("TR", ret.corner, "popup's corner");
doh.is("20px", popup.style.top, "underneath around node");
doh.is(Math.round(dojo.position(aroundTop).x + dojo.position(aroundTop).w),
Math.round(dojo.position(popup).x + dojo.position(popup).w),
"right sides aligned");
},
function placeOnScreenAroundNodeB(t){
// Dropdown from "aroundBottom" node. Should go above aroundNode so that
// popup doesn't go offscreen
var ret = dijit.placeOnScreenAroundNode(popup, aroundBottom, {
"BL": "TL", // aroundBottom's bottom-left corner with the popup's top-left corner (fails)
"TL": "BL", // aroundBottom's top-left corner with the popup's bottom-left corner (works)
"BR": "TR" // aroundBottom's bottom-right corner with the popup's top-right corner (fails)
});
doh.is("TL", ret.aroundCorner, "around corner");
doh.is("BL", ret.corner, "popup's corner");
doh.is(Math.round(dojo.position(aroundBottom).y),
Math.round(dojo.position(popup).y + dojo.position(popup).h), "above around node");
},
function placeOnScreenAroundNodeBM(t){
// bottom middle popup from "aroundBottom" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundBottom, {
"TR": "TL", // aroundBottom's top-right corner with the popup's top-left corner (fails)
"TM": "BM", // aroundBottom's top-middle with the popup's bottom-middle (works)
"BM": "TM", // aroundBottom's bottom-middle with the popup's top-middle (fails)
"TL": "TR" // aroundBottom's top-left corner with the popup's top-right corner (fails)
});
doh.is("TM", ret.aroundCorner, "around middle");
doh.is("BM", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundBottom);
doh.is(Math.round(aroundPos.y), Math.round(popupPos.y + popupPos.h), "above around node");
doh.t(aroundPos.x > popupPos.x, "starts before around node");
doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
},
function placeOnScreenAroundNodeTM(t){
// top middle popup from "aroundTop" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundTop, {
"BL": "BR", // aroundTop's bottom-left corner with the popup's bottom-right corner (fails)
"TM": "BM", // aroundTop's top-middle with the popup's bottom-middle (fails)
"BM": "TM", // aroundTop's bottom-middle with the popup's top-middle (works)
"BR": "BL" // aroundTop's bottom-right corner with the popup's bottom-left corner (fails)
});
doh.is("BM", ret.aroundCorner, "around middle");
doh.is("TM", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundTop);
doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
doh.t(aroundPos.x > popupPos.x, "starts before around node");
doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
},
function placeOnScreenAroundNodeML(t){
// middle left popup from "aroundLeft" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundLeft, {
"BR": "TR", // aroundLeft's bottom-right corner with the popup's top-right corner (fails)
"MR": "ML", // aroundLeft's middle-right with the popup's middle-left (works)
"ML": "MR", // aroundLeft's middle-left with the popup's middle-right (fails)
"TR": "BR" // aroundLeft's top-right corner with the popup's bottom-right corner (fails)
});
doh.is("MR", ret.aroundCorner, "around middle");
doh.is("ML", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundLeft);
doh.is(aroundPos.x + aroundPos.w, popupPos.x, "after around node");
doh.t(aroundPos.y > popupPos.y, "starts before around node");
doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
},
function placeOnScreenAroundNodeMR(t){
// middle left popup from "aroundRight" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundRight, {
"BL": "TL", // aroundRight's bottom-left corner with the popup's top-left corner (fails)
"MR": "ML", // aroundRight's middle-right with the popup's middle-left (fails)
"ML": "MR", // aroundRight's middle-left with the popup's middle-right (works)
"TL": "BL" // aroundRight's top-left corner with the popup's bottom-left corner (fails)
});
doh.is("ML", ret.aroundCorner, "around middle");
doh.is("MR", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundRight);
doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x), "before around node");
doh.t(aroundPos.y > popupPos.y, "starts before around node");
doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
},
function placeOnScreenAroundNodeMLB(t){
// bottom middle popup from "aroundLeft" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundLeft, {
"BR": "TR", // aroundLeft's bottom-right corner with the popup's top-right corner (fails)
"BM": "TM", // aroundLeft's bottom-middle with the popup's top-middle (works, sort of)
"TR": "BR" // aroundLeft's top-right corner with the popup's bottom-right corner (fails)
});
doh.is("BM", ret.aroundCorner, "around middle");
doh.is("TM", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundLeft);
doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
doh.is(aroundPos.x, popupPos.x, "left aligned with around node");
},
function placeOnScreenAroundNodeMRT(t){
// top middle popup from "aroundRight" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundRight, {
"BL": "TL", // aroundRight's bottom-left corner with the popup's top-left corner (fails)
"TM": "BM", // aroundRight's top-middle with the popup's bottom-middle (works)
"TL": "BL" // aroundRight's top-left corner with the popup's bottom-left corner (fails)
});
doh.is("TM", ret.aroundCorner, "around middle");
doh.is("BM", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundRight);
doh.is(Math.round(popupPos.x + popupPos.w),
Math.round(aroundPos.x + aroundPos.w + 1/*right:1px*/), "right aligned with around node");
doh.is(Math.round(popupPos.y + popupPos.h), Math.round(aroundPos.y), "above around node");
},
function placeOnScreenAroundNodeTML(t){
// middle left popup from "aroundTop" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundTop, {
"BL": "BR", // aroundTop's bottom-left corner with the popup's bottom-right corner (fails)
"ML": "MR", // aroundTop's middle-left with the popup's middle-right (works)
"BR": "BL" // aroundTop's bottom-right corner with the popup's bottom-left corner (fails)
});
doh.is("ML", ret.aroundCorner, "around middle");
doh.is("MR", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundTop);
doh.is(Math.round(aroundPos.x), Math.round(popupPos.x + popupPos.w), "before around node");
doh.is(aroundPos.y, popupPos.y, "top aligned with around node");
},
function placeOnScreenAroundNodeBMR(t){
// middle right popup from "aroundBottom" node
var ret = dijit.placeOnScreenAroundNode(popup, aroundBottom, {
"TL": "TR", // aroundBottom's top-left corner with the popup's top-right corner (fails)
"MR": "ML", // aroundBottom's middle-right with the popup's middle-left (works)
"TR": "TL" // aroundBottom's top-right corner with the popup's top-left corner (fails)
});
doh.is("MR", ret.aroundCorner, "around middle");
doh.is("ML", ret.corner, "popup's middle");
var popupPos = dojo.position(popup);
var aroundPos = dojo.position(aroundBottom);
doh.is(Math.round(aroundPos.x + aroundPos.w), Math.round(popupPos.x), "after around node");
doh.is(Math.round(aroundPos.y + aroundPos.h + 5/*bottom:5px*/),
Math.round(popupPos.y + popupPos.h), "bottom aligned with around node");
}
]
);
doh.run();
});
</script>
</head>
<body>
<h1>Dijit/_base/place Unit Test</h1>
<div id="aroundTop" class="aroundNode" style="top: 0; left: 50%;">T</div>
<div id="aroundLeft" class="aroundNode" style="bottom: 30%; left: 0;">L</div>
<div id="aroundRight" class="aroundNode" style="bottom: 30%; right: 1px;">R</div>
<div id="aroundBottom" class="aroundNode" style="bottom: 5px; left: 50%;">B</div>
<div id="popup">
I'm a drop down, wider and taller than the around nodes I'm placed next to.
</div>
</body>
</html>