diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/tests/resizable.html | 140 | ||||
| -rw-r--r-- | ui/tests/resizable.js | 65 |
2 files changed, 55 insertions, 150 deletions
diff --git a/ui/tests/resizable.html b/ui/tests/resizable.html index b6df6e364..4580fbf2d 100644 --- a/ui/tests/resizable.html +++ b/ui/tests/resizable.html @@ -14,142 +14,28 @@ <script type="text/javascript" src="resizable.js"></script> <script type="text/javascript" src="jquery.useraction.js"></script> </head> + +<style> + .ui-fake-cursor { + position: absolute; + background: url(cursors/win/auto.png); + height: 32px; width: 32px; + top: 270px; left: 0px; + } +</style> + <body> <h1 id="header">jQuery Test Suite</h1> <h2 id="banner"></h2> <h2 id="userAgent"></h2> - <h2 id="log"></h2> + <h2 id="log" style="height: 50px;overflow-y:auto;"></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> - - <button id="btn">Start user action</button> - - <input type="text" id="key"> - + <div class="ui-fake-cursor"/> </body> -</html> - -<script> - - 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(); }); - }; - - $(function() { - - $('#resizable1').mouseover(function() { - $(this).css('background', 'red'); - }); - - $('#resizable1').mouseout(function() { - $(this).css('background', 'yellow'); - }); - - $('#key').keydown(function() { - console.log('keydown') - }); - - }); - - $('#btn').click(function() { - - - // TODO - works in all browsers, but have to fix a bug on opera - $('#key').userAction("keydown", { - charCode: 67, - keyCode: 67, - after: function(e) { - //console.log(e) - }, - before: function(e) { - //console.log(e) - } - }); - - - // mouseover on the center of the target - $('.ui-resizable-e').userAction("mouseover"); - - $('.ui-resizable-e').userAction("mousedown", { - after: function(e, x, y) { - animateClick({x:x, y:y}) - } - }); - - for (var x = 0; x < 40; x++) { - - // offset the center(x,y) in [dx, dy] - $('.ui-resizable-e').userAction("mousemove", [x++, 0]); - - // pre defined x, y - //$('.ui-resizable-e').userAction("mousemove", 200, 0); - - // with extended options - /*$('.ui-resizable-e').userAction("mousemove", { - center: [x++, 0] - });*/ - - } - - $('.ui-resizable-e').userAction("mouseup", { - after: function(e, x, y) { - animateClick({x:x, y:y}) - } - }); - - $('#main').userAction("mouseout", { - - target: '.ui-resizable-e', - - relatedTarget: '#resizable1', - - //x: $('#resizable1').offset().left, - - //y: $('#resizable1').offset().top, - - //bubbles: true, - - //cancelable: false, - - //view: window, - - //ctrlKey: false, - - //altKey: false, - - //shiftKey: false, - - //relatedTarget: null, - - //screenX: 0, - - //screenY: 0, - - //metaKey: false, - - //button: 0, - - //center: false, - - //center: [100, 100], - - before: function(e, x, y) { - console.log(e) - }, - after: function(e, x, y) { - console.log(e) - } - }); - - }); - - - -</script> +</html>
\ No newline at end of file diff --git a/ui/tests/resizable.js b/ui/tests/resizable.js index 0ed3e1e9b..d561f32a6 100644 --- a/ui/tests/resizable.js +++ b/ui/tests/resizable.js @@ -1,45 +1,64 @@ var console = console || { log: function(l) { - $('#log').append(l + '<br/>'); + $('#log').append(l + '<br/>').get(0).scrollTop = 10000; } }; +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 num = function(i) { return parseInt(i, 10); }; - $(document).ready(function() { - $("#resizable1").resizable({ - - //maxHeight: 200, - - 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); + + $('#resizable1').resizable({ + resize: function() { + //console.log('resize') } }); + $('.ui-resizable-se').userAction("drag", 100); + $('.ui-resizable-se').userAction("drag", 200, 50); + $('.ui-resizable-se').userAction("drag", 400); + $('.ui-resizable-se').userAction("drag", -600, -30); - return; - + return; + module("resizable: simple resize"); - test("simple drag", function() { + test("simple resize x", function() { - expect(1); - ok(true, "Resize element on the same position"); + $('#resizable1').resizable({ + resize: function() { + console.log('resize') + } + }); + + $('.ui-resizable-e').userAction("drag", 100); + $('.ui-resizable-e').userAction("drag", 200); + $('.ui-resizable-e').userAction("drag", 200); + + //expect(2); + //ok(false, "Resize element on the same position"); + }); + + /*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() ); + });*/ });
\ No newline at end of file |