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.
267 lines
7.5 KiB
267 lines
7.5 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|