diff options
Diffstat (limited to 'tests')
66 files changed, 2334 insertions, 0 deletions
diff --git a/tests/accordion.html b/tests/accordion.html new file mode 100644 index 000000000..66913ba2b --- /dev/null +++ b/tests/accordion.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI Accordion Test Suite</title> + + <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + + <script type="text/javascript" src="../source/ui.core.js"></script> + <script type="text/javascript" src="../source/ui.accordion.js"></script> + + <script type="text/javascript" src="../../qunit/testrunner.js"></script> + + <script type="text/javascript" src="accordion.js"></script> + <style type="text/css"> + .xerror, .error { display: none } + </style> + +</head> +<body class="flora"> + <h1>jQuery UI Accordion Test Suite</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <ol id="tests"></ol> + +<div id="main" style="position:absolute;top:-2000000px;"> + + <fieldset> + <legend>Standard, container is a div, header is h3 and content p</legend> + + <div id="list1"> + <a>There is one obvious advantage:</a> + <div> + <p> + You've seen it coming!<br/> + Buy now and get nothing for free!<br/> + Well, at least no free beer. Perhaps a bear, if you can afford it. + </p> + </div> + <a>Now that you've got...</a> + <div> + <p> + your bear, you have to admit it!<br/> + No, we aren't selling bears. + </p> + <p> + We could talk about renting one. + </p> + </div> + <a>Rent one bear, ...</a> + <div> + <p> + get two for three beer. + </p> + <p> + And now, for something completely different. + </p> + </div> + </div> + + </fieldset> + + <fieldset> + <legend>Navigation - Unordered List with anchors and nested lists.</legend> + <p>The first item is cloned to allow the user to select it. The + active element is choosen based on location.hash: Open Drums and click + the first item ('Drums'), then reload the page.</p> + + <ul id="navigation"> + <li> + <a class="head" href="?p=1.1.1">Guitar</a> + <ul> + <li><a href="?p=1.1.1.1">Electric</a></li> + <li><a href="?p=1.1.1.2">Acoustic</a></li> + <li><a href="?p=1.1.1.3">Amps</a></li> + <li><a href="?p=1.1.1.4">Effects</a></li> + <li><a href="?p=1.1.1.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.2">Bass</a> + <ul> + <li><a href="?p=1.1.2.1">Electric</a></li> + <li><a href="?p=1.1.2.2">Acoustic</a></li> + <li><a href="?p=1.1.2.3">Amps</a></li> + <li><a href="?p=1.1.2.4">Effects</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.3">Drums</a> + <ul> + <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> + <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.6">Accessories</a></li> + </ul> + </li> + </ul> + + </fieldset> + + <fieldset> + <legend>With options, container is a definition list, header dt, content dd</legend> + + <dl id="list2"> + <dt class="red">Red</dt> + <dd> + Fancy stuff about red thingies. + </dd> + <dt class="green selected">Green</dt> + <dd> + Green! Green! Green! + </dd> + <dt class="blue">Blue</dt> + <dd> + Cool kids are blue. + </dd> + </dl> + + </fieldset> + + <fieldset> + <legend>Divitus structure, div container, div header (class title), div + content, no active on startup and can be completely closed</legend> + + <div id="list3"> + <div> + <div class="title">Tennis</div> + <div> + One ball, two players. Lots of fun. + </div> + </div> + <div> + <div class="title">Soccer</div> + <div> + One ball, 22 players. Lots of fun. + </div> + </div> + <div> + <div class="title">Baseball</div> + <div> + Well, one ball, some guys running around, some guys hitting others with a stick.<br/> + Sounds like fun, doesn't it? + </div> + <div> + Well, apart from the running part. + </div> + </div> + </div> + + </fieldset> + + <div id="switch"> + <select> + <option>Switch to...</option> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + </select> + <button id="close">Close all</button> + Activate via selector, eg. ':first' or 'a:first': <input id="switch2" /> + </div> + + <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div> +</div> + </body> +</html>
\ No newline at end of file diff --git a/tests/accordion.js b/tests/accordion.js new file mode 100644 index 000000000..c0e3edfc5 --- /dev/null +++ b/tests/accordion.js @@ -0,0 +1,78 @@ +module("accordion"); + +jQuery.ui.accordion.defaults.animated = false; + +function state(accordion) { + var args = $.makeArray(arguments).slice(1); + $.each(args, function(i, n) { + equals(n, accordion.find("div").eq(i).is(":visible")); + }); +} + +test("basics", function() { + state($('#list1').accordion(), 1, 0, 0); +}); + +test("autoheight", function() { + $('#navigation').accordion({ header: '.head', autoHeight: false }); + equals( 90, $('#navigation ul:first').height() ); + equals( 126, $('#navigation ul:eq(1)').height() ); + equals( 54, $('#navigation ul:last').height() ); + $('#navigation').accordion("destroy").accordion({ header: '.head', autoHeight: true }); + equals( 126, $('#navigation ul:first').height() ); + equals( 126, $('#navigation ul:eq(1)').height() ); + equals( 126, $('#navigation ul:last').height() ); +}); + +test("activate, numeric", function() { + var ac = $('#list1').accordion({ active: 1 }); + state(ac, 0, 1, 0); + ac.accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", 0); + state(ac, 1, 0, 0); + ac.accordion("activate", 1); + state(ac, 0, 1, 0); + ac.accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", -1); + state(ac, 0, 0, 1); +}); + +test("activate, boolean and numeric, alwaysOpen:false", function() { + var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2); + state(ac, 0, 0, 1); + ok("x", "----"); + ac.accordion("activate", 0); + state(ac, 1, 0, 0); + ok("x", "----"); + ac.accordion("activate", -1); + state(ac, 0, 0, 0); +}); + +test("activate, boolean, alwaysOpen:true", function() { + var ac = $('#list1').accordion().accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", -1); + state(ac, 0, 0, 1); +}); + +test("activate, string expression", function() { + var ac = $('#list1').accordion({ active: ":last" }); + state(ac, 0, 0, 1); + ac.accordion("activate", ":first"); + state(ac, 1, 0, 0); + ac.accordion("activate", ":eq(1)"); + state(ac, 0, 1, 0); + ac.accordion("activate", ":last"); + state(ac, 0, 0, 1); +}); + +test("activate, jQuery or DOM element", function() { + var ac = $('#list1').accordion({ active: $("#list1 a:last") }); + state(ac, 0, 0, 1); + ac.accordion("activate", $("#list1 a:first")); + state(ac, 1, 0, 0); + ac.accordion("activate", $("#list1 a")[1]); + state(ac, 0, 1, 0); +});
\ No newline at end of file diff --git a/tests/all.html b/tests/all.html new file mode 100644 index 000000000..82000437d --- /dev/null +++ b/tests/all.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI All Tests</title> + <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + + <script type="text/javascript" src="../source/ui.core.js"></script> + <script type="text/javascript" src="../source/ui.accordion.js"></script> + <script type="text/javascript" src="../source/ui.slider.js"></script> + + <script type="text/javascript" src="../../qunit/testrunner.js"></script> + + <script type="text/javascript" src="accordion.js"></script> + <script type="text/javascript" src="slider.js"></script> + <style type="text/css"> + .xerror, .error { display: none } + </style> + +</head> +<body class="flora"> + <h1>jQuery UI All Tests</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <h4>Run individual testsuites or doubleclick a test below</h4> + <ul> + <li><a href="accordion.html">Accordion</a></li> + <li><a href="slider.html">Slider</a></li> + </ul> + + <ol id="tests"></ol> + +<div id="main" style="position:absolute;top:-2000000px;"> + + <div id='slider1'></div> + <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;"> + <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> + </div> + + <fieldset> + <legend>Standard, container is a div, header is h3 and content p</legend> + + <div id="list1"> + <a>There is one obvious advantage:</a> + <div> + <p> + You've seen it coming!<br/> + Buy now and get nothing for free!<br/> + Well, at least no free beer. Perhaps a bear, if you can afford it. + </p> + </div> + <a>Now that you've got...</a> + <div> + <p> + your bear, you have to admit it!<br/> + No, we aren't selling bears. + </p> + <p> + We could talk about renting one. + </p> + </div> + <a>Rent one bear, ...</a> + <div> + <p> + get two for three beer. + </p> + <p> + And now, for something completely different. + </p> + </div> + </div> + + </fieldset> + + <fieldset> + <legend>Navigation - Unordered List with anchors and nested lists.</legend> + <p>The first item is cloned to allow the user to select it. The + active element is choosen based on location.hash: Open Drums and click + the first item ('Drums'), then reload the page.</p> + + <ul id="navigation"> + <li> + <a class="head" href="?p=1.1.1">Guitar</a> + <ul> + <li><a href="?p=1.1.1.1">Electric</a></li> + <li><a href="?p=1.1.1.2">Acoustic</a></li> + <li><a href="?p=1.1.1.3">Amps</a></li> + <li><a href="?p=1.1.1.4">Effects</a></li> + <li><a href="?p=1.1.1.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.2">Bass</a> + <ul> + <li><a href="?p=1.1.2.1">Electric</a></li> + <li><a href="?p=1.1.2.2">Acoustic</a></li> + <li><a href="?p=1.1.2.3">Amps</a></li> + <li><a href="?p=1.1.2.4">Effects</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.3">Drums</a> + <ul> + <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> + <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.6">Accessories</a></li> + </ul> + </li> + </ul> + + </fieldset> + + <fieldset> + <legend>With options, container is a definition list, header dt, content dd</legend> + + <dl id="list2"> + <dt class="red">Red</dt> + <dd> + Fancy stuff about red thingies. + </dd> + <dt class="green selected">Green</dt> + <dd> + Green! Green! Green! + </dd> + <dt class="blue">Blue</dt> + <dd> + Cool kids are blue. + </dd> + </dl> + + </fieldset> + + <fieldset> + <legend>Divitus structure, div container, div header (class title), div + content, no active on startup and can be completely closed</legend> + + <div id="list3"> + <div> + <div class="title">Tennis</div> + <div> + One ball, two players. Lots of fun. + </div> + </div> + <div> + <div class="title">Soccer</div> + <div> + One ball, 22 players. Lots of fun. + </div> + </div> + <div> + <div class="title">Baseball</div> + <div> + Well, one ball, some guys running around, some guys hitting others with a stick.<br/> + Sounds like fun, doesn't it? + </div> + <div> + Well, apart from the running part. + </div> + </div> + </div> + + </fieldset> + + <div id="switch"> + <select> + <option>Switch to...</option> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + </select> + <button id="close">Close all</button> + Activate via selector, eg. ':first' or 'a:first': <input id="switch2" /> + </div> + + <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div> +</div> + </body> +</html>
\ No newline at end of file diff --git a/tests/autodrag.html b/tests/autodrag.html new file mode 100644 index 000000000..acc17fb4c --- /dev/null +++ b/tests/autodrag.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI - Automated Tests</title> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/source/ui.core.js"></script> + <script type="text/javascript" src="../../ui/source/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/source/ui.selectable.js"></script> + + <script type="text/javascript" src="jquery.simulate.js"></script> + <script type="text/javascript" src="ui.testmouse.js"></script> + +<style type="text/css"> + +html, body { height: 100%; } +#main { height: 100%; } + +#foo { position: relative; margin: 10px; padding: 10px; border: 3px solid gray; width: 200px; height: 200px; background: #eef; text-align: center; } +#foo * { margin: 4px; } +.ui-draggable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; } +.ui-draggable .msg-enabled { display: block; } +.ui-draggable .msg-disabled { display: none; } +.ui-draggable-disabled .msg-enabled { display: none !important; } +.ui-draggable-disabled .msg-disabled { display: block !important; } +.ui-selectable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; } +.ui-selectable .msg-enabled { display: block; } +.ui-selectable .msg-disabled { display: none; } +.ui-selectable-disabled .msg-enabled { display: none !important; } +.ui-selectable-disabled .msg-disabled { display: block !important; } +//.ui-selectee { border: 1px solid white; } +.ui-selecting { background: Highlight; color: HighlightText; outline: 1px dotted white; } +.ui-selected { background: Highlight; color: HighlightText; outline: 1px dotted black; } + +</style> + +<script type="text/javascript"> +$(function() { + + var speed = "fast"; + + var queue; + var start = function() { + queue = tests.slice().reverse(); // clone + $("#status").text("Running..."); + nextTest(); + } + var stop = function() { + $("#status").text("Ready"); + teardown(); + } + + var tests = []; + var nextTest = function() { + if (queue.length) { + var nTest = queue.pop(); + teardown(function() { + setupAndRun(nTest); + }); + } else { + stop(); + } + } + + var num = 0; + + var addTest = function(fn) { + num += 1; + tests.push({ + num: num, + fn: fn + }); + } + + var setupAndRun = function(nTest) { + $('#testnum').text(nTest.num); + $('#sandbox').hide() + .append('<ul id="foo">' + + '<li class="msg-missing-class">THIS TEXT SHOULD NOT BE VISIBLE</li>' + + '<li class="msg-enabled">enabled</li>' + + '<li class="msg-disabled">disabled</li>' + + '<li>Item 2</li>' + + '<li>Item 3</li>' + + '<li>Item 4</li>' + + '<li>Item 5</li>' + + '<li>Item 6</li>' + + '<li>Item 7</li>' + + '<li>Item 8</li>' + + '</ul>') + $('#foo').testMouse({ + speed: speed, + complete: nextTest + }); + $('#sandbox').show(); + nTest.fn.apply(nTest.fn); + } + + var teardown = function(fn) { + $('#sandbox').hide(); + $('#foo').remove(); + if ($.isFunction(fn)) fn.apply(); + } + var plugin = "draggable"; + //plugin = "selectable" + var testFn = "testMouse"; + var testArgs = ["drag", 40, 50]; + //1 + addTest(function() { $("#foo")[plugin]()[testFn].apply($("#foo"), testArgs); }); + //2 + addTest(function() { $("#foo")[plugin]({ disabled: true })[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: false })[testFn].apply($("#foo"), testArgs); }); + //4 + addTest(function() { $("#foo")[plugin]()[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]()[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //6 + addTest(function() { $("#foo")[plugin]()[plugin]('enable')[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]()[plugin]('disable')[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //8 + addTest(function() { $("#foo")[plugin]({ disabled: false })[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: true })[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //10 + addTest(function() { $("#foo")[plugin]({ disabled: false }).data('disabled.' + plugin, true)[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: true }).data('disabled.' + plugin, false)[testFn].apply($("#foo"), testArgs); }); + + $('#begin').click(function() { + start(); + }); + +}); +</script> + +</head> +<body> + +<div id="main"> + + <h1>jQuery UI - Automated Tests</h1> + + <div> + Status: <span id="status">Ready</span> + </div> + + <div> + Test: <span id="testnum"></span> + </div> + + <div style="height: 3em;"><button id="begin">Run Test</button></div> + + <div id="sandbox"> + + </div> + +</div> + +</body> +</html> diff --git a/tests/cursors/linux/auto.png b/tests/cursors/linux/auto.png Binary files differnew file mode 100644 index 000000000..03ac2f281 --- /dev/null +++ b/tests/cursors/linux/auto.png diff --git a/tests/cursors/linux/crosshair.png b/tests/cursors/linux/crosshair.png Binary files differnew file mode 100644 index 000000000..30904f933 --- /dev/null +++ b/tests/cursors/linux/crosshair.png diff --git a/tests/cursors/linux/default.png b/tests/cursors/linux/default.png Binary files differnew file mode 100644 index 000000000..03ac2f281 --- /dev/null +++ b/tests/cursors/linux/default.png diff --git a/tests/cursors/linux/e-resize.png b/tests/cursors/linux/e-resize.png Binary files differnew file mode 100644 index 000000000..b4c40ff17 --- /dev/null +++ b/tests/cursors/linux/e-resize.png diff --git a/tests/cursors/linux/help.png b/tests/cursors/linux/help.png Binary files differnew file mode 100644 index 000000000..a6b5836d6 --- /dev/null +++ b/tests/cursors/linux/help.png diff --git a/tests/cursors/linux/move.png b/tests/cursors/linux/move.png Binary files differnew file mode 100644 index 000000000..39ae04520 --- /dev/null +++ b/tests/cursors/linux/move.png diff --git a/tests/cursors/linux/n-resize.png b/tests/cursors/linux/n-resize.png Binary files differnew file mode 100644 index 000000000..afef5b438 --- /dev/null +++ b/tests/cursors/linux/n-resize.png diff --git a/tests/cursors/linux/ne-resize.png b/tests/cursors/linux/ne-resize.png Binary files differnew file mode 100644 index 000000000..8c5e970e1 --- /dev/null +++ b/tests/cursors/linux/ne-resize.png diff --git a/tests/cursors/linux/none.cur b/tests/cursors/linux/none.cur Binary files differnew file mode 100644 index 000000000..4f7970a9f --- /dev/null +++ b/tests/cursors/linux/none.cur diff --git a/tests/cursors/linux/none.png b/tests/cursors/linux/none.png Binary files differnew file mode 100644 index 000000000..3b34811c5 --- /dev/null +++ b/tests/cursors/linux/none.png diff --git a/tests/cursors/linux/nw-resize.png b/tests/cursors/linux/nw-resize.png Binary files differnew file mode 100644 index 000000000..7c17be53e --- /dev/null +++ b/tests/cursors/linux/nw-resize.png diff --git a/tests/cursors/linux/pointer.png b/tests/cursors/linux/pointer.png Binary files differnew file mode 100644 index 000000000..b39fcef8f --- /dev/null +++ b/tests/cursors/linux/pointer.png diff --git a/tests/cursors/linux/s-resize.png b/tests/cursors/linux/s-resize.png Binary files differnew file mode 100644 index 000000000..afef5b438 --- /dev/null +++ b/tests/cursors/linux/s-resize.png diff --git a/tests/cursors/linux/se-resize.png b/tests/cursors/linux/se-resize.png Binary files differnew file mode 100644 index 000000000..7c17be53e --- /dev/null +++ b/tests/cursors/linux/se-resize.png diff --git a/tests/cursors/linux/sw-resize.png b/tests/cursors/linux/sw-resize.png Binary files differnew file mode 100644 index 000000000..8c5e970e1 --- /dev/null +++ b/tests/cursors/linux/sw-resize.png diff --git a/tests/cursors/linux/text.png b/tests/cursors/linux/text.png Binary files differnew file mode 100644 index 000000000..85a54fcb7 --- /dev/null +++ b/tests/cursors/linux/text.png diff --git a/tests/cursors/linux/w-resize.png b/tests/cursors/linux/w-resize.png Binary files differnew file mode 100644 index 000000000..b4c40ff17 --- /dev/null +++ b/tests/cursors/linux/w-resize.png diff --git a/tests/cursors/mac/auto.png b/tests/cursors/mac/auto.png Binary files differnew file mode 100644 index 000000000..65b21e435 --- /dev/null +++ b/tests/cursors/mac/auto.png diff --git a/tests/cursors/mac/crosshair.png b/tests/cursors/mac/crosshair.png Binary files differnew file mode 100644 index 000000000..b4f165b6a --- /dev/null +++ b/tests/cursors/mac/crosshair.png diff --git a/tests/cursors/mac/default.png b/tests/cursors/mac/default.png Binary files differnew file mode 100644 index 000000000..65b21e435 --- /dev/null +++ b/tests/cursors/mac/default.png diff --git a/tests/cursors/mac/e-resize.png b/tests/cursors/mac/e-resize.png Binary files differnew file mode 100644 index 000000000..583ce1862 --- /dev/null +++ b/tests/cursors/mac/e-resize.png diff --git a/tests/cursors/mac/help.png b/tests/cursors/mac/help.png Binary files differnew file mode 100644 index 000000000..5e8ee5870 --- /dev/null +++ b/tests/cursors/mac/help.png diff --git a/tests/cursors/mac/move.png b/tests/cursors/mac/move.png Binary files differnew file mode 100644 index 000000000..cf7608539 --- /dev/null +++ b/tests/cursors/mac/move.png diff --git a/tests/cursors/mac/n-resize.png b/tests/cursors/mac/n-resize.png Binary files differnew file mode 100644 index 000000000..1242980a4 --- /dev/null +++ b/tests/cursors/mac/n-resize.png diff --git a/tests/cursors/mac/ne-resize.png b/tests/cursors/mac/ne-resize.png Binary files differnew file mode 100644 index 000000000..da3f6d05f --- /dev/null +++ b/tests/cursors/mac/ne-resize.png diff --git a/tests/cursors/mac/none.cur b/tests/cursors/mac/none.cur Binary files differnew file mode 100644 index 000000000..4f7970a9f --- /dev/null +++ b/tests/cursors/mac/none.cur diff --git a/tests/cursors/mac/none.png b/tests/cursors/mac/none.png Binary files differnew file mode 100644 index 000000000..3b34811c5 --- /dev/null +++ b/tests/cursors/mac/none.png diff --git a/tests/cursors/mac/nw-resize.png b/tests/cursors/mac/nw-resize.png Binary files differnew file mode 100644 index 000000000..b6c5e3956 --- /dev/null +++ b/tests/cursors/mac/nw-resize.png diff --git a/tests/cursors/mac/pointer.png b/tests/cursors/mac/pointer.png Binary files differnew file mode 100644 index 000000000..45fbd2b77 --- /dev/null +++ b/tests/cursors/mac/pointer.png diff --git a/tests/cursors/mac/s-resize.png b/tests/cursors/mac/s-resize.png Binary files differnew file mode 100644 index 000000000..1242980a4 --- /dev/null +++ b/tests/cursors/mac/s-resize.png diff --git a/tests/cursors/mac/se-resize.png b/tests/cursors/mac/se-resize.png Binary files differnew file mode 100644 index 000000000..b6c5e3956 --- /dev/null +++ b/tests/cursors/mac/se-resize.png diff --git a/tests/cursors/mac/sw-resize.png b/tests/cursors/mac/sw-resize.png Binary files differnew file mode 100644 index 000000000..da3f6d05f --- /dev/null +++ b/tests/cursors/mac/sw-resize.png diff --git a/tests/cursors/mac/text.png b/tests/cursors/mac/text.png Binary files differnew file mode 100644 index 000000000..2257903e9 --- /dev/null +++ b/tests/cursors/mac/text.png diff --git a/tests/cursors/mac/w-resize.png b/tests/cursors/mac/w-resize.png Binary files differnew file mode 100644 index 000000000..583ce1862 --- /dev/null +++ b/tests/cursors/mac/w-resize.png diff --git a/tests/cursors/win/auto.png b/tests/cursors/win/auto.png Binary files differnew file mode 100644 index 000000000..b2c5c858c --- /dev/null +++ b/tests/cursors/win/auto.png diff --git a/tests/cursors/win/crosshair.png b/tests/cursors/win/crosshair.png Binary files differnew file mode 100644 index 000000000..02c99b7fd --- /dev/null +++ b/tests/cursors/win/crosshair.png diff --git a/tests/cursors/win/default.png b/tests/cursors/win/default.png Binary files differnew file mode 100644 index 000000000..b2c5c858c --- /dev/null +++ b/tests/cursors/win/default.png diff --git a/tests/cursors/win/e-resize.png b/tests/cursors/win/e-resize.png Binary files differnew file mode 100644 index 000000000..056eb699f --- /dev/null +++ b/tests/cursors/win/e-resize.png diff --git a/tests/cursors/win/help.png b/tests/cursors/win/help.png Binary files differnew file mode 100644 index 000000000..b8034bb7b --- /dev/null +++ b/tests/cursors/win/help.png diff --git a/tests/cursors/win/move.png b/tests/cursors/win/move.png Binary files differnew file mode 100644 index 000000000..627e79937 --- /dev/null +++ b/tests/cursors/win/move.png diff --git a/tests/cursors/win/n-resize.png b/tests/cursors/win/n-resize.png Binary files differnew file mode 100644 index 000000000..d06244cbb --- /dev/null +++ b/tests/cursors/win/n-resize.png diff --git a/tests/cursors/win/ne-resize.png b/tests/cursors/win/ne-resize.png Binary files differnew file mode 100644 index 000000000..79f6c3ae3 --- /dev/null +++ b/tests/cursors/win/ne-resize.png diff --git a/tests/cursors/win/none.cur b/tests/cursors/win/none.cur Binary files differnew file mode 100644 index 000000000..4f7970a9f --- /dev/null +++ b/tests/cursors/win/none.cur diff --git a/tests/cursors/win/none.png b/tests/cursors/win/none.png Binary files differnew file mode 100644 index 000000000..1764445c9 --- /dev/null +++ b/tests/cursors/win/none.png diff --git a/tests/cursors/win/nw-resize.png b/tests/cursors/win/nw-resize.png Binary files differnew file mode 100644 index 000000000..af48a12d2 --- /dev/null +++ b/tests/cursors/win/nw-resize.png diff --git a/tests/cursors/win/pointer.png b/tests/cursors/win/pointer.png Binary files differnew file mode 100644 index 000000000..7d07182a9 --- /dev/null +++ b/tests/cursors/win/pointer.png diff --git a/tests/cursors/win/s-resize.png b/tests/cursors/win/s-resize.png Binary files differnew file mode 100644 index 000000000..d06244cbb --- /dev/null +++ b/tests/cursors/win/s-resize.png diff --git a/tests/cursors/win/se-resize.png b/tests/cursors/win/se-resize.png Binary files differnew file mode 100644 index 000000000..af48a12d2 --- /dev/null +++ b/tests/cursors/win/se-resize.png diff --git a/tests/cursors/win/sw-resize.png b/tests/cursors/win/sw-resize.png Binary files differnew file mode 100644 index 000000000..79f6c3ae3 --- /dev/null +++ b/tests/cursors/win/sw-resize.png diff --git a/tests/cursors/win/text.png b/tests/cursors/win/text.png Binary files differnew file mode 100644 index 000000000..ce8dc22ee --- /dev/null +++ b/tests/cursors/win/text.png diff --git a/tests/cursors/win/w-resize.png b/tests/cursors/win/w-resize.png Binary files differnew file mode 100644 index 000000000..056eb699f --- /dev/null +++ b/tests/cursors/win/w-resize.png diff --git a/tests/draggable.html b/tests/draggable.html new file mode 100644 index 000000000..a70fb0df7 --- /dev/null +++ b/tests/draggable.html @@ -0,0 +1,41 @@ +<!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>Draggable Test Page</title> +<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + +<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> +<script type="text/javascript" src="../source/ui.core.js"></script> +<script type="text/javascript" src="../source/ui.draggable.js"></script> + +<script type="text/javascript" src="../../qunit/testrunner.js"></script> +<script type="text/javascript" src="draggable.js"></script> +<script type="text/javascript" src="jquery.simulate.js"></script> + +<style> + html { border: 0; } + #main { + position:absolute !important; + top: -1000px !important; + left: -1000px !important; + } +</style> + +</head> +<body> + + <h1 id="header">Draggable 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='draggable1' style="background: green; width: 200px; height: 100px;">Static</div> + <div id='draggable2' style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div> + </div> + + <ol id="tests"></ol> + +</body> +</html> diff --git a/tests/draggable.js b/tests/draggable.js new file mode 100644 index 000000000..299017b90 --- /dev/null +++ b/tests/draggable.js @@ -0,0 +1,494 @@ +/* + * draggable unit tests + */ + +// +// Draggable Test Helper Functions +// +var el, offsetBefore, offsetAfter, dragged; + +var drag = function(handle, dx, dy) { + var element = el.data("draggable").element; + offsetBefore = el.offset(); + $(handle).simulate("drag", { + dx: dx || 0, + dy: dy || 0 + }); + dragged = { dx: dx, dy: dy }; + offsetAfter = el.offset(); +} + +var moved = function (dx, dy, msg) { + msg = msg ? msg + "." : ""; + var actual = { left: offsetAfter.left, top: offsetAfter.top }; + var expected = { left: offsetBefore.left + dx, top: offsetAfter.top }; + compare2(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg); +} + +function shouldmove(why) { + drag(el, 50, 50); + moved(50, 50, why); +} + +function shouldnotmove(why) { + drag(el, 50, 50); + moved(0, 0, why); +} + +var border = function(el, side) { return parseInt(el.css('border-' + side + '-width')); } + +var margin = function(el, side) { return parseInt(el.css('margin-' + side)); } + +// Draggable Tests +module("Draggable"); + +test("init", function() { + expect(6); + + el = $("#draggable1").draggable(); + ok(true, '.draggable() called on element'); + + $([]).draggable(); + ok(true, '.draggable() called on empty collection'); + + $("<div/>").draggable(); + ok(true, '.draggable() called on disconnected DOMElement'); + + $("<div/>").draggable().draggable("foo"); + ok(true, 'arbitrary method called after init'); + + $("<div/>").draggable().data("foo.draggable"); + ok(true, 'arbitrary option getter after init'); + + $("<div/>").draggable().data("foo.draggable", "bar"); + ok(true, 'arbitrary option setter after init'); +}); + +test("destroy", function() { + expect(6); + + $("#draggable1").draggable().draggable("destroy"); + ok(true, '.draggable("destroy") called on element'); + + $([]).draggable().draggable("destroy"); + ok(true, '.draggable("destroy") called on empty collection'); + + $("<div/>").draggable().draggable("destroy"); + ok(true, '.draggable("destroy") called on disconnected DOMElement'); + + $("<div/>").draggable().draggable("destroy").draggable("foo"); + ok(true, 'arbitrary method called after destroy'); + + $("<div/>").draggable().draggable("destroy").data("foo.draggable"); + ok(true, 'arbitrary option getter after destroy'); + + $("<div/>").draggable().draggable("destroy").data("foo.draggable", "bar"); + ok(true, 'arbitrary option setter after destroy'); +}); + +test("enable", function() { + expect(6); + el = $("#draggable2").draggable({ disabled: true }); + shouldnotmove('.draggable({ disabled: true })'); + el.draggable("enable"); + shouldmove('.draggable("enable")'); + equals(el.data("disabled.draggable"), false, "disabled.draggable getter"); + + el.draggable("destroy"); + el.draggable({ disabled: true }); + shouldnotmove('.draggable({ disabled: true })'); + el.data("disabled.draggable", false); + equals(el.data("disabled.draggable"), false, "disabled.draggable setter"); + shouldmove('.data("disabled.draggable", false)'); +}); + +test("disable", function() { + expect(6); + el = $("#draggable2").draggable({ disabled: false }); + shouldmove('.draggable({ disabled: false })'); + el.draggable("disable"); + shouldnotmove('.draggable("disable")'); + equals(el.data("disabled.draggable"), true, "disabled.draggable getter"); + + el.draggable("destroy"); + + el.draggable({ disabled: false }); + shouldmove('.draggable({ disabled: false })'); + el.data("disabled.draggable", true); + equals(el.data("disabled.draggable"), true, "disabled.draggable setter"); + shouldnotmove('.data("disabled.draggable", true)'); +}); + +test("element types", function() { + var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form' + + ',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr' + + ',acronym,code,samp,kbd,var,img,object,hr' + + ',input,button,label,select,iframe').split(','); + + $.each(typeNames, function(i) { + var typeName = typeNames[i]; + el = $(document.createElement(typeName)).appendTo('body'); + (typeName == 'table' && el.append("<tr><td>content</td></tr>")); + el.draggable({ cancel: '' }); + drag(el, 50, 50); + moved(50, 50, "<" + typeName + ">"); + el.draggable("destroy"); + el.remove(); + }); +}); + +test("defaults", function() { + el = $("#draggable1").draggable(); + equals(el.data("appendTo.draggable"), "parent", "appendTo"); + equals(el.data("axis.draggable"), false, "axis"); + equals(el.data("cancel.draggable"), ":input,button", "cancel"); + equals(el.data("delay.draggable"), 0, "delay"); + equals(el.data("disabled.draggable"), false, "disabled"); + equals(el.data("distance.draggable"), 0, "distance"); + equals(el.data("helper.draggable"), "original", "helper"); +}); + +test("No options, relative", function() { + el = $("#draggable1").draggable(); + drag(el, 50, 50); + moved(50, 50); +}); + +test("No options, absolute", function() { + el = $("#draggable2").draggable(); + drag(el, 50, 50); + moved(50, 50); +}); + +module("Draggable Options"); + +test("{ axis: false }, default", function() { + el = $("#draggable2").draggable({ axis: false }); + drag(el, 50, 50); + moved(50, 50); +}); + +test("{ axis: 'x' }", function() { + el = $("#draggable2").draggable({ axis: "x" }); + drag(el, 50, 50); + moved(50, 0); +}); + +test("{ axis: 'y' }", function() { + el = $("#draggable2").draggable({ axis: "y" }); + drag(el, 50, 50); + moved(0, 50); +}); + +test("{ axis: ? }, unexpected", function() { + var unexpected = { + "true": true, + "{}": {}, + "[]": [], + "null": null, + "undefined": undefined, + "function() {}": function() {} + }; + $.each(unexpected, function(key, val) { + el = $("#draggable2").draggable({ axis: val }); + drag(el, 50, 50); + moved(50, 50, "axis: " + key); + el.draggable("destroy"); + }) +}); + +test("{ cancel: 'span' }", function() { + el = $("#draggable2").draggable(); + drag("#draggable2 span", 50, 50); + moved(50, 50); + + el.draggable("destroy"); + + el = $("#draggable2").draggable({ cancel: 'span' }); + drag("#draggable2 span", 50, 50); + moved(0, 0); +}); + +test("{ cancel: ? }, unexpected", function() { + var unexpected = { + "true": true, + "false": false, + "{}": {}, + "[]": [], + "null": null, + "undefined": undefined, + "function() {return '';}": function() {return '';}, + "function() {return true;}": function() {return true;}, + "function() {return false;}": function() {return false;} + }; + $.each(unexpected, function(key, val) { + el = $("#draggable2").draggable({ cancel: val }); + drag(el, 50, 50); + var expected = [50, 50]; + switch(key) { + case "true": + expected = [0, 0] + break; + } + moved(expected[0], expected[1], "cancel: " + key); + el.draggable("destroy"); + }) +}); + +test("{ containment: 'parent' }, relative", function() { + el = $("#draggable1").draggable({ containment: 'parent' }); + var p = el.parent(), po = p.offset(); + drag(el, -100, -100); + var expected = { + left: po.left + border(p, 'left') + margin(el, 'left'), + top: po.top + border(p, 'top') + margin(el, 'top') + } + compare2(offsetAfter, expected, 'compare offset to parent'); +}); + +test("{ containment: 'parent' }, absolute", function() { + el = $("#draggable2").draggable({ containment: 'parent' }); + var p = el.parent(), po = p.offset(); + drag(el, -100, -100); + var expected = { + left: po.left + border(p, 'left') + margin(el, 'left'), + top: po.top + border(p, 'top') + margin(el, 'top') + } + compare2(offsetAfter, expected, 'compare offset to parent'); +}); + +test("{ cursor: 'move' }", function() { + + function getCursor() { return $("body").css("cursor"); } + + expect(2); + + var expected = "move", actual, before, after; + + el = $("#draggable2").draggable({ + cursor: expected, + start: function(e, ui) { + actual = getCursor(); + } + }); + + before = getCursor(); + drag("#draggable2", -1, -1); + after = getCursor(); + + equals(actual, expected, "start callback: cursor '" + expected + "'"); + equals(after, before, "after drag: cursor restored"); + +}); + +test("{ cursorAt: { left: -5, top: -5 } }", function() { + + expect(4); + + var dx = -3, dy = -3; + var ox = 5, oy = 5; + var cax = -5, cay = -5; + + var actual = null; + $("#draggable2").draggable({ + cursorAt: { left: cax, top: cay }, + drag: function(e, ui) { + actual = ui.absolutePosition; + } + }); + var el = $("#draggable2").data("draggable").element; + + var before = el.offset(); + var pos = { clientX: before.left + ox, clientY: before.top + oy }; + $("#draggable2").simulate("mousedown", pos); + pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy }; + $(document).simulate("mousemove", pos); + $(document).simulate("mousemove", pos); + $("#draggable2").simulate("mouseup", pos); + var expected = { + left: before.left + ox - cax + dx, + top: before.top + oy - cay + dy + }; + + equals(actual.left, expected.left, "Absolute: -1px left"); + equals(actual.top, expected.top, "Absolute: -1px top"); + + var actual = null; + $("#draggable1").draggable({ + cursorAt: { left: cax, top: cay }, + drag: function(e, ui) { + actual = ui.absolutePosition; + } + }); + var el = $("#draggable2").data("draggable").element; + + var before = el.offset(); + var pos = { clientX: before.left + ox, clientY: before.top + oy }; + $("#draggable2").simulate("mousedown", pos); + pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy }; + $(document).simulate("mousemove", pos); + $(document).simulate("mousemove", pos); + $("#draggable2").simulate("mouseup", pos); + var expected = { + left: before.left + ox - cax + dx, + top: before.top + oy - cay + dy + }; + + equals(actual.left, expected.left, "Relative: -1px left"); + equals(actual.top, expected.top, "Relative: -1px top"); + +}); + +test("{ distance: 10 }", function() { + + el = $("#draggable2").draggable({ distance: 10 }); + drag(el, -9, -9); + moved(0, 0, 'distance not met'); + + drag(el, -10, -10); + moved(-10, -10, 'distance met'); + + drag(el, 9, 9); + moved(0, 0, 'distance not met'); + +}); + +test("{ grid: [50, 50] }, relative", function() { + el = $("#draggable1").draggable({ grid: [50, 50] }); + drag(el, 24, 24); + moved(0, 0); + drag(el, 26, 25); + moved(50, 50); +}); + +test("{ grid: [50, 50] }, absolute", function() { + el = $("#draggable2").draggable({ grid: [50, 50] }); + drag(el, 24, 24); + moved(0, 0); + drag(el, 26, 25); + moved(50, 50); +}); + +test("{ handle: 'span' }", function() { + el = $("#draggable2").draggable({ handle: 'span' }); + + drag("#draggable2 span", 50, 50); + moved(50, 50, "drag span"); + + drag("#draggable2", 50, 50); + moved(0, 0, "drag element"); +}); + +test("{ helper: 'clone' }, relative", function() { + el = $("#draggable1").draggable({ helper: "clone" }); + drag(el, 50, 50); + moved(0, 0); +}); + +test("{ helper: 'clone' }, absolute", function() { + el = $("#draggable2").draggable({ helper: "clone" }); + drag(el, 50, 50); + moved(0, 0); +}); + +test("{ opacity: 0.5 }", function() { + + expect(1); + + var opacity = null; + el = $("#draggable2").draggable({ + opacity: 0.5, + start: function(e, ui) { + opacity = $(this).css("opacity"); + } + }); + + drag("#draggable2", -1, -1); + + equals(opacity, 0.5, "start callback: opacity is"); + +}); + +test("{ zIndex: 10 }", function() { + + expect(1); + + var expected = 10, actual; + + var zIndex = null; + el = $("#draggable2").draggable({ + zIndex: expected, + start: function(e, ui) { + actual = $(this).css("zIndex"); + } + }); + + drag("#draggable2", -1, -1); + + equals(actual, expected, "start callback: zIndex is"); + +}); + +module("Draggable Callbacks"); + +test("callbacks occurance count", function() { + + expect(3); + + var start = 0, stop = 0, dragc = 0; + el = $("#draggable2").draggable({ + start: function() { start++; }, + drag: function() { dragc++; }, + stop: function() { stop++; } + }); + + drag(el, 10, 10); + + equals(start, 1, "start callback should happen exactly once"); + equals(dragc, 2 + 1, "drag callback should happen exactly once per mousemove + 1"); + equals(stop, 1, "stop callback should happen exactly once"); + +}); + +module("Tickets"); + +test("#2965 cursorAt with margin", function() { + + expect(2); + + var ox = 0, oy = 0; + + var actual, expected; + $("#draggable2").draggable({ + cursorAt: { left: ox, top: oy }, + drag: function(e, ui) { + actual = ui.absolutePosition; + } + }); + var el = $("#draggable2").data("draggable").element; + + $("#draggable2").css('margin', '0px !important'); + + var before = el.offset(); + var pos = { clientX: before.left + ox, clientY: before.top + oy }; + $("#draggable2").simulate("mousedown", pos); + $(document).simulate("mousemove", pos); + $(document).simulate("mousemove", pos); + $("#draggable2").simulate("mouseup", pos); + var expected = actual; + actual = undefined; + + var marg = 13; + + $("#draggable2").css('margin', marg + 'px !important'); + var before = el.offset(); + var pos = { clientX: before.left + ox - marg, clientY: before.top + oy - marg }; + $("#draggable2").simulate("mousedown", pos); + $(document).simulate("mousemove", pos); + $(document).simulate("mousemove", pos); + $("#draggable2").simulate("mouseup", pos); + + equals(actual.left, expected.left, "10px margin. left"); + equals(actual.top, expected.top, "10px margin. top"); + +}); diff --git a/tests/images/click.png b/tests/images/click.png Binary files differnew file mode 100644 index 000000000..2b32f8d84 --- /dev/null +++ b/tests/images/click.png diff --git a/tests/images/test.jpg b/tests/images/test.jpg Binary files differnew file mode 100644 index 000000000..7d8ec0996 --- /dev/null +++ b/tests/images/test.jpg diff --git a/tests/jquery.useraction.js b/tests/jquery.useraction.js new file mode 100644 index 000000000..82ec0cd22 --- /dev/null +++ b/tests/jquery.useraction.js @@ -0,0 +1,347 @@ +/* Copyright (c) 2007 Eduardo Lundgren (eduardolundgren@gmail.com) + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + * + * Version: 0.1a + * Date: May, 2008 + * Requires jQuery 1.2.x+ + * Docs: http://docs.jquery.com/Plugins/userAction + * Greetings: Richard Worth + */ + +;(function($) { + +$.fn.extend({ + userAction: function(type) { + var args = arguments, opts = {}, a1 = args[1], a2 = args[2]; + + // transfer center offset + if (a1 && a1.length) { + opts.center = [a1[0], a1[1]]; + } + // set x and y + else if (typeof a1 == StringPool.NUMBER) { + opts.x = a1; opts.y = a2; + } + // extend options + else { + $.extend(opts, a1); + } + + return this.each(function() { + new $.userAction(this, type, opts); + }); + } +}); + +$.userAction = function(el, type, options) { + this.type = type; + this.options = $.extend({}, $.userAction.defaults, options || {}); + this.target = $(this.options.target || el)[0]; + + var self = this, o = this.options, c = o.center, center = { x: 0, y: 0 }; + + if (!o.x && !o.y) { + center = this.findCenter( + c && c.length ? c : [0, 0] + ) + } + + // if x and y not set, get the center of the element + o.x = o.x || center.x; o.y = o.y || center.y; + + var EVENT_DEFAULT = { + target: this.target, + view: window, + bubbles: o.bubbles || true, + cancelable: o.cancelable || false, + ctrlKey: o.ctrlKey || false, + altKey: o.altKey || false, + shiftKey: o.shiftKey || false, + metaKey: o.metaKey || false + }; + + // Simulating drag and drop event + if (/^drag$/i.test(type)) { + var self = this, t = this.target, queue = $.data(t, StringPool.DATA_QUEUE), + data = [options.dx || options.x, options.dy || options.y, this]; + + var fire = function() { + self.drag(options.dx || options.x, options.dy || options.y); + }; + + if (/^sync$/i.test(o.speed)) { + fire(); return; + } + + if (!queue) { + $.data(t, StringPool.DATA_QUEUE, [data]); fire(); return; + } + // queuing drags... + if (queue && queue.length) { + queue.push(data); + } + // if drag, stop here. + return; + } + + var isMouse = /^mouse(over|out|down|up|move)|(dbl)?click$/i.test(type), + isKeyboard = /^textevent|key(up|down|press)$/i.test(type), + + EVT = isMouse ? + $.extend({}, EVENT_DEFAULT, { + clientX: o.x, clientY: o.y, + screenX: o.screenX || 0, screenY: o.screenY || 0, + relatedTarget: $(o.relatedTarget)[0] || null, detail: 0, + button: o.button || ($.browser.msie ? 1 : 0), isTrusted: false + }) : + $.extend({}, EVENT_DEFAULT, { + keyCode: o.keyCode || 0, charCode: o.charCode || 0 + }); + + // avoid e.type == undefined before dispatchment + EVT.type = type; + + if (o.before) o.before.apply(this.target, [$.event.fix(EVT), o.x, o.y, this]); + + // check event type for mouse events + if (isMouse) { + // simulating mouse event + EVT = this.mouseEvent(EVT) + } + + // check event type for key events + if (isKeyboard) { + // simulating keuboard event + EVT = this.keyboardEvent(EVT); + } + + if (o.after) o.after.apply(this.target, [$.event.fix(EVT), o.x, o.y, this]); +}; + +$.extend($.userAction.prototype, { + + down: function(target) { + $(target).userAction(StringPool.MOUSEOVER).userAction(StringPool.MOUSEDOWN) + .userAction(StringPool.MOUSEMOVE); + }, + + up: function(target) { + $(target).userAction(StringPool.MOUSEUP).userAction(StringPool.MOUSEOUT); + }, + + move: function(target, x, y, after) { + $(target).userAction(StringPool.MOUSEMOVE, { x: x, y: y, after: after }); + }, + + drag: function(dx, dy) { + // drag helper function, thanks Richard Worth's testmouse api. + var self = this, o = this.options, center = this.findCenter(), + target = $(this.target), lastx = center.x, lasty = center.y, + fake = $(StringPool.FAKE_CURSOR_EXP), + speed = o.speed || StringPool.SLOW, + easing = o.easing || StringPool.SWING; + + var complete = function() { + // fire complete or after cb + if (o.after||o.complete) (o.after||o.complete).apply(self.target, [o, self]); + }; + + // drag synchronously + if (/^sync$/i.test(o.speed)) { + self.down(target); + + var mdx = Math.abs(dx)||0, mdy = Math.abs(dy)||0, range = Math.max(mdx, mdy), + sx = dx/mdx||1, sy = dy/mdy||1; + + for (var dt = 1; dt <= range; dt++) { + var x = center.x + sx*(dt <= mdx ? dt : 0), y = center.y + sy*(dt <= mdy ? dt : 0); + this.move(target, x, y, o.drag); + } + self.up(target); + complete(); + return; + } + + // drag asynchronously - animated + fake = fake.size() ? fake : + $(StringPool.FAKE_CURSOR_DIV) + .css({ position: StringPool.ABSOLUTE }).appendTo(document.body); + + fake + .animate({ left: center.x, top: center.y }, speed, easing, function(){ + self.down(target); + }) + .animate({ left: center.x + (dx||0), top: center.y + (dy||0) }, { + speed: speed, + easing: easing, + step: function(i, anim) { + lastx = anim.prop == StringPool.LEFT ? i : lastx; + lasty = anim.prop == StringPool.TOP ? i : lasty; + self.move(target, lastx, lasty, o.drag); + }, + complete: function() { + + self.up(target); + + // remove fake cursor + $(this).remove(); + + complete(); + + // trigger drag queue + var queue = $.data(self.target, StringPool.DATA_QUEUE); + if (queue) queue.shift(); + + if (queue && queue[0]) { + // trigger drag on correct instance + queue[0][2].drag(queue[0][0], queue[0][1]); + } + else + $.removeData(self.target, StringPool.DATA_QUEUE); + } + }); + }, + + mouseEvent: function(EVT) { + var evt, type = this.type, o = this.options; + + //check for DOM-compliant browsers + if ($.isFunction(document.createEvent)) { + evt = document.createEvent(StringPool.MOUSE_EVENTS); + + //Safari 2.x doesn't implement initMouseEvent() + if ($.isFunction(evt.initMouseEvent)) { + evt.initMouseEvent(type, + EVT.bubbles, EVT.cancelable, EVT.view, EVT.detail, + EVT.screenX, EVT.screenY, EVT.clientX, EVT.clientY, + EVT.ctrlKey, EVT.altKey, EVT.shiftKey, EVT.metaKey, + EVT.button, EVT.relatedTarget); + } else { + // Safari + evt = document.createEvent(StringPool.UI_EVENTS); + customEvent.initEvent(type, EVT.bubbles, EVT.cancelable); + $.extend(evt, EVT); + } + + // check to see if relatedTarget has been assigned + if (EVT.relatedTarget && !evt.relatedTarget){ + if (type == StringPool.MOUSEOUT) { + evt.toElement = EVT.relatedTarget; + } else if (type == StringPool.MOUSEOVER) { + evt.fromElement = EVT.relatedTarget; + } + } + // fire the event + this.target.dispatchEvent(evt); + + } else if (document.createEventObject) { + evt = document.createEventObject(); + + // assign available properties + $.extend(evt, EVT) + + // IE won't allow assignment to toElement or fromElement + evt.relatedTarget = EVT.relatedTarget; + + // fix for 2 pixels bug from mousecords + evt.pageX = o.x; evt.pageY = o.y; + + // fire the event + this.target.fireEvent(StringPool.ON + type, evt); + } + + return evt; + }, + + keyboardEvent: function(EVT) { + var evt, type = this.type, o = this.options; + + // check for DOM-compliant browsers first + if ($.isFunction(document.createEvent)) { + + try { + // try to create key event + evt = document.createEvent(StringPool.KEY_EVENTS); + + evt.initKeyEvent(type, + EVT.bubbles, EVT.cancelable, EVT.view, EVT.ctrlKey, + EVT.altKey, EVT.shiftKey, EVT.metaKey, EVT.keyCode, EVT.charCode); + + } catch (err) { + // we need another try-catch for Safari 2.x + try { + // generic event for opera and webkit nightlies, will fail in Safari 2.x + evt = document.createEvent(StringPool.EVENTS); + } catch (ierr){ + // Safari 2.x - create a UIEvent + evt = document.createEvent(StringPool.UI_EVENTS); + } finally { + evt.initEvent(type, EVT.bubbles, EVT.cancelable); + + // initializing + $.each(EVT, function(k, v) { + // using try-catch for avoiding Opera NO_MODIFICATION_ALLOWED_ERR + try { evt[k] = v; } catch(e) { } + }); + } + } + + // fire the event + this.target.dispatchEvent(evt); + + } else if (document.createEventObject) { + // create an IE event object + evt = document.createEventObject(); + + // assign available properties + $.extend(evt, EVT); + + // IE doesn't support charCode explicitly + evt.keyCode = (EVT.charCode > 0) ? EVT.charCode : EVT.keyCode; + + // fire the event + this.target.fireEvent(StringPool.ON + type, evt); + } + + return evt; + }, + + findCenter: function(offset) { + var el = $(this.target), o = el.offset(); + return { + x: o.left + (((offset||[0, 0])[0]) || 0) + el.outerWidth() / 2, + y: o.top + (((offset||[0, 0])[1]) || 0) + el.outerHeight() / 2 + }; + } +}); + +$.extend($.userAction, { + defaults: { + center: true + } +}); + +var StringPool = { + ON: 'on', + NUMBER: 'number', + MOUSEOVER: 'mouseover', + MOUSEOUT: 'mouseout', + MOUSEDOWN: 'mousedown', + MOUSEUP: 'mouseup', + MOUSEMOVE: 'mousemove', + MOUSE_EVENTS: 'MouseEvents', + UI_EVENTS: 'UIEvents', + KEY_EVENTS: 'KeyEvents', + EVENTS: 'Events', + FAKE_CURSOR_EXP: 'div.ui-fake-cursor', + FAKE_CURSOR_DIV: '<div class="ui-fake-cursor"/>', + ABSOLUTE: 'absolute', + DATA_QUEUE: 'ua-drag-queue', + TOP: 'top', + LEFT: 'left', + SLOW: 'slow', + SWING: 'swing' +}; + +})(jQuery);
\ No newline at end of file diff --git a/tests/resizable.html b/tests/resizable.html new file mode 100644 index 000000000..685ec88c9 --- /dev/null +++ b/tests/resizable.html @@ -0,0 +1,41 @@ +<!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.6.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> +<script type="text/javascript" src="jquery.simulate.js"></script> + +</head> + +<style> + #main { + position: absolute !important; + top: -1000px !important; + left: -1000px !important; + } +</style> + +<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: 100px; height: 100px;">I'm a resizable.</div> + <img src="images/test.jpg" id='resizable2' style="width: 100px; height: 100px;"/> + </div> + + <ol id="tests"></ol> + <div class="ui-fake-cursor"/> +</body> +</html> diff --git a/tests/resizable.js b/tests/resizable.js new file mode 100644 index 000000000..48582e016 --- /dev/null +++ b/tests/resizable.js @@ -0,0 +1,400 @@ +/* + * resizable tests + */ + +var drag = function(el, dx, dy, complete) { + + // speed = sync -> Drag syncrhonously. + // speed = fast|slow -> Drag asyncrhonously - animated. + + return $(el).simulate("drag", { + dx: dx||0, dy: dy||0, speed: 'sync', complete: complete + }); +}; + +module("Simple Resize"); + +test("ui-resizable-e resize x", function() { + + var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(2); + + drag(handle, 50); + + equals( target.width(), 150, "compare width"); + + drag(handle, -50); + + equals( target.width(), 100, "compare width" ); + +}); + +test("ui-resizable-w resize x", function() { + + var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(2); + + drag(handle, -50); + + equals( target.width(), 150, "compare width" ); + + drag(handle, 50); + + equals( target.width(), 100, "compare width" ); + +}); + +test("ui-resizable-n resize y", function() { + + var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(2); + + drag(handle, 0, -50); + + equals( target.height(), 150, "compare height" ); + + drag(handle, 0, 50); + + equals( target.height(), 100, "compare height" ); + +}); + +test("ui-resizable-s resize y", function() { + + var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(2); + + drag(handle, 0, 50); + + equals( target.height(), 150, "compare height" ); + + drag(handle, 0, -50); + + equals( target.height(), 100, "compare height" ); + +}); + +test("ui-resizable-se resize xy", function() { + + var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(4); + + drag(handle, 50, 50); + + equals( target.width(), 150, "compare width" ); + equals( target.height(), 150, "compare height" ); + + drag(handle, -50, -50); + + equals( target.width(), 100, "compare width" ); + equals( target.height(), 100, "compare height" ); + +}); + +test("ui-resizable-sw resize xy", function() { + + var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(4); + + drag(handle, -50, -50); + + equals( target.width(), 150, "compare width" ); + equals( target.height(), 50, "compare height" ); + + drag(handle, 50, 50); + + equals( target.width(), 100, "compare width" ); + equals( target.height(), 100, "compare height" ); + +}); + +test("ui-resizable-ne resize xy", function() { + + var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' }); + + expect(4); + + drag(handle, -50, -50); + + equals( target.width(), 50, "compare width" ); + equals( target.height(), 150, "compare height" ); + + drag(handle, 50, 50); + + equals( target.width(), 100, "compare width" ); + equals( target.height(), 100, "compare height" ); + +}); + +test("ui-resizable-nw resize xy", function() { + + var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all' }); + + expect(4); + + drag(handle, -50, -50); + + equals( target.width(), 150, "compare width" ); + equals( target.height(), 150, "compare height" ); + + drag(handle, 50, 50); + + equals( target.width(), 100, "compare width" ); + equals( target.height(), 100, "compare height" ); + +}); + +/** + * Conditional Resize + * min/max Height/Width + */ + +module("Dimensions limit"); + +test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + + var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + expect(4); + + drag(handle, -50, -50); + + equals( target.width(), 60, "compare minWidth" ); + equals( target.height(), 60, "compare minHeight" ); + + drag(handle, 70, 70); + + equals( target.width(), 100, "compare maxWidth" ); + equals( target.height(), 100, "compare maxHeight" ); + +}); + +test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + + var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + expect(4); + + drag(handle, 50, -50); + + equals( target.width(), 60, "compare minWidth" ); + equals( target.height(), 60, "compare minHeight" ); + + drag(handle, -70, 70); + + equals( target.width(), 100, "compare maxWidth" ); + equals( target.height(), 100, "compare maxHeight" ); + +}); + +test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + + var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + expect(4); + + drag(handle, -50, 50); + + equals( target.width(), 60, "compare minWidth" ); + equals( target.height(), 60, "compare minHeight" ); + + drag(handle, 70, -70); + + equals( target.width(), 100, "compare maxWidth" ); + equals( target.height(), 100, "compare maxHeight" ); + +}); + +test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + + var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + expect(4); + + drag(handle, 70, 70); + + equals( target.width(), 60, "compare minWidth" ); + equals( target.height(), 60, "compare minHeight" ); + + drag(handle, -70, -70); + + equals( target.width(), 100, "compare maxWidth" ); + equals( target.height(), 100, "compare maxHeight" ); + +}); + +/** + * Respecting ratio resize with dimensions limit + */ + +module("Respecting ratio resize with dimensions limits"); + +test("ui-resizable-e { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, 80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, -130); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-w { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, -80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, 130); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-n { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, 0, -80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, 0, 80); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-s { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, 0, 80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, 0, -80); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-se { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, 80, 80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, -80, -80); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-sw { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, -80, 80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, 80, -80); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +test("ui-resizable-ne { aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }", function() { + + var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + expect(4); + + drag(handle, 80, -80); + + equals( target.width(), 130, "compare maxWidth"); + equals( target.height(), 130, "compare maxHeight"); + + drag(handle, -80, 80); + + equals( target.width(), 70, "compare minWidth"); + equals( target.height(), 70, "compare minHeight"); + +}); + +module("Options"); + +test("ui-resizable-se { handles: 'all', grid: [0, 20] }", function() { + + var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', grid: [0, 20] }); + + expect(4); + + drag(handle, 3, 9); + + equals( target.width(), 103, "compare width"); + equals( target.height(), 100, "compare height"); + + drag(handle, 15, 11); + + equals( target.width(), 118, "compare width"); + equals( target.height(), 120, "compare height"); + +}); + +test("ui-resizable-se { handles: 'all', grid: [0, 20] } wrapped", function() { + + var handle = '.ui-resizable-se', target = $('#resizable2').resizable({ handles: 'all', grid: [0, 20] }); + + expect(4); + + drag(handle, 3, 9); + + equals( target.width(), 103, "compare width"); + equals( target.height(), 100, "compare height"); + + drag(handle, 15, 11); + + equals( target.width(), 118, "compare width"); + equals( target.height(), 120, "compare height"); + +}); diff --git a/tests/simulate/jquery.simulate.js b/tests/simulate/jquery.simulate.js new file mode 100644 index 000000000..f5168bf3b --- /dev/null +++ b/tests/simulate/jquery.simulate.js @@ -0,0 +1,141 @@ +/*
+ * jquery.simulate - simulate browser mouse and keyboard events
+ *
+ * Copyright (c) 2007 Eduardo Lundgren (eduardolundgren@gmail.com)
+ * and Richard D. Worth (rdworth@gmail.com)
+ *
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ */
+
+;(function($) {
+
+$.fn.extend({
+ simulate: function(type, options) {
+ return this.each(function() {
+ var opt = $.extend({}, $.simulate.defaults, options || {});
+ new $.simulate(this, type, opt);
+ });
+ }
+});
+
+$.simulate = function(el, type, options) {
+ this.target = el;
+ this.options = options;
+
+ if (/^drag$/.test(type)) {
+ this[type].apply(this, [this.target, options]);
+ } else {
+ this.simulateEvent(el, type, options);
+ }
+}
+
+$.extend($.simulate.prototype, {
+ simulateEvent: function(el, type, options) {
+ var evt = this.createEvent(type, options);
+ this.dispatchEvent(el, type, evt, options);
+ return evt;
+ },
+ createEvent: function(type, options) {
+ if (/^mouse(over|out|down|up|move)|(dbl)?click$/.test(type)) {
+ return this.mouseEvent(type, options);
+ } else if (/^key(up|down|press)$/.test(type)) {
+ return this.keyboardEvent(type, options);
+ }
+ },
+ mouseEvent: function(type, options) {
+ var evt;
+ var e = $.extend({
+ bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
+ screenX: 0, screenY: 0, clientX: 0, clientY: 0,
+ ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
+ button: 0, relatedTarget: undefined
+ }, options);
+
+ var relatedTarget = $(e.relatedTarget)[0];
+
+ if ($.isFunction(document.createEvent)) {
+ evt = document.createEvent("MouseEvents");
+ evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
+ e.screenX, e.screenY, e.clientX, e.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ e.button, e.relatedTarget || document.body.parentNode);
+ } else if (document.createEventObject) {
+ evt = document.createEventObject();
+ $.extend(evt, e);
+ evt.button = { 0:1, 1:4, 2:2 }[evt.button] || evt.button;
+ }
+ return evt;
+ },
+ keyboardEvent: function(type, options) {
+ var evt;
+
+ var e = $.extend({ bubbles: true, cancelable: true, view: window,
+ ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
+ keyCode: 0, charCode: 0
+ }, options);
+
+ if ($.isFunction(document.createEvent)) {
+ try {
+ evt = document.createEvent("KeyEvents");
+ evt.initKeyEvent(type, e.bubbles, e.cancelable, e.view,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ e.keyCode, e.charCode);
+ } catch(err) {
+ evt = document.createEvent("Events");
+ evt.initEvent(type, e.bubbles, e.cancelable);
+ $.extend(evt, { view: e.view,
+ ctrlKey: e.ctrlKey, altKey: e.altKey, shiftKey: e.shiftKey, metaKey: e.metaKey,
+ keyCode: e.keyCode, charCode: e.charCode
+ });
+ }
+ } else if (document.createEventObject) {
+ evt = document.createEventObject();
+ $.extend(evt, e);
+ }
+ if ($.browser.msie || $.browser.opera) {
+ evt.keyCode = (e.charCode > 0) ? e.charCode : e.keyCode;
+ evt.charCode = undefined;
+ }
+ return evt;
+ },
+
+ dispatchEvent: function(el, type, evt) {
+ if (el.dispatchEvent) {
+ el.dispatchEvent(evt);
+ } else if (el.fireEvent) {
+ el.fireEvent('on' + type, evt);
+ }
+ return evt;
+ },
+
+ drag: function(el) {
+ var self = this, center = this.findCenter(this.target),
+ options = this.options, x = Math.floor(center.x), y = Math.floor(center.y),
+ dx = options.dx || 0, dy = options.dy || 0, target = this.target;
+ var coord = { clientX: x, clientY: y };
+ this.simulateEvent(target, "mouseover");
+ this.simulateEvent(target, "mousedown", coord);
+ coord = { clientX: x + dx, clientY: y + dy };
+ this.simulateEvent(document, "mousemove", coord);
+ this.simulateEvent(document, "mousemove", coord);
+ this.simulateEvent(target, "mouseup", coord);
+ this.simulateEvent(target, "mouseout");
+ },
+ findCenter: function(el) {
+ var el = $(this.target), o = el.offset();
+ return {
+ x: o.left + el.outerWidth() / 2,
+ y: o.top + el.outerHeight() / 2
+ };
+ }
+});
+
+$.extend($.simulate, {
+ defaults: {
+ speed: 'sync'
+ }
+});
+
+})(jQuery);
diff --git a/tests/slider.html b/tests/slider.html new file mode 100644 index 000000000..090cfd2bf --- /dev/null +++ b/tests/slider.html @@ -0,0 +1,33 @@ +<!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>Slider Test Page</title> +<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + +<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> +<script type="text/javascript" src="../source/ui.core.js"></script> +<script type="text/javascript" src="../source/ui.slider.js"></script> + +<script type="text/javascript" src="../../qunit/testrunner.js"></script> +<script type="text/javascript" src="slider.js"></script> +<script type="text/javascript" src="jquery.simulate.js"></script> +</head> +<body> + + <h1 id="header">jQuery Test Suite</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <div id="main" style="position:absolute;top:-20000px"> + <div id='slider1'></div> + <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;"> + <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> + </div> + </div> + + <ol id="tests"></ol> + +</body> +</html> diff --git a/tests/slider.js b/tests/slider.js new file mode 100644 index 000000000..7b6d095a5 --- /dev/null +++ b/tests/slider.js @@ -0,0 +1,110 @@ + +var keyCodes = { + leftArrow: 37, + upArrow: 38, + rightArrow: 39, + downArrow: 40 +}; + +$.each(keyCodes, function(key, val) { + $.fn[key] = function() { + return this.simulate("keydown", { keyCode: val }); + } +}); + +function assertChange(stepping, start, result, action) { + return function() { + expect(1); + var slider = $("#slider3").slider({ + stepping: stepping, + startValue: start, + min: 0, + max: 1000, + change: function(e, ui) { + equals(ui.value, result, "changed to " + ui.value); + } + }); + action.apply(slider); + } +} + +module("slider: single handle") + +test("change one step via keydown", assertChange(1, undefined, 1, function() { + this.find("a").rightArrow(); +})) +test("change - 10 steps via keydown", assertChange(10, 20, 10, function() { + this.find("a").leftArrow(); +})) +test("change +10 steps via keydown", assertChange(10, 20, 30, function() { + this.find("a").rightArrow(); +})) + +test("moveTo, absolute value", assertChange(1, 1, 10, function() { + this.slider("moveTo", 10); +})) + +test("moveTo, absolute value as string", assertChange(1, 1, 10, function() { + this.slider("moveTo", "10"); +})) + +test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() { + this.slider("moveTo", -10); +})) + +test("moveTo, relative positive value", assertChange(1, 1, 11, function() { + this.slider("moveTo", "+=10"); +})) + +test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() { + this.slider("moveTo", "+=2000"); +})) + +test("moveTo, relative negative value", assertChange(1, 20, 10, function() { + this.slider("moveTo", "-=10"); +})) + +test("options update min/max", function() { + expect(2); + var slider = $("#slider3").slider({ + stepping: 1, + startValue: 1 + }); + slider.slider("moveTo", "-=10"); + equals(slider.slider("value"), 0); + slider.data("min.slider", -10); + slider.slider("moveTo", "-=20"); + equals(slider.slider("value"), -10); +}) + +module("slider: setup and teardown"); + +test("destroy and recreate", function() { + expect(3) + var slider = $("#slider3").slider(); + slider.slider("moveTo", "+=20"); + equals(slider.slider("value"), 20); + slider.slider("destroy"); + + slider.slider("moveTo", "+=30"); + ok(true, "nothing happens after slider is destroyed"); + + slider.slider().slider("moveTo", "30"); + + equals(Math.round(slider.slider("value")), 30); +}) + +test("handle creation", function() { + var slider = $("#slider1"); + equals(slider.children().size(), 0); + slider.slider({ + handles: [ + { start: 0 }, + { start: 10 } + ] + }); + equals(slider.children().size(), 2); + var instance = $.data(slider[0], "slider") + equals(instance.handle.length, 2); + ok(instance.handle.jquery, "handle must be a jquery object") +})
\ No newline at end of file diff --git a/tests/ui.testmouse.js b/tests/ui.testmouse.js new file mode 100644 index 000000000..5c4d41204 --- /dev/null +++ b/tests/ui.testmouse.js @@ -0,0 +1,142 @@ +/* + * jQuery UI testMouse + * + * Copyright (c) 2008 Richard D. Worth (rdworth.org) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * Revision: $Id: $ + */ +;(function($) { + + var mouseX = 0; + var mouseY = 0; + + $(function() { + $(document).mousemove(function(e) { + if (e.isTrusted !== false) { + mouseX = e.pageX; + mouseY = e.pageY; + } + }); + }); + + $.widget("ui.testMouse", { + trackMouse: function() {}, + init: function() { + }, + destroy: function() { + }, + center: function(offset) { + var o = this.element.offset(); + return { + x: (o.left + (offset || [0, 0])[0] || 0) + this.element.width() / 2, + y: (o.top + (offset || [0, 0])[1] || 0) + this.element.height() / 2 + }; + }, + drag: function(dx, dy) { + var self = this; + + var center = this.center(); + this.left = center.x; + this.top = center.y; + + var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase(); + + var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/'); + var cursorUrl = function() { + return ['cursors', OS == 'other' ? 'win' : OS, self.element.css('cursor') + '.png'].join('/'); + } + var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none' + ($.browser.safari ? '.png' : '.cur')].join('/'); + + var fakemouse = $('<img src="' + defaultUrl + '" />'); + var realmouse = $('<img src="' + defaultUrl + '" />'); + if ($.browser.msie && $.browser.version == 6) { + fakemouse = $('<div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>'); + realmouse = $('<div><div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>'); + } + var mousescreen = $('<div/>'); + + var updateCursor = function() { + if ($.browser.msie && $.browser.version == 6) { + fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\''); + } else { + fakemouse.attr('src', cursorUrl()); + } + } + var resetCursor = function() { + if ($.browser.msie && $.browser.version == 6) { + fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\''); + } else { + fakemouse.attr('src', defaultUrl); + } + } + + var testStart = function() { + self.element.bind("mouseover", updateCursor).bind("mouseout", resetCursor); + fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 }); + realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 }); + mousescreen.appendTo('body').css({ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 5000 }) + .mousemove(function(e) { realmouse.css({ left: e.pageX, top: e.pageY }); return false; }) + .mousedown(function() { return false; }) + .mouseup(function() { return false; }); + mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair'); + ($.browser.opera && mousescreen.css('cursor', 'crosshair')); + } + var testStop = function() { + self.element.unbind("mouseover", updateCursor).unbind("mouseout", resetCursor); + mousescreen.remove(); + mouseX = realmouse.css("left"); + mouseY = realmouse.css("top"); + realmouse.remove(); + fakemouse.remove(); + self.options.complete.apply(); + } + + testStart(); + + this.lastX = null; + + var before = function() { + self.element.triggerHandler('mouseover'); + self.element.simulate("mousedown", { clientX: self.left, clientY: self.top }); + self.element.simulate("mousemove", { clientX: self.left, clientY: self.top }); + } + + var during = function(xory) { + if (!self.lastX) { + self.lastX = xory; + } else { + var x = self.lastX, y = xory; + self.element.simulate("mousemove", { clientX: x, clientY: y }); + self.lastX = null; + } + } + + var after = function() { + self.element.triggerHandler('mouseout'); + self.element.simulate("mouseup", { clientX: 0, clientY: 0 }); + testStop(); + } + + fakemouse + .animate({ left: this.left, top: this.top }, this.options.speed, before) + .animate({ left: this.left + dx, top: this.top + dy }, { + speed: this.options.speed, + easing: "swing", + step: during + }) + .animate({ left: this.left + dx, top: this.top + dy }, { + speed: this.options.speed, + easing: "swing", + complete: after + }); + + } + }); + + $.ui.testMouse.defaults = { + speed: "slow" + } + +})(jQuery); |