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
268 lines (218 loc) • 7.69 kB
HTML
<html>
<head>
<title>dijit/place on clipped nodes unit test</title>
<script src="boilerplate.js"></script>
<style type="text/css">
html, body, div {
border: none;
margin: 0px;
padding: 0px;
}
.around {
/* the around-node (ex: a ComboBox or TextBox) */
color: white;
background: blue;
}
.clip {
/* ancestor of an around-node that clips the around-node */
display: inline-block;
#display: inline;
overflow: hidden;
background: gray;
padding: 10px 0px;
margin: 0px 100px;
width: 100px;
}
#popup {
position: absolute;
width: 25px;
background: red;
color: white;
}
</style>
<script type="text/javascript">
require([
"doh/runner",
"dojo/dom", "dojo/dom-geometry", "dojo/window",
"dijit/place", "dojo/parser", "dojo/domReady!"
], function(doh, dom, domGeometry, winUtils, place, parser){
parser.parse();
// The around nodes
var aroundOne = dom.byId("around1"),
aroundTwo = dom.byId("around2"),
aroundThree = dom.byId("around3"),
abs1 = dom.byId("absAround1"),
abs2 = dom.byId("absAround2"),
abs3 = dom.byId("absAround3");
// The popup (aka dropdown)
var popup = dom.byId("popup"),
pp,
ret;
doh.register("aroundOne", [
function plain(t){
ret = place.around(popup, aroundOne, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(100, pp.x + pp.w, "popup hugs left side of clipping div");
ret = place.around(popup, aroundOne, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(200, pp.x, "popup hugs right side of clipping div");
},
function aroundOneScrolled(t){
// Programatically scroll to the right
dom.byId("clip1").scrollLeft = 50;
// Same tests as before
ret = place.around(popup, aroundOne, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(100, pp.x + pp.w, "popup hugs left side of clipping div");
ret = place.around(popup, aroundOne, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(200, pp.x, "popup hugs right side of clipping div");
},
function aroundOneScrollbar(t){
// Show scroll bar
dom.byId("clip1").style.overflow = "scroll";
// Same tests as before
ret = place.around(popup, aroundOne, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(100, pp.x + pp.w, "popup hugs left side of clipping div");
ret = place.around(popup, aroundOne, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(200, pp.x, "popup hugs right side of clipping div");
}
]);
doh.register("aroundTwo", [
function plain(t){
ret = place.around(popup, aroundTwo, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(100, pp.x + pp.w, "popup hugs left side of outer clipping div");
ret = place.around(popup, aroundTwo, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(200, pp.x, "popup hugs right side of outer clipping div");
}
]);
doh.register("aroundThree", [
function plain(t){
ret = place.around(popup, aroundThree, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(150, pp.x + pp.w, "popup hugs left side of inner clipping div");
ret = place.around(popup, aroundThree, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(250, pp.x, "popup hugs right side of inner clipping div");
}
]);
doh.register("absolutely positioned nodes", [
function aroundNodeAbsolute(t){
ret = place.around(popup, abs1, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(50, pp.x + pp.w, "popup hugs left side of absolutely positioned around node");
ret = place.around(popup, abs1, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(350, pp.x, "popup hugs right side of absolutely positioned around node");
},
function aroundNodeParentAbsolute(t){
ret = place.around(popup, abs2, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(60, pp.x + pp.w, "popup hugs left side of absolutely positioned around node wrapper");
ret = place.around(popup, abs2, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(120, pp.x, "popup hugs right side of absolutely positioned around node wrapper");
},
function absoluteInRelative(t){
ret = place.around(popup, abs3, [
"before-centered"
], true);
pp = domGeometry.position(popup);
doh.is(110, pp.x + pp.w, "popup hugs left side of position:absolute parent");
ret = place.around(popup, abs3, [
"after-centered"
], true);
pp = domGeometry.position(popup);
doh.is(170, pp.x, "popup hugs right side of position:relative grandparent (which clips parent)");
}
]);
doh.run();
});
</script>
</head>
<body class="claro" dir="ltr">
<h1>Dijit Place Clipping Unit Test</h1>
<!-- the popup "widget" -->
<div id="popup">
p
</div>
<!-- around node one is clipped by surrounding div. -->
<div id="clip1" class="clip">
<div id="around1" class="around" style="width: 500px; height: 50px;">123456789abcdef</div>
</div>
<!-- around node one is clipped by clip2b, and even more by clip2a -->
<br/>
<div id="clip2a" class="clip">
<div id="clip2b" style="width: 200px; margin: 0px; background: white" class="clip">
<div id="noclip2">
<div id="around2" class="around" style="width: 500px; height: 50px;">123456789abcdef</div>
</div>
</div>
</div>
<!-- around node one is clipped by clip3b, but not by clip2a since that is bigger -->
<br/>
<div id="clip3a" style="width: 200px; background: yellow; padding: 10px 50px;" class="clip">
<div id="clip3b" style="margin: 0px" class="clip">
<div id="noclip3">
<div id="around3" class="around" style="width: 500px; height: 50px;">123456789abcdef</div>
</div>
</div>
</div>
<!-- position absolute around node is not affected by a parent with width set
(unless parent has position:relative or position:absolute) -->
<br/>
<div id="clip4" class="clip">
<div id="absAround1" class="around" style="width: 300px; height: 50px; position: absolute; left: 50px; top:500px;">absolute</div>
</div>
<!-- here the around node absAround2 is position:static, but it's parent clip5b is position:absolute,
so the grandparent clip5a is irrelevant -->
<br/>
<div id="clip5a" style="width: 50px; background: yellow; padding: 10px 50px;" class="clip">
<div id="clip5b" style="position: absolute; left: 60px; top: 600px; width: 60px; background: navy; margin: 0px;" class="clip">
<div id="absAround2" class="around" style="width: 500px; height: 50px;">parent absolute</div>
</div>
</div>
<!-- here the around node absAround3 is position:static, it's parent clip6b is position:absolute,
but the grandparent clip6a is position:relative, so it can clip -->
<br/>
<div id="clip6a" style="width: 70px; height: 70px; background: #adff2f; padding: 0px; position: relative;" class="clip">
<div id="clip6b" style="position: absolute; left: 10px; top: 0px; width: 150px; background: navy; margin: 0px;" class="clip">
<div id="absAround3" class="around" style="width: 500px; height: 50px;">grandparent relative</div>
</div>
</div>
</body>
</html>