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.
104 lines
2.8 KiB
104 lines
2.8 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>dijit/place with margin on body unit test</title> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<style type="text/css"> |
|
html { |
|
overflow: hidden; /* ie6 needs this */ |
|
} |
|
body { |
|
height: 100%; |
|
padding: 0; |
|
border: 0; |
|
|
|
/* testing for margin on <body>, see #16148 */ |
|
position: relative; |
|
top: 0; |
|
margin-top: 40px; |
|
margin-left: 10px; |
|
margin-right: 20px; |
|
} |
|
|
|
.aroundNode { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
background: yellow; |
|
} |
|
|
|
#popup { |
|
position: absolute; |
|
width: 75px; |
|
background: blue; |
|
color: white; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojo/dom", "dojo/dom-geometry", "dojo/window", |
|
"dijit/place", "dojo/domReady!" |
|
], function(doh, dom, domGeometry, winUtils, place){ |
|
|
|
// The around nodes |
|
var aroundTop = dom.byId("aroundTop"), |
|
aroundLeft = dom.byId("aroundLeft"), |
|
aroundRight = dom.byId("aroundRight"); |
|
|
|
// The popup (aka dropdown) |
|
var popup = dom.byId("popup"); |
|
|
|
doh.register("around with body margin", [ |
|
function aroundT(t){ |
|
// Dropdown from "aroundTop" node. |
|
var ret = place.around(popup, aroundTop, [ |
|
"below" // aroundTop's bottom-left corner with the popup's top-left corner |
|
], true); |
|
|
|
doh.is("20px", popup.style.top, "underneath around node"); |
|
}, |
|
function aroundL(t){ |
|
// middle left popup from "aroundLeft" node |
|
var ret = place.around(popup, aroundLeft, [ |
|
"after-centered" // aroundLeft's middle-right with the popup's middle-left |
|
], true); |
|
|
|
var popupPos = domGeometry.position(popup); |
|
var aroundPos = domGeometry.position(aroundLeft); |
|
doh.is(Math.round(aroundPos.x + aroundPos.w), Math.round(popupPos.x), "after around node"); |
|
}, |
|
function aroundR(t){ |
|
// This will put the drop-down to the left of the "aroundRight" node |
|
var ret = place.around(popup, aroundRight, ["before-centered"], true); |
|
|
|
var popupPos = domGeometry.position(popup); |
|
var aroundPos = domGeometry.position(aroundRight); |
|
doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x), |
|
"right aligned with around node"); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body style="position: relative; top: 0; margin-top: 40px;"> |
|
<h1>Dijit Place With Margin On BODY Unit Test</h1> |
|
<div id="aroundTop" class="aroundNode" style="top: 0px; left: 50%">T</div> |
|
<div id="aroundLeft" class="aroundNode" style="bottom: 30%; left: 0px;">L</div> |
|
<div id="aroundRight" class="aroundNode" style="bottom: 30%; right: 0px;">R</div> |
|
|
|
<div id="popup"> |
|
I'm a drop down, wider and taller than the around nodes I'm placed next to. |
|
</div> |
|
<div style="height: 200px"> |
|
<!-- spacer --> |
|
</div> |
|
</body> |
|
</html>
|
|
|