274 lines
13 KiB
HTML
274 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Dijit.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"
|
|
djConfig="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-left corner with the popup's top-left 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(dojo.position(aroundTop).x+"px", popup.style.left, "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-left corner with the popup's top-left 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(dojo.position(aroundTop).x+dojo.position(aroundTop).w,
|
|
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-left corner with the popup's top-left corner (fails)
|
|
});
|
|
|
|
doh.is("TL", ret.aroundCorner, "around corner");
|
|
doh.is("BL", ret.corner, "popup's corner");
|
|
doh.is(dojo.position(aroundBottom).y, 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(aroundPos.y, 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(aroundPos.y + aroundPos.h, 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(popupPos.x + popupPos.w, 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)
|
|
"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(aroundPos.y + aroundPos.h, 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(popupPos.x + popupPos.w, aroundPos.x + aroundPos.w + 1/*right:1px*/, "right aligned with around node");
|
|
doh.is(popupPos.y + popupPos.h, 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(aroundPos.x, 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(aroundPos.x + aroundPos.w, popupPos.x, "after around node");
|
|
doh.is(aroundPos.y + aroundPos.h + 5/*bottom:5px*/, popupPos.y + popupPos.h, "bottom aligned with around node");
|
|
}
|
|
]
|
|
);
|
|
doh.run();
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Dijit Place Unit Test</h1>
|
|
<div id="aroundTop" class="aroundNode" style="top: 0; left: 200px;">T</div>
|
|
<div id="aroundLeft" class="aroundNode" style="top: 350px; 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>
|