library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resizable automated tests prototype started

Browse Source
This commit is contained in:
Eduardo Lundgren 2008-05-24 07:07:20 +00:00
parent 63091e2c98
commit b5bc8683ef
3 changed files with 117 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ui/tests/images/click.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

29
ui/tests/resizable.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizable Test Page</title>
<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen">
<script type="text/javascript" src="../../jquery/jquery-1.2.5.js"></script>
<script type="text/javascript" src="../source/ui.core.js"></script>
<script type="text/javascript" src="../source/ui.resizable.js"></script>
<script type="text/javascript" src="../../qunit/testrunner.js"></script>
<script type="text/javascript" src="resizable.js"></script>
</head>
<body>
<h1 id="header">jQuery Test Suite</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">
<div id='resizable1' style="background: green; width: 200px; height: 100px;">I'm a resizable.</div>
</div>
<ol id="tests"></ol>
</body>
</html>

88
ui/tests/resizable.js Normal file
View File

@ -0,0 +1,88 @@
var num = function(i) {
return parseInt(i, 10);
};
var animateClick = function(co) {
var img = $("<img src='images/click.png' width='1'>").appendTo("body")
.css({ position: "absolute", zIndex: 1000, left: co.x, top: co.y })
.animate({ width: 80, height: 80, left: co.x-40, top: co.y-40, opacity: 'hide' }, 1000, function() { $(this).remove(); });
};
var initMouseEvent = function(type, el, co) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(type, true, true, window, 0, 0, 0, co.x, co.y, false, false, false, false, 0, null);
el.dispatchEvent(evt);
if (/^mouseup|mousedown|click$/i.test(type)) {
animateClick(co);
}
return evt;
};
$.fn.triggerMousedown = function(co) {
return initMouseEvent("mousedown", this[0], co);
};
$.fn.triggerMouseup = function(co) {
return initMouseEvent("mouseup", this[0], co);
};
$.fn.triggerMousemove = function(co, target) {
return initMouseEvent("mousemove", this[0], co);
};
var xy = function(el, offset) {
var o = el.offset();
return { x: o.left + (offset || [0, 0])[0]||0, y: o.top + (offset || [0, 0])[1]||0 };
};
$(document).ready(function() {
$("#resizable1").resizable({
start: function(e, ui) {
console.log('start: [' + e.pageX + ', ' + e.pageY + ']' )
console.log(ui.instance.size, ui.instance.position)
},
stop: function(e, ui) {
console.log('stop: [' + e.pageX + ', ' + e.pageY + ']' )
console.log(ui.instance.size, ui.instance.position)
},
resize: function(e) {
console.log(e);
}
});
var handler = $(this).find('.ui-resizable-s');
handler.mousedown(function() { /*console.log('down')*/ });
handler.mouseup(function() { /*console.log('up')*/ });
handler.triggerMousedown( xy(handler) );
for (var x = 0; x < 50; x += 10) {
var evt = $(handler).triggerMousemove( xy(handler, [x, x]) );
console.log(evt)
}
handler.triggerMouseup( xy(handler, [50, 50]) );
return;
module("resizable: simple resize");
test("simple drag", function() {
expect(1);
ok(true, "Resize element on the same position");
});
});