Skip to content

Instantly share code, notes, and snippets.

@jbalsas
Created January 27, 2014 15:30
Show Gist options
  • Save jbalsas/8650558 to your computer and use it in GitHub Desktop.
Save jbalsas/8650558 to your computer and use it in GitHub Desktop.
YUI.add('dom-move-xy-test', function(Y) {
Y.DOM._testXY = function() {
var Assert = Y.Assert,
ArrayAssert = Y.ArrayAssert,
tests = {name: 'Y.DOM.xy'},
sel = '.node',
nodes = Y.Selector.query(sel);
function testXY(expected, actual) {
var x = actual[0],
pass = false;
// Expected is in pixels from offsetTop/Left, actual may be subpixels.
// Browsers don't agree on which way to round, so its
// considered a match if rounding up or down yields a match.
if ((Math.floor(actual[0]) === expected[0] || Math.ceil(actual[0]) === expected[0]) &&
(Math.floor(actual[1]) === expected[1] || Math.ceil(actual[1]) === expected[1])) {
pass = true;
}
return pass;
}
Y.each(nodes, function(n) {
var xy = [100, 20],
actual,
id = n.id;
Y.DOM.setXY(n, xy, true);
actual = Y.DOM.getXY(n);
tests['should move ' + id + ' to page coords'] = function() {
Assert.isTrue(testXY(xy, actual));
Assert.isTrue(testXY(xy, actual));
};
});
Y.Test.Runner.add(new Y.Test.Case(tests));
};
}, '@VERSION@' ,{requires:['dom-screen', 'test']});
<!doctype html>
<html>
<head>
<title>YUI: GetXY</title>
<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
<script type="text/javascript" src="./assets/dom-move-xy-test.js"></script>
<style type="text/css" media="screen">
.yui3-console {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.container {
position: relative;
width: 100%;
height: 120px;
}
.node {
opacity: 0.5;
position: absolute;
width: 200px;
height: 50px;
background-color: #74ADE8;
}
.node-left {
background-color: #f00;
left: 20%;
}
.mr {
margin-right: -99px;
}
.ml {
margin-left: -204px;
}
.node-right {
background-color: #0f0;
right: 80%;
}
</style>
</head>
<body class="yui3-skin-sam">
<div class="container" dir="ltr">
<div id="ltr-left-ml" class="node node-left ml">LTR node left ml</div>
<div id="ltr-left-mr" class="node node-left mr">LTR node left mr</div>
<div id="ltr-left-ml-mr" class="node node-left mr ml">LTR node left ml mr</div>
</div>
<div class="container" dir="ltr">
<div id="ltr-right-ml" class="node node-right ml">LTR node right ml</div>
<div id="ltr-right-mr" class="node node-right mr">LTR node right mr</div>
<div id="ltr-right-ml-mr" class="node node-right ml mr">LTR node right ml mr</div>
</div>
<div class="container" dir="rtl">
<div id="rtl-left-ml" class="node node-left ml">RTL node left ml</div>
<div id="rtl-left-mr" class="node node-left mr">RTL node left mr</div>
<div id="rtl-left-ml-mr" class="node node-left ml mr">RTL node left ml mr</div>
</div>
<div class="container" dir="rtl">
<div id="rtl-right-ml" class="node node-right ml">RTL node right ml</div>
<div id="rtl-right-mr" class="node node-right mr">RTL node right mr</div>
<div id="rtl-right-ml-mr" class="node node-right ml mr">RTL node right ml mr</div>
</div>
<script type="text/javascript">
YUI({
coverage: ['dom-screen'],
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'
}).use('test-console', 'dom-move-xy-test', function (Y) {
Y.DOM._testXY();
new Y.Test.Console().render();
Y.Test.Runner.setName('Dom: XY');
Y.Test.Runner.run();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment