From 396ed559a490507d07a605bd989e83d24e2d7f40 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:27:29 +0000 Subject: Add a new visual test for position --- tests/visual/position/position_within.html | 177 +++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 tests/visual/position/position_within.html (limited to 'tests') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html new file mode 100644 index 000000000..f30ee625f --- /dev/null +++ b/tests/visual/position/position_within.html @@ -0,0 +1,177 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + + + + +
+ Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +
Drag around the parent element to see collision detection in action. +
+ +
+
+ +
+

This is the position parent element.

+
+ +
+

to position

+
+ +
+

to position 2

+
+ +
+ position... +
+ my: + + +
+
+ at: + + +
+
+ offset: + +
+
+ collision: + + +
+
+ +
+
+ + + \ No newline at end of file -- cgit v1.2.3 From 0bda22f443ace20035ec4f049c60b951d5c82b03 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:29:27 +0000 Subject: Update title to reflect test --- tests/visual/position/position_within.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index f30ee625f..da97eb7e1 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -2,7 +2,7 @@ - Position Visual Test: Default + Position Visual Test: Containing Element -- cgit v1.2.3 From 7bca8c100445d1ab8da4f25bd9201408f5eb2174 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:44:24 +0000 Subject: Fix typos in original tests --- tests/unit/position/position_core.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index dbbda8a3b..b3f5d9b61 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } @@ -64,7 +64,6 @@ test( "positions", function() { center: 3, right: 6, top: 0, - center: 3, bottom: 6 }; var start = { left: 4, top: 4 }; @@ -351,7 +350,7 @@ test( "collision: flip, with offset", function() { collisionTest2({ collision: "flip", - at: "left-2 top-3", + at: "left-2 top-3" }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" ); }); -- cgit v1.2.3 From 17be87f34cb2651e7903db3911527c43f5c05ba1 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:48:01 +0000 Subject: Whitespace fix --- tests/unit/position/position_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index b3f5d9b61..613fffa02 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,7 +1,7 @@ (function( $ ) { function scrollTopSupport() { - $( window ).scrollTop( 1 ); + $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -- cgit v1.2.3 From dc66f02601eb3a46a93e5d08145e9b4580def237 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:50:16 +0000 Subject: Add tests for position's `within` --- tests/unit/position/position.html | 44 ++- tests/unit/position/position_core_within.js | 560 ++++++++++++++++++++++++++++ tests/visual/position/position_within.html | 1 + 3 files changed, 586 insertions(+), 19 deletions(-) create mode 100644 tests/unit/position/position_core_within.js (limited to 'tests') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e08..6e4373172 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,6 +16,7 @@ + @@ -34,29 +35,34 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6 -->
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 000000000..0ece93b69 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,560 @@ +(function( $ ) { + +$("#within-container").show(); + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} +var addTop = -20, + addLeft = -20; + +$.fn.addOffsets = function() { + var elOffset = this.offset(), + offset = $("#within-container").offset(); + + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; +}; + +test( "within: my, at, of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "within: multiple elements", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none", + within: $("#within-container") + }); + + same( result, elements ); + var expected = { top: addTop + 10, left: addLeft + 4 }; + elements.each(function() { + same( $( this ).addOffsets(), expected ); + }); +}); + +test( "within: positions", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.each( [ 0, 1 ], function( my ) { + $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { + $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { + definitions.push({ + my: my ? horizontal + " " + vertical : "left top", + at: !my ? horizontal + " " + vertical : "left top", + result: { + top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]), + left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]) + } + }); + }); + }); + }); + var el = $( "#el1" ); + $.each( definitions, function( index, definition ) { + el.position({ + my: definition.my, + at: definition.at, + of: "#parent", + collision: "none", + within: $("#within-container") + }); + same( el.addOffsets(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "within: of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + $( window ).scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() + 500 - 10, + left: addLeft + $( window ).width() + 200 - 10 + }, "window, scrolled" ); + $( window ).scrollTop( 0 ).scrollLeft( 0 ); + }*/ + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 300, + left: 200 + }, "event - left top, left top" ); + + event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); + $( "#elx" ).position({ + my: "left top", + at: "right bottom", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "within: using", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + expect( 6 ); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: addTop + 40, left: addLeft + 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: $("#within-container") + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: $("#within-container")[0], + within: $("#within-container") + }, config ) ); + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "within: collision: fit, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "within: collision: fit, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + + collisionTest2({ + collision: "fit", + at: "left-2 top-3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + + } + +}); + +test( "within: collision: flip, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); +}); + +test( "within: collision: flip, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + + collisionTest2({ + collision: "flip", + at: "left+2 top+3" + }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); +}); + +test( "within: collision: none, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + + collisionTest2({ + collision: "none" + }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); +}); + +test( "within: collision: none, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + + collisionTest2({ + collision: "none", + at: "left+2 top+3" + }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" ); + + collisionTest2({ + collision: "none", + at: "left-2 top-3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + + $( "#elx" ).css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "within: collision: flip, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +//test( "bug #5280: consistent results (avoid fractional values)", function() { +// var wrapper = $( "#bug-5280" ), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(), +// offset2 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(); +// same( offset1, offset2 ); +//}); + + + +}( jQuery ) ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index da97eb7e1..e53e9ddf6 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -76,6 +76,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } + $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); $( ".positionable" ).css( "opacity", 0.5 ); -- cgit v1.2.3 From c9c6908434b41df9fcfd55c38d2cbf58df9d2e04 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:51:49 +0000 Subject: Another whitespace fix --- tests/unit/position/position_core_within.js | 206 ++++++++++++++-------------- 1 file changed, 103 insertions(+), 103 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 0ece93b69..90c12c44b 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -3,33 +3,33 @@ $("#within-container").show(); function scrollTopSupport() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; } var addTop = -20, - addLeft = -20; - + addLeft = -20; + $.fn.addOffsets = function() { - var elOffset = this.offset(), - offset = $("#within-container").offset(); + var elOffset = this.offset(), + offset = $("#within-container").offset(); - elOffset.top -= offset.top; - elOffset.left -= offset.left; - - return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +38,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +47,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,23 +56,23 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", at: "left bottom", of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( result, elements ); @@ -83,10 +83,10 @@ test( "within: multiple elements", function() { }); test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + var definitions = []; var offsets = { left: 0, @@ -117,7 +117,7 @@ test( "within: positions", function() { at: definition.at, of: "#parent", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( el.addOffsets(), definition.result, "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); @@ -125,17 +125,17 @@ test( "within: positions", function() { }); test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +144,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,18 +153,18 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ my: "right bottom", at: "right bottom", of: document, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -176,7 +176,7 @@ test( "within: of", function() { at: "right bottom", of: $( document ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( document ).height() - 10, @@ -190,7 +190,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -202,7 +202,7 @@ test( "within: of", function() { at: "right bottom", of: $( window ), collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() - 10, @@ -216,7 +216,7 @@ test( "within: of", function() { at: "right bottom", of: window, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + $( window ).height() + 500 - 10, @@ -231,7 +231,7 @@ test( "within: of", function() { at: "left top", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +244,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +253,16 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +271,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +280,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,16 +289,16 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + expect( 6 ); var count = 0, @@ -309,7 +309,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: $("#within-container") }).addOffsets(); elems.position({ @@ -317,13 +317,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; same( this, elems[ count ], "correct context for call #" + count ); same( position, expectedPosition, "correct position for call #" + count ); count++; }, - within: $("#within-container") + within: $("#within-container") }); elems.each(function() { @@ -336,7 +336,7 @@ function collisionTest( config, result, msg ) { my: "left top", at: "right bottom", of: $("#within-container")[0], - within: $("#within-container") + within: $("#within-container") }, config ) ); same( elem.addOffsets(), result, msg ); } @@ -349,10 +349,10 @@ function collisionTest2( config, result, msg ) { } test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit" }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); @@ -364,10 +364,10 @@ test( "within: collision: fit, no offset", function() { test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "fit", at: "right+2 bottom+3" @@ -386,13 +386,13 @@ test( "within: collision: fit, with offset", function() { test( "within: collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); - + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -406,12 +406,12 @@ test( "within: collision: fit, window scrolled", function() { } }); - + test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip" }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); @@ -422,10 +422,10 @@ test( "within: collision: flip, no offset", function() { }); test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "flip", at: "right+2 bottom+3" @@ -443,10 +443,10 @@ test( "within: collision: flip, with offset", function() { }); test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none" }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); @@ -457,10 +457,10 @@ test( "within: collision: none, no offset", function() { }); test( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + collisionTest({ collision: "none", at: "right+2 bottom+3" @@ -478,10 +478,10 @@ test( "within: collision: none, with offset", function() { }); test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ @@ -520,10 +520,10 @@ test( "within: collision: fit, with margin", function() { }); test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + $( "#elx" ).css( "margin", 10 ); collisionTest({ -- cgit v1.2.3 From e31d707d93faafa6ba788de06688069015411adf Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 21:07:09 +0000 Subject: The qunit-fixture were preventing the results from being clicked. Make the results appear on top of the qunit-fixture --- tests/unit/position/position.html | 17 +++++++++-------- tests/unit/position/position_core_within.js | 2 -- 2 files changed, 9 insertions(+), 10 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 6e4373172..d71bae497 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -21,20 +21,21 @@ - -

jQuery UI Position Test Suite

-

-
-

-
    -
+
+

jQuery UI Position Test Suite

+

+
+

+
    +
+
-
+
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 90c12c44b..98a2f5943 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -555,6 +555,4 @@ test( "within: collision: flip, with margin", function() { // same( offset1, offset2 ); //}); - - }( jQuery ) ); -- cgit v1.2.3 From 2bf45db9a556cfdcdb62e568a61423f395156482 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:53:25 +0000 Subject: Update test to make things a bit easier to test --- tests/visual/position/position_within.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'tests') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index e53e9ddf6..a20ae7b56 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -19,6 +19,9 @@ height:100%; width:100%; margin:0; + /* force scroll bar*/ + min-height:800px; + min-width:800px; } .demo-description { text-align:center; @@ -76,7 +79,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); + $( ".demo" ).append("
").css("overflow","auto"); $( ".positionable" ).css( "opacity", 0.5 ); @@ -91,8 +94,9 @@ // reset offset before calculating it $( "#offset" ).val( "0" ); position(function( result ) { - $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + - " " + ( ui.offset.top - result.top ) ); + var demo = $( ".demo" ); + $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + + " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); position(); }); } -- cgit v1.2.3 From cf96d225325961a24d43bbfdfcf0023bb87e3101 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 21:57:16 +0000 Subject: position now passes all tests! 0/ --- tests/unit/position/position_core.js | 3 ++- tests/unit/position/position_core_within.js | 8 +++---- ui/jquery.ui.position.js | 33 ++++++++++++++++------------- 3 files changed, 23 insertions(+), 21 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 613fffa02..73b7026e6 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,7 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - win.scrollTop( 300 ).scrollLeft( 200 ); + $( window ).scrollTop( 300 ).scrollLeft( 200 ); collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,6 +323,7 @@ test( "collision: fit, window scrolled", function() { collision: "fit", at: "right+100 bottom+100" }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 98a2f5943..2f912c6b9 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -384,7 +384,7 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, window scrolled", function() { +test( "within: collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); @@ -396,15 +396,13 @@ test( "within: collision: fit, window scrolled", function() { collisionTest({ collision: "fit", at: "left-100 top-100" - }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + }, { top: addTop, left: addLeft }, "top left" ); collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); win.scrollTop( 0 ).scrollLeft( 0 ); - } - }); test( "within: collision: flip, no offset", function() { diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5ac19fcca..2b44c8f70 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -188,41 +188,45 @@ $.ui.position = { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().left, - outerWidth = isWindow ? within.width() : within.outerWidth(), - overLeft = - data.collisionPosition.left + withinOffset, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; + withinOffset = isWindow ? win.scrollLeft() : within.offset().left, + outerWidth = isWindow ? win.width() : within.outerWidth(), + overLeft = withinOffset - data.collisionPosition.left, + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, + newLeft; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - position.left = position.left + overLeft; + newLeft = position.left + overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - position.left = position.left - overRight; + newLeft = position.left - overRight; // adjust based on position and margin } else { - position.left = Math.max( position.left - data.collisionPosition.left, position.left ); + newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); } + position.left = newLeft; }, top: function( position, data ) { var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? 0 : within.offset().top, - outerHeight = isWindow ? within.height() : within.outerHeight(), - overTop = - data.collisionPosition.top + withinOffset, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; + withinOffset = isWindow ? win.scrollTop() : within.offset().top, + outerHeight = isWindow ? win.height() : within.outerHeight(), + overTop = withinOffset - data.collisionPosition.top, + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, + newTop; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - position.top = position.top + overTop; + newTop = position.top + overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - position.top = position.top - overBottom; + newTop = position.top - overBottom; // adjust based on position and margin } else { - position.top = Math.max( position.top - data.collisionPosition.top, position.top ); + newTop = Math.max( position.top - data.collisionPosition.top, position.top ); } + position.top = newTop; } }, flip: { @@ -273,7 +277,6 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - console.log(overBottom); if ( overTop < 0 || overBottom > 0) { position.top += myOffset + atOffset + offset; } -- cgit v1.2.3 From f798b046e0e25f1eea0ed695089c4f4502f9c18d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:21:52 +0000 Subject: Update core visual test to allow testing while the window is scrolled. --- tests/visual/position/position.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests') diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index da0ff5170..11932da0e 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -35,7 +35,7 @@ -- cgit v1.2.3 From e4a42991df74955294d0cfa95273722eb006969d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Mon, 16 May 2011 23:46:21 +0000 Subject: Removing unnecessary variables, caching 'within' in tests where its beneficial, and making some other changes based on the code review --- tests/unit/position/position_core.js | 5 +- tests/unit/position/position_core_within.js | 259 ++++++++-------------------- ui/jquery.ui.position.js | 20 +-- 3 files changed, 83 insertions(+), 201 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 73b7026e6..bd8e58612 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -314,7 +314,8 @@ test( "collision: fit, with offset", function() { test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { var win = $( window ); - $( window ).scrollTop( 300 ).scrollLeft( 200 ); + win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ collision: "fit", at: "left-100 top-100" @@ -323,7 +324,7 @@ test( "collision: fit, window scrolled", function() { collision: "fit", at: "right+100 bottom+100" }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); - + win.scrollTop( 0 ).scrollLeft( 0 ); } }); diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 2f912c6b9..c572329e5 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -1,14 +1,19 @@ (function( $ ) { -$("#within-container").show(); - function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } + +module( "position - within", { + setup: function(){ + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}).show(); + } +}); + var addTop = -20, addLeft = -20; - + $.fn.addOffsets = function() { var elOffset = this.offset(), offset = $("#within-container").offset(); @@ -19,17 +24,15 @@ $.fn.addOffsets = function() { return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; }; -test( "within: my, at, of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "my, at, of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); @@ -38,7 +41,7 @@ test( "within: my, at, of", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); @@ -47,7 +50,7 @@ test( "within: my, at, of", function() { at: "bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); @@ -56,16 +59,12 @@ test( "within: my, at, of", function() { at: "bar baz", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); }); -test( "within: multiple elements", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "multiple elements", function() { var elements = $( "#el1, #el2" ); var result = elements.position({ my: "left top", @@ -82,11 +81,7 @@ test( "within: multiple elements", function() { }); }); -test( "within: positions", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "positions", function() { var definitions = []; var offsets = { left: 0, @@ -124,18 +119,15 @@ test( "within: positions", function() { }); }); -test( "within: of", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "of", function() { + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left top", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); @@ -144,7 +136,7 @@ test( "within: of", function() { at: "left bottom", of: $( "#parentx"), collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); @@ -153,85 +145,17 @@ test( "within: of", function() { at: "left top", of: $( "#parentx" )[ 0 ], collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - // these tests are not valid for "within" since of is not contained by within. - /* - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: document, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( document ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( document ).height() - 10, - left: addLeft + $( document ).width() - 10 - }, "document as jQuery object" ); - - $( window ).scrollTop( 0 ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window" ); - - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: $( window ), - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() - 10, - left: addLeft + $( window ).width() - 10 - }, "window as jQuery object" ); - - if ( scrollTopSupport() ) { - $( window ).scrollTop( 500 ).scrollLeft( 200 ); - $( "#elx" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "none", - within: $("#within-container") - }); - same( $( "#elx" ).addOffsets(), { - top: addTop + $( window ).height() + 500 - 10, - left: addLeft + $( window ).width() + 200 - 10 - }, "window, scrolled" ); - $( window ).scrollTop( 0 ).scrollLeft( 0 ); - }*/ - var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); $( "#elx" ).position({ my: "left top", at: "left top", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 300, @@ -244,7 +168,7 @@ test( "within: of", function() { at: "right bottom", of: event, collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).offset(), { top: 600, @@ -253,16 +177,14 @@ test( "within: of", function() { }); test( "within:offsets", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - + var within = $("#within-container"); $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); @@ -271,7 +193,7 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); @@ -280,7 +202,7 @@ test( "within:offsets", function() { at: "left+50% bottom-10%", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); @@ -289,17 +211,15 @@ test( "within:offsets", function() { at: "left bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }); same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); }); -test( "within: using", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - - +test( "using", function() { expect( 6 ); + + var within = $("#within-container"); var count = 0, elems = $( "#el1, #el2" ), @@ -309,7 +229,7 @@ test( "within: using", function() { at: "rigt bottom", of: "#parentx", collision: "none", - within: $("#within-container") + within: within }).addOffsets(); elems.position({ @@ -317,13 +237,13 @@ test( "within: using", function() { at: "left top", of: "#parentx", using: function( position ) { - position.top -= $("#within-container").offset().top; - position.left -= $("#within-container").offset().left; + position.top -= within.offset().top; + position.left -= within.offset().left; same( this, elems[ count ], "correct context for call #" + count ); same( position, expectedPosition, "correct position for call #" + count ); count++; }, - within: $("#within-container") + within: within }); elems.each(function() { @@ -332,12 +252,15 @@ test( "within: using", function() { }); function collisionTest( config, result, msg ) { + var within = $("#within-container"); + var elem = $( "#elx" ).position( $.extend({ my: "left top", at: "right bottom", - of: $("#within-container")[0], - within: $("#within-container") + of: within[0], + within: within }, config ) ); + same( elem.addOffsets(), result, msg ); } @@ -348,14 +271,12 @@ function collisionTest2( config, result, msg ) { }, config ), result, msg ); } -test( "within: collision: fit, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -363,15 +284,13 @@ test( "within: collision: fit, no offset", function() { }); -test( "within: collision: fit, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); collisionTest2({ collision: "fit", @@ -384,14 +303,10 @@ test( "within: collision: fit, with offset", function() { }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); }); -test( "within: collision: fit, within scrolled", function() { +test( "collision: fit, within scrolled", function() { if ( scrollTopSupport() ) { - $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); - - - - var win = $("#within-container").css("overflow", "auto"); - win.scrollTop( 300 ).scrollLeft( 150 ); + var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}); + within.scrollTop( 300 ).scrollLeft( 150 ); collisionTest({ collision: "fit", @@ -400,15 +315,13 @@ test( "within: collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + win.height() - 10, left: addLeft + win.width() - 10 }, "right bottom" ); - win.scrollTop( 0 ).scrollLeft( 0 ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + within.scrollTop( 0 ).scrollLeft( 0 ); } }); -test( "within: collision: flip, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip" @@ -416,13 +329,11 @@ test( "within: collision: flip, no offset", function() { collisionTest2({ collision: "flip" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); + }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" ); }); -test( "within: collision: flip, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "flip", @@ -432,37 +343,33 @@ test( "within: collision: flip, with offset", function() { collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" ); collisionTest2({ collision: "flip", at: "left-2 top-3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" ); }); -test( "within: collision: none, no offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, no offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none" - }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + }, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" ); collisionTest2({ collision: "none" }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); }); -test( "within: collision: none, with offset", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: none, with offset", function() { + var within = $("#within-container"); collisionTest({ collision: "none", at: "right+2 bottom+3" - }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, with offset added" ); collisionTest2({ collision: "none", @@ -475,16 +382,14 @@ test( "within: collision: none, with offset", function() { }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); }); -test( "within: collision: fit, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: fit, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -497,7 +402,7 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); collisionTest2({ collision: "fit" @@ -510,24 +415,22 @@ test( "within: collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); collisionTest2({ collision: "fit" }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); }); -test( "within: collision: flip, with margin", function() { - $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); - - +test( "collision: flip, with margin", function() { + var within = $("#within-container"); $( "#elx" ).css( "margin", 10 ); collisionTest({ collision: "flip", at: "left top" - }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" ); collisionTest2({ collision: "flip", @@ -535,22 +438,4 @@ test( "within: collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); -//test( "bug #5280: consistent results (avoid fractional values)", function() { -// var wrapper = $( "#bug-5280" ), -// elem = wrapper.children(), -// offset1 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(), -// offset2 = elem.position({ -// my: "center", -// at: "center", -// of: wrapper, -// collision: "none" -// }).offset(); -// same( offset1, offset2 ); -//}); - }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 2b44c8f70..cea45dc2d 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -191,20 +191,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollLeft() : within.offset().left, outerWidth = isWindow ? win.width() : within.outerWidth(), overLeft = withinOffset - data.collisionPosition.left, - overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset, - newLeft; + overRight = data.collisionPosition.left + data.collisionWidth - outerWidth - withinOffset; // element is wider than window or too far left -> align with left edge if ( data.collisionWidth > outerWidth || overLeft > 0 ) { - newLeft = position.left + overLeft; + position.left += overLeft; // too far right -> align with right edge } else if ( overRight > 0 ) { - newLeft = position.left - overRight; + position.left -= overRight; // adjust based on position and margin } else { - newLeft = Math.max( position.left - data.collisionPosition.left, position.left ); + position.left = Math.max( position.left - data.collisionPosition.left, position.left ); } - position.left = newLeft; }, top: function( position, data ) { var within = data.within, @@ -213,20 +211,18 @@ $.ui.position = { withinOffset = isWindow ? win.scrollTop() : within.offset().top, outerHeight = isWindow ? win.height() : within.outerHeight(), overTop = withinOffset - data.collisionPosition.top, - overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset, - newTop; + overBottom = data.collisionPosition.top + data.collisionHeight - outerHeight - withinOffset; // element is taller than window or too far up -> align with top edge if ( data.collisionHeight > outerHeight || overTop > 0 ) { - newTop = position.top + overTop; + position.top += overTop; // too far down -> align with bottom edge } else if ( overBottom > 0 ) { - newTop = position.top - overBottom; + position.top -= overBottom; // adjust based on position and margin } else { - newTop = Math.max( position.top - data.collisionPosition.top, position.top ); + position.top = Math.max( position.top - data.collisionPosition.top, position.top ); } - position.top = newTop; } }, flip: { -- cgit v1.2.3 From cde7cc0e6f5981d74390fa75c2519b935a4d6e0c Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 01:15:05 +0000 Subject: updated tests to account for scrollbar width/height --- tests/unit/position/position_core_within.js | 37 ++++++++++++++++++++++++----- ui/jquery.ui.position.js | 2 +- 2 files changed, 32 insertions(+), 7 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index c572329e5..9c563b1a2 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,6 +4,31 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } +function getScrollbarWidth() { + var div = $( "
" ), + innerDiv = div.children()[0], + w1, w2; + $( "body" ).append( div ); + w1 = innerDiv.offsetWidth; + div.css( "overflow", "scroll" ); + + w2 = innerDiv.offsetWidth; + + if ( w1 === w2 ) { + w2 = div[0].clientWidth; + } + + div.remove(); + + return w1 - w2; +} +function getScrollInfo ( within ) { + var that = within[0], + scrollHeight = within.height() < that.scrollHeight, + scrollWidth = within.width() < that.scrollWidth, + scrollbarWidth = getScrollbarWidth(); + return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; +}; module( "position - within", { setup: function(){ @@ -276,7 +301,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -290,7 +315,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom"); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -315,7 +340,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" ); + }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -389,7 +414,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -402,7 +427,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20, left: addLeft + within.width() - 20 }, "right bottom" ); + }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -415,7 +440,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25, left: addLeft + within.width() - 25 }, "right bottom" ); + }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 678b5e3ea..e254ff9ff 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -139,7 +139,7 @@ $.fn.position = function( options ) { basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; - return this.each(function() { console.log(getScrollInfo( within )); + return this.each(function() { var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), -- cgit v1.2.3 From 40c008872154965d7572cda7911d42857e9fc3a9 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 14:22:12 +0000 Subject: Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position --- tests/unit/position/position_core_within.js | 37 +++++------------------------ tests/visual/position/position_within.html | 9 ++++++- ui/jquery.ui.position.js | 15 +++++++----- 3 files changed, 23 insertions(+), 38 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 9c563b1a2..567c17192 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,31 +4,6 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -function getScrollbarWidth() { - var div = $( "
" ), - innerDiv = div.children()[0], - w1, w2; - $( "body" ).append( div ); - w1 = innerDiv.offsetWidth; - div.css( "overflow", "scroll" ); - - w2 = innerDiv.offsetWidth; - - if ( w1 === w2 ) { - w2 = div[0].clientWidth; - } - - div.remove(); - - return w1 - w2; -} -function getScrollInfo ( within ) { - var that = within[0], - scrollHeight = within.height() < that.scrollHeight, - scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); - return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; -}; module( "position - within", { setup: function(){ @@ -301,7 +276,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -315,7 +290,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -340,7 +315,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -414,7 +389,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -427,7 +402,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -440,7 +415,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index a20ae7b56..ac1009d3e 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -22,6 +22,9 @@ /* force scroll bar*/ min-height:800px; min-width:800px; + + /* IE6 needs this */ + text-align:center; } .demo-description { text-align:center; @@ -29,8 +32,10 @@ } .demo-container { background:#aaa; - width:80%; + width:80%; height:80%; + + text-align:left; margin:0 auto; position:relative; padding:10px; @@ -40,6 +45,8 @@ overflow:hidden; position:relative; height:100%; + /* IE6 needs this */ + width:100%; } #parent { width: 60%; diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index e254ff9ff..5ebff5d16 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,8 +17,10 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position, - getScrollbarWidth = function() { + _position = $.fn.position; + +$.position = { + scrollbarWidth : function() { var div = $( "
" ), innerDiv = div.children()[0], w1, w2; @@ -36,13 +38,14 @@ var rhorizontal = /left|center|right/, return w1 - w2; }, - getScrollInfo = function( within ) { + getScrollInfo : function( within ) { var that = within[0], scrollHeight = within.height() < that.scrollHeight, scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); + scrollbarWidth = $.position.scrollbarWidth(); return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; - }; + } +}; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -145,7 +148,7 @@ $.fn.position = function( options ) { elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, - scrollInfo = getScrollInfo( within ), + scrollInfo = $.position.getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop + -- cgit v1.2.3 From 3dea8f1786e07b17458f4fecff1dbb8b04f79a2d Mon Sep 17 00:00:00 2001 From: Scott González Date: Thu, 9 Jun 2011 09:47:18 -0400 Subject: Widget: Added ability to get deep options. Fixes #7459 - Widget: Extend .option() to get partial nested options. --- tests/unit/widget/widget_core.js | 19 +++++++++++++++++++ ui/jquery.ui.widget.js | 14 +++++++++----- 2 files changed, 28 insertions(+), 5 deletions(-) (limited to 'tests') diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index b1c27b104..40fd97ba5 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -413,6 +413,7 @@ test( ".option() - getter", function() { qux: [ "quux", "quuux" ] }); + same( div.testWidget( "option", "x" ), null, "non-existent option" ); same( div.testWidget( "option", "foo"), "bar", "single option - string" ); same( div.testWidget( "option", "baz"), 5, "single option - number" ); same( div.testWidget( "option", "qux"), [ "quux", "quuux" ], @@ -431,6 +432,24 @@ test( ".option() - getter", function() { "modifying returned options hash does not modify plugin instance" ); }); +test( ".option() - deep option getter", function() { + $.widget( "ui.testWidget", {} ); + var div = $( "
" ).testWidget({ + foo: { + bar: "baz", + qux: { + quux: "xyzzy" + } + } + }); + equal( div.testWidget( "option", "foo.bar" ), "baz", "one level deep - string" ); + deepEqual( div.testWidget( "option", "foo.qux" ), { quux: "xyzzy" }, + "one level deep - object" ); + equal( div.testWidget( "option", "foo.qux.quux" ), "xyzzy", "two levels deep - string" ); + equal( div.testWidget( "option", "x.y" ), null, "top level non-existent" ); + equal( div.testWidget( "option", "foo.x.y" ), null, "one level deep - non-existent" ); +}); + test( ".option() - delegate to ._setOptions()", function() { var calls = []; $.widget( "ui.testWidget", { diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 00bc07c4f..59d110b6a 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -133,7 +133,7 @@ $.widget.bridge = function( name, object ) { } var methodValue = instance[ options ].apply( instance, args ); if ( methodValue !== instance && methodValue !== undefined ) { - returnValue = methodValue.jquery ? + returnValue = methodValue && methodValue.jquery ? returnValue.pushStack( methodValue.get() ) : methodValue; return false; @@ -239,9 +239,6 @@ $.Widget.prototype = { } if ( typeof key === "string" ) { - if ( value === undefined ) { - return this.options[ key ]; - } // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } } options = {}; parts = key.split( "." ); @@ -252,8 +249,15 @@ $.Widget.prototype = { curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {}; curOption = curOption[ parts[ i ] ]; } - curOption[ parts.pop() ] = value; + key = parts.pop(); + if ( value === undefined ) { + return curOption[ key ] === undefined ? null : curOption[ key ]; + } + curOption[ key ] = value; } else { + if ( value === undefined ) { + return this.options[ key ] === undefined ? null : this.options[ key ]; + } options[ key ] = value; } } -- cgit v1.2.3 From 7281f9f22904d97b3d244a1c8ed2450e6506d538 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 9 Jun 2011 17:14:21 +0200 Subject: Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults --- demos/menubar/default.html | 67 ++++-------------------------- tests/visual/position/position_within.html | 50 +++++++++++----------- ui/jquery.ui.menubar.js | 17 +++++--- 3 files changed, 43 insertions(+), 91 deletions(-) (limited to 'tests') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 79662bd9f..8f15be516 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -13,9 +13,10 @@ - - + + - - - - +
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
Drag around the parent element to see collision detection in action. @@ -126,15 +126,15 @@

This is the position parent element.

- +

to position

- +

to position 2

- +
position...
@@ -142,7 +142,7 @@ - +
- -
+ +
- \ No newline at end of file + diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index a0e9afb3c..39e75924e 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -21,7 +21,11 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { buttons: false, - menuIcon: false + menuIcon: false, + position: { + my: "left top", + at: "left bottom" + } }, _create: function() { var that = this; @@ -39,6 +43,9 @@ $.widget( "ui.menubar", { this._hoverable( items ); items.next( "ul" ) .menu({ + position: { + within: this.options.position.within + }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); that._trigger( "select", event, ui ); @@ -119,7 +126,7 @@ $.widget( "ui.menubar", { // TODO ui-menubar-link is added above, not needed here? input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" ); }; - + }); that._bind( { keydown: function( event ) { @@ -210,11 +217,9 @@ $.widget( "ui.menubar", { var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 ); this.active = menu .show() - .position( { - my: "left top", - at: "left bottom", + .position( $.extend({ of: button - }) + }, this.options.position ) ) .removeAttr( "aria-hidden" ) .attr( "aria-expanded", "true" ) .menu("focus", event, menu.children( "li" ).first() ) -- cgit v1.2.3 From 2c8151848d191ad9ba53c0ee86b14aefe4288f67 Mon Sep 17 00:00:00 2001 From: tomykaira Date: Thu, 9 Jun 2011 20:36:48 -0500 Subject: effects.core: Convert elements height/width to px and restore after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects --- tests/unit/effects/effects.html | 11 +++++++++++ tests/unit/effects/effects_core.js | 15 +++++++++++++++ ui/jquery.effects.blind.js | 2 +- ui/jquery.effects.bounce.js | 2 +- ui/jquery.effects.core.js | 8 +++++++- ui/jquery.effects.drop.js | 2 +- ui/jquery.effects.fold.js | 2 +- ui/jquery.effects.scale.js | 2 +- ui/jquery.effects.shake.js | 2 +- ui/jquery.effects.slide.js | 16 +++++++++------- 10 files changed, 48 insertions(+), 14 deletions(-) (limited to 'tests') diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 84fecd9cc..6956ebcda 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -54,6 +54,14 @@ .testChildren h2 { font-size: 20px; } + + .relWidth { + width: 50%; + } + + .relHeight { + height: 50%; + } @@ -70,6 +78,9 @@

Child Element Test

+
+

Slide with relative width +

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index ed9fbf9ba..4c685ebb6 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -54,6 +54,21 @@ $.each( $.effects.effect, function( effect ) { start(); })); }); + + asyncTest( "relative width & height - properties are preserved", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(), + cssWidth = test[0].style.width, cssHeight = test[0].style.height; + + expect( 4 ); + test.toggle( effect, minDuration, function() { + equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); + equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); + start(); + }); + equal( test.width(), width, "Width is the same px after animation started" ); + equal( test.height(), height, "Height is the same px after animation started" ); + }); }); module("animateClass"); diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 8ef544faa..b6485b641 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) { // Create element var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "hide" ), direction = o.direction || "up", vertical = rvertical.test( direction ), diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 9e1117ce9..78fedb0ce 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) { return this.queue( function( next ) { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], // defaults: mode = $.effects.setMode( el, o.mode || "effect" ), diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 7650aa8f4..00a803360 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -410,7 +410,12 @@ $.extend( $.effects, { border: "none", margin: 0, padding: 0 - }); + }), + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: element.width(), + height: element.height() + }; element.wrap( wrapper ); wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element @@ -438,6 +443,7 @@ $.extend( $.effects, { bottom: "auto" }); } + element.css(size); return wrapper.css( props ).show(); }, diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index 24fb89db0..4265b737b 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) { return this.queue( function() { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ], + props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ], mode = $.effects.setMode( el, o.mode || 'hide' ), direction = o.direction || 'left', ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index 29da090cb..6100c33a1 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = ['position','top','bottom','left','right','height','width'], mode = $.effects.setMode(el, o.mode || 'hide'), size = o.size || 15, percent = /([0-9]+)%/.exec(size), diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 00f0151af..fe0c03c53 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -116,7 +116,7 @@ $.effects.effect.size = function( o ) { // Set options mode = $.effects.setMode( el, o.mode || 'effect' ), - restore = o.restore || false, + restore = o.restore || mode !== "effect", scale = o.scale || 'both', origin = o.origin, original, baseline, factor; diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 550329ca4..52ab331e8 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) { return this.queue( function() { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "effect" ), direction = o.direction || "left", distance = o.distance || 20, diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 6b0296754..ccb13fa1b 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,24 +18,26 @@ $.effects.effect.slide = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = [ "position", "top", "bottom", "left", "right", "width", "height" ], mode = $.effects.setMode( el, o.mode || 'show' ), direction = o.direction || 'left', ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg', distance, - animation = {}; + animation = {}, + size; // Adjust - $.effects.save( el, props ); + $.effects.save( el, props ); el.show(); + distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ + margin: true + }); + $.effects.createWrapper( el ).css({ overflow: 'hidden' - }); - - distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ - margin: true }); + if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); } -- cgit v1.2.3 From ba9bd20c0d5a6ede11a536da9024bb1a582d131f Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 10:54:47 -0400 Subject: Accordion tests: Don't use deprecated assertion methods. --- tests/unit/accordion/accordion.html | 6 +-- tests/unit/accordion/accordion_core.js | 30 ++++++------- tests/unit/accordion/accordion_deprecated.html | 6 +-- tests/unit/accordion/accordion_deprecated.js | 48 ++++++++++----------- tests/unit/accordion/accordion_events.js | 58 +++++++++++++------------- tests/unit/accordion/accordion_options.js | 30 ++++++------- 6 files changed, 89 insertions(+), 89 deletions(-) (limited to 'tests') diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index c260ef22f..ef20c057e 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -25,7 +25,7 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } function equalHeights( accordion, min, max ) { var sizes = []; @@ -34,8 +34,8 @@ }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 280339c26..000470d0b 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -10,7 +10,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ ".ui-accordion-header elements exist, correct number" ); equal( element.find( ".ui-accordion-content" ).length, 3, ".ui-accordion-content elements exist, correct number" ); - same( element.find( ".ui-accordion-header" ).next().get(), + deepEqual( element.find( ".ui-accordion-header" ).next().get(), element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); }); @@ -26,7 +26,7 @@ test( "ui-accordion-heading class added to headers anchor", function() { expect( 1 ); var element = $( "#list1" ).accordion(); var anchors = element.find( ".ui-accordion-heading" ); - equals( anchors.length, 3 ); + equal( anchors.length, 3 ); }); test( "accessibility", function () { @@ -34,20 +34,20 @@ test( "accessibility", function () { var element = $( "#list1" ).accordion().accordion( "option", "active", 1 ); var headers = element.find( ".ui-accordion-header" ); - equals( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); - equals( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); - equals( element.attr( "role" ), "tablist", "main role" ); - equals( headers.attr( "role" ), "tab", "tab roles" ); - equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); + equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); + equal( element.attr( "role" ), "tablist", "main role" ); + equal( headers.attr( "role" ), "tab", "tab roles" ); + equal( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); element.accordion( "option", "active", 0 ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index e8254f4f3..2e754fe6a 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -22,7 +22,7 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } function equalHeights( accordion, min, max ) { var sizes = []; @@ -31,8 +31,8 @@ }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 0435f48a7..733cb82b0 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -237,11 +237,11 @@ test( "changestart", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -249,13 +249,13 @@ test( "changestart", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -263,12 +263,12 @@ test( "changestart", function() { accordion_state( element, 0, 1, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -285,34 +285,34 @@ test( "change", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); }); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/accordion_events.js index 2438f28ea..d704e54c8 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/accordion_events.js @@ -13,11 +13,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -25,14 +25,14 @@ test( "beforeActivate", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionbeforeactivate", function( event, ui ) { - equals( event.originalEvent.type, "click" ); - equals( ui.oldHeader.size(), 1 ); + equal( event.originalEvent.type, "click" ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -41,12 +41,12 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -54,11 +54,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 2 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 2 ] ); event.preventDefault(); accordion_state( element, 0, 0, 0 ); @@ -77,34 +77,34 @@ test( "activate", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 7bd6f2e74..57762dec8 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -4,7 +4,7 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { var element = $( "#list1" ).accordion(); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); @@ -14,12 +14,12 @@ test( "{ active: false }", function() { collapsible: true }); accordion_state( element, 0, 0, 0 ); - equals( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); - equals( element.accordion( "option", "active" ), false ); + equal( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); + equal( element.accordion( "option", "active" ), false ); element.accordion( "option", "collapsible", false ); accordion_state( element, 1, 0, 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); element.accordion( "destroy" ); element.accordion({ @@ -33,19 +33,19 @@ test( "{ active: Number }", function() { var element = $( "#list1" ).accordion({ active: 2 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", 10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); }); @@ -54,19 +54,19 @@ if ( $.uiBackCompat === false ) { var element = $( "#list1" ).accordion({ active: -1 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", -2 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -3 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); } @@ -101,7 +101,7 @@ test( "{ collapsible: true }", function() { accordion_state( element, 0, 1, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), false ); + equal( element.accordion( "option", "active" ), false ); accordion_state( element, 0, 0, 0 ); }); @@ -238,8 +238,8 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { test( "{ icons: false }", function() { var element = $( "#list1" ); function icons( on ) { - same( element.find( "span.ui-icon").length, on ? 3 : 0 ); - same( element.hasClass( "ui-accordion-icons" ), on ); + deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); + deepEqual( element.hasClass( "ui-accordion-icons" ), on ); } element.accordion(); icons( true ); -- cgit v1.2.3 From 2bc66279912b460f572abff0d502e8e2c9c285a7 Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 14:09:44 -0400 Subject: Autocomplete tests: Cleanup. --- tests/unit/autocomplete/autocomplete.html | 60 ++--- tests/unit/autocomplete/autocomplete_core.js | 106 ++++---- tests/unit/autocomplete/autocomplete_events.js | 337 ++++++++++++------------ tests/unit/autocomplete/autocomplete_methods.js | 55 ++-- tests/unit/autocomplete/autocomplete_options.js | 317 +++++++++------------- 5 files changed, 405 insertions(+), 470 deletions(-) (limited to 'tests') diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index 8f1d9db9a..a69562d3f 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -1,46 +1,44 @@ - + - + jQuery UI Autocomplete Test Suite - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - +

jQuery UI Autocomplete Test Suite

-
    -
- +
    -
    -
    -
    -
    +
    +
    +
    +
    diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 19f52dc15..3f92aa01f 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -1,73 +1,83 @@ -/* - * autocomplete_core.js - */ +(function( $ ) { +module( "autocomplete: core" ); -(function($) { +asyncTest( "close-on-blur is properly delayed", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); -module("autocomplete: core", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - -test("close-on-blur is properly delayed", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - stop(); + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); + ok( menu.is( ":hidden") ); start(); - }, 200); + }, 200 ); }); -test("close-on-blur is cancelled when starting a search", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("search"); - stop(); +asyncTest( "close-on-blur is cancelled when starting a search", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); + element.autocomplete( "search" ); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); + ok( menu.is( ":visible" ) ); start(); - }, 200); + }, 200 ); }); test( "prevent form submit on enter when menu is active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 2 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.DOWN; - ac.trigger( event ); - same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); - + element.trigger( event ); + deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( event.isDefaultPrevented(), "default action is prevented" ); }); test( "allow form submit on enter when menu is not active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - autoFocus: false, - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 1 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( !event.isDefaultPrevented(), "default action is prevented" ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js index c884733d6..c6d42ddcc 100644 --- a/tests/unit/autocomplete/autocomplete_events.js +++ b/tests/unit/autocomplete/autocomplete_events.js @@ -1,206 +1,197 @@ -/* - * autocomplete_events.js - */ -(function($) { +(function( $ ) { -module("autocomplete: events", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); +module( "autocomplete: events" ); var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ]; -test("all events", function() { - expect(14); - var ac = $("#autocomplete").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().val("j").keydown(); +asyncTest( "all events", function() { + expect( 13 ); + var element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().val( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); // blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("all events - contenteditable", function() { - expect(14); - var ac = $("#autocomplete-contenteditable").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().text("j").keydown(); +asyncTest( "all events - contenteditable", function() { + expect( 13 ); + var element = $( "#autocomplete-contenteditable" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().text( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - // blurring through jQuery causes a bug in IE 6 which causes the + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + // TODO: blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("change without selection", function() { - expect(2); - stop(); - var ac = $("#autocomplete").autocomplete({ +asyncTest( "change without selection", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ delay: 0, source: data, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, null); + change: function( event, ui ) { + strictEqual( ui.item, null ); start(); } }); - ac.triggerHandler("focus"); - ac.val("ja").triggerHandler("blur"); + element.triggerHandler( "focus" ); + element.val( "ja" ).triggerHandler( "blur" ); }); -test("cancel search", function() { - expect(6); - var first = true; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - search: function() { - if (first) { - same( ac.val(), "ja" ); - first = false; - return false; +asyncTest( "cancel search", function() { + expect( 6 ); + var first = true, + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + search: function() { + if ( first ) { + equal( element.val(), "ja", "val on first search" ); + first = false; + return false; + } + equal( element.val(), "java", "val on second search" ); + }, + open: function() { + ok( true, "menu opened" ); } - same( ac.val(), "java" ); - }, - open: function() { - ok(true); - } - }); - stop(); - ac.val("ja").keydown(); + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.val("java").keydown(); + ok( menu.is( ":hidden" ), "menu is hidden after first search" ); + element.val( "java" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - same( $(".ui-menu .ui-menu-item").length, 2 ); + ok( menu.is( ":visible" ), "menu is visible after second search" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" ); start(); - }, 50); - }, 50); + }, 50 ); + }, 50 ); }); -test("cancel focus", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - focus: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel focus", function() { + expect( 1 ); + var customVal = "custom value"; + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + focus: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); -test("cancel select", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - select: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel select", function() { + expect( 1 ); + var customVal = "custom value", + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + select: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); /* TODO previous fix broke more than it fixed, disabling this for now - messed up regular menu select event @@ -215,10 +206,10 @@ test("blur without selection", function() { setTimeout(function() { $( ".ui-menu-item" ).first().simulate("mouseover"); ac.simulate("keydown", { keyCode: $.ui.keyCode.TAB }); - same( ac.val(), "j" ); + deepEqual( ac.val(), "j" ); start(); }, 50); }); */ -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/autocomplete_methods.js index 1043e47ba..3fe035d28 100644 --- a/tests/unit/autocomplete/autocomplete_methods.js +++ b/tests/unit/autocomplete/autocomplete_methods.js @@ -1,39 +1,30 @@ -/* - * autocomplete_methods.js - */ -(function($) { +(function( $ ) { +module( "autocomplete: methods" ); -module("autocomplete: methods", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } +test( "destroy", function() { + expect( 1 ); + domEqual( "#autocomplete", function() { + $( "#autocomplete" ).autocomplete().autocomplete( "destroy" ); + }); }); -test("destroy", function() { - domEqual("#autocomplete", function() { - $("#autocomplete").autocomplete().autocomplete("destroy"); - }); -}) +test( "search", function() { + expect( 3 ); + var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ], + element = $( "#autocomplete" ).autocomplete({ + source: data, + minLength: 0 + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).length, data.length, "all items for a blank search" ); -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; + element.val( "has" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "haskell", "only one item for set input value" ); -test("search", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - minLength: 0 - }); - ac.autocomplete("search"); - same( $(".ui-menu .ui-menu-item").length, data.length, "all items for a blank search" ); - - ac.val("has"); - ac.autocomplete("search") - same( $(".ui-menu .ui-menu-item").text(), "haskell", "only one item for set input value" ); - - ac.autocomplete("search", "ja"); - same( $(".ui-menu .ui-menu-item").length, 2, "only java and javascript for 'ja'" ); - - $("#autocomplete").autocomplete("destroy"); -}) + element.autocomplete( "search", "ja" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "only java and javascript for 'ja'" ); +}); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js index f2da2f4aa..01c4e9fef 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/autocomplete_options.js @@ -1,247 +1,192 @@ -/* - * autocomplete_options.js - */ -(function($) { - -module("autocomplete: options", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - +(function( $ ) { -/* disabled until autocomplete actually has built-in support for caching -// returns at most 4 items -function source(request) { - ok(true, "handling a request"); - switch(request.term) { - case "cha": - return ["Common Pochard", "Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaf": - case "chaff": - return ["Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaffi": - return ["Common Chaffinch"] - case "schi": - return ["schifpre"] - } -} +module( "autocomplete: options" ); -function search(input) { - var autocomplete = input.data("autocomplete"); - autocomplete.search("cha"); - autocomplete.close(); - autocomplete.search("chaf"); - autocomplete.close(); - autocomplete.search("chaff"); - autocomplete.close(); - autocomplete.search("chaffi"); - autocomplete.close(); - autocomplete.search("schi"); -} - -test("cache: default", function() { - expect(2); - search($("#autocomplete").autocomplete({ - source: source - })); -}); - -test("cache: {limit:4}", function() { - expect(3); - search($("#autocomplete").autocomplete({ - cache: { - limit: 4 - }, - source: source - })); -}); - -test("cache: false", function() { - expect(5); - search($("#autocomplete").autocomplete({ - cache: false, - source: source - })); -}); -*/ - -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; +var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ]; test( "appendTo", function() { - var ac = $( "#autocomplete" ).autocomplete(); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete({ - appendTo: "#ac-wrap2" - }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "id" ); - ac.autocomplete( "destroy" ); + expect( 5 ); + var element = $( "#autocomplete" ).autocomplete(); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: ".ac-wrap" }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "class" ); - same( $( "#ac-wrap2 .ui-autocomplete").length, 0, "class - only appends to one element") - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "first found element" ); + equal( $( "#ac-wrap2 .ui-autocomplete" ).length, 0, "only appends to one element" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: null }); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "null" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "null" ); + element.autocomplete( "destroy" ); + + element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); + element.autocomplete( "destroy" ); }); function autoFocusTest( afValue, focusedLength ) { - var ac = $( "#autocomplete" ).autocomplete({ + var element = $( "#autocomplete" ).autocomplete({ autoFocus: afValue, delay: 0, source: data, open: function( event, ui ) { - equal( ac.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, focusedLength, "first item is " + afValue ? "" : "not" + " auto focused" ); - start(); + equal( element.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, + focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" ); + start(); } }); - ac.val( "ja" ).keydown(); + element.val( "ja" ).keydown(); stop(); } test( "autoFocus: false", function() { + expect( 1 ); autoFocusTest( false, 0 ); }); test( "autoFocus: true", function() { + expect( 1 ); autoFocusTest( true, 1 ); }); -test("delay", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 50 - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - // wait half a second for the default delay to open the menu - stop(); - setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("destroy"); - start(); - }, 100); -}); +asyncTest( "delay", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 50 + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); + + ok( menu.is( ":hidden" ), "menu is closed immediately after search" ); -test("disabled", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 0, - disabled: true - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - stop(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.autocomplete("destroy"); + ok( menu.is( ":visible" ), "menu is open after delay" ); start(); - }, 50); + }, 100 ); }); -test("minLength", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 0, "blank not enough for minLength: 1" ); - - ac.autocomplete("option", "minLength", 0); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 1, "blank enough for minLength: 0" ); - ac.autocomplete("destroy"); -}); +asyncTest( "disabled", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 0, + disabled: true + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); -test("source, local string array", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); -}); + ok( menu.is( ":hidden" ) ); -function source_test(source, async) { - var ac = $("#autocomplete").autocomplete({ - source: source - }); - ac.val("ja").autocomplete("search"); - function result(){ - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); - async && start(); + setTimeout(function() { + ok( menu.is( ":hidden" ) ); + start(); + }, 50 ); +}); + +test( "minLength", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search", "" ); + ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" ); + + element.autocomplete( "option", "minLength", 0 ); + element.autocomplete( "search", "" ); + ok( menu.is( ":visible" ), "blank enough for minLength: 0" ); +}); + +test( "source, local string array", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); +}); + +function sourceTest( source, async ) { + var element = $( "#autocomplete" ).autocomplete({ + source: source + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + function result() { + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "destroy" ); + if ( async ) { + start(); + } } - if (async) { + if ( async ) { stop(); - $(document).one("ajaxStop", result); + $( document ).one( "ajaxStop", result ); } else { result(); } } -test("source, local object array, only label property", function() { - source_test([ - {label:"java"}, - {label:"php"}, - {label:"coldfusion"}, - {label:"javascript"} +test( "source, local object array, only label property", function() { + expect( 1 ); + sourceTest([ + { label: "java" }, + { label: "php" }, + { label: "coldfusion" }, + { label: "javascript" } ]); }); -test("source, local object array, only value property", function() { - source_test([ - {value:"java"}, - {value:"php"}, - {value:"coldfusion"}, - {value:"javascript"} +test( "source, local object array, only value property", function() { + expect( 1 ); + sourceTest([ + { value: "java" }, + { value: "php" }, + { value: "coldfusion" }, + { value: "javascript" } ]); }); -test("source, url string with remote json string array", function() { - source_test("remote_string_array.txt", true); +test( "source, url string with remote json string array", function() { + expect( 1 ); + sourceTest( "remote_string_array.txt", true ); }); -test("source, url string with remote json object array, only value properties", function() { - source_test("remote_object_array_values.txt", true); +test( "source, url string with remote json object array, only value properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_values.txt", true ); }); -test("source, url string with remote json object array, only label properties", function() { - source_test("remote_object_array_labels.txt", true); +test( "source, url string with remote json object array, only label properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_labels.txt", true ); }); -test("source, custom", function() { - source_test(function(request, response) { - same( request.term, "ja" ); - response(["java", "javascript"]); +test( "source, custom", function() { + expect( 2 ); + sourceTest(function( request, response ) { + equal( request.term, "ja" ); + response( ["java", "javascript"] ); }); }); -test("source, update after init", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript", "haskell"] - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("option", "source", ["php", "asp"]); - ac.val("ph").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "php" ); - ac.autocomplete("destroy"); +test( "source, update after init", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript", "haskell" ] + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "option", "source", [ "php", "asp" ] ); + element.val( "ph" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "php" ); }); -})(jQuery); +}( jQuery ) ); -- cgit v1.2.3 From e549e18fc2f658fe15c53c1df84847c00e87c9de Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 13 Jun 2011 14:51:13 -0400 Subject: Accordion tests: Cleanup. --- tests/unit/accordion/accordion.html | 2 +- tests/unit/accordion/accordion_core.js | 2 ++ tests/unit/accordion/accordion_deprecated.html | 2 +- tests/unit/accordion/accordion_deprecated.js | 42 ++++++++++++++++++-------- tests/unit/accordion/accordion_methods.js | 13 +++++--- tests/unit/accordion/accordion_options.js | 25 ++++++++++++--- 6 files changed, 63 insertions(+), 23 deletions(-) (limited to 'tests') diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index ef20c057e..c4eee6b4c 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -27,7 +27,7 @@ }).get(); deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 000470d0b..ec4ca29d5 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -3,6 +3,7 @@ module( "accordion: core", accordionSetupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { + expect( 4 ); test( "markup structure: " + type, function() { var element = $( selector ).accordion(); ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); @@ -17,6 +18,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ }); test( "handle click on header-descendant", function() { + expect( 1 ); var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).click(); accordion_state( element, 0, 1, 0 ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index 2e754fe6a..5bfe7562b 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -24,7 +24,7 @@ }).get(); deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 733cb82b0..3a2075b2b 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -3,6 +3,7 @@ module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() ); test( "activate, numeric", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ active: 1 }); accordion_state( element, 0, 1, 0 ); element.accordion( "activate", 2 ); @@ -16,6 +17,7 @@ test( "activate, numeric", function() { }); test( "activate, numeric, collapsible:true", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -26,6 +28,7 @@ test( "activate, numeric, collapsible:true", function() { }); test( "activate, boolean, collapsible: true", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -34,6 +37,7 @@ test( "activate, boolean, collapsible: true", function() { }); test( "activate, boolean, collapsible: false", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -42,6 +46,7 @@ test( "activate, boolean, collapsible: false", function() { }); test( "activate, string expression", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: "h3:last" }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", ":first" ); @@ -53,6 +58,7 @@ test( "activate, string expression", function() { }); test( "activate, jQuery or DOM element", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", $( "#list1 h3:first" ) ); @@ -62,6 +68,7 @@ test( "activate, jQuery or DOM element", function() { }); test( "{ active: Selector }", function() { + expect( 2 ); var element = $("#list1").accordion({ active: "h3:last" }); @@ -71,6 +78,7 @@ test( "{ active: Selector }", function() { }); test( "{ active: Element }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" )[ 0 ] }); @@ -80,6 +88,7 @@ test( "{ active: Element }", function() { }); test( "{ active: jQuery Object }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); @@ -95,14 +104,16 @@ test( "{ active: jQuery Object }", function() { module( "accordion (deprecated) - height options", accordionSetupTeardown() ); test( "{ autoHeight: true }, default", function() { - equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130); + expect( 3 ); + accordion_equalHeights( $( "#navigation" ).accordion({ autoHeight: true }), 95, 130 ); }); -test("{ autoHeight: false }", function() { - var element = $('#navigation').accordion({ autoHeight: false }); +test( "{ autoHeight: false }", function() { + expect( 3 ); + var element = $( "#navigation" ).accordion({ autoHeight: false }); var sizes = []; - element.find(".ui-accordion-content").each(function() { - sizes.push($(this).height()); + element.find( ".ui-accordion-content" ).each(function() { + sizes.push( $(this).height() ); }); ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] ); ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] ); @@ -110,12 +121,14 @@ test("{ autoHeight: false }", function() { }); test( "{ fillSpace: true }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ fillSapce: true } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

    Lorem Ipsum

    " ) .css({ @@ -125,10 +138,11 @@ test( "{ fillSapce: true } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ fillSpace: true } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

    Lorem Ipsum

    " ) .css({ @@ -153,7 +167,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); @@ -163,6 +177,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { module( "accordion (deprecated) - icons", accordionSetupTeardown() ); test( "icons, headerSelected", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { headerSelected: "a1", header: "h1" } }); @@ -179,6 +194,7 @@ test( "icons, headerSelected", function() { module( "accordion (deprecated) - resize", accordionSetupTeardown() ); test( "resize", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -186,11 +202,11 @@ test( "resize", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "resize" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); @@ -200,6 +216,7 @@ test( "resize", function() { module( "accordion (deprecated) - navigation", accordionSetupTeardown() ); test( "{ navigation: true, navigationFilter: header }", function() { + expect( 2 ); var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { @@ -211,10 +228,11 @@ test( "{ navigation: true, navigationFilter: header }", function() { }); test( "{ navigation: true, navigationFilter: content }", function() { - var element = $("#navigation").accordion({ + expect( 2 ); + var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { - return /\?p=1\.1\.3\.2$/.test(this.href); + return /\?p=1\.1\.3\.2$/.test( this.href ); } }); equal( element.accordion( "option", "active" ), 2 ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index d45bde134..c6ba3230a 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -3,13 +3,15 @@ module( "accordion: methods", accordionSetupTeardown() ); test( "destroy", function() { - domEqual("#list1", function() { - $("#list1").accordion().accordion("destroy"); + expect( 1 ); + domEqual( "#list1", function() { + $( "#list1" ).accordion().accordion( "destroy" ); }); }); test( "enable/disable", function() { - var element = $('#list1').accordion(); + expect( 3 ); + var element = $( "#list1" ).accordion(); accordion_state( element, 1, 0, 0 ); element.accordion( "disable" ); element.accordion( "option", "active", 1 ); @@ -20,6 +22,7 @@ test( "enable/disable", function() { }); test( "refresh", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -27,11 +30,11 @@ test( "refresh", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "refresh" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 57762dec8..80b7f0b39 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -3,12 +3,14 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); test( "{ active: false }", function() { + expect( 7 ); var element = $( "#list1" ).accordion({ active: false, collapsible: true @@ -30,6 +32,7 @@ test( "{ active: false }", function() { }); test( "{ active: Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: 2 }); @@ -51,6 +54,7 @@ test( "{ active: Number }", function() { if ( $.uiBackCompat === false ) { test( "{ active: -Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: -1 }); @@ -74,6 +78,7 @@ if ( $.uiBackCompat === false ) { // TODO: add animation tests test( "{ collapsible: false }", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: 1 }); @@ -87,6 +92,7 @@ test( "{ collapsible: false }", function() { }); test( "{ collapsible: true }", function() { + expect( 6 ); var element = $( "#list1" ).accordion({ active: 1, collapsible: true @@ -106,6 +112,7 @@ test( "{ collapsible: true }", function() { }); test( "{ event: null }", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ event: null }); @@ -122,6 +129,7 @@ test( "{ event: null }", function() { }); test( "{ event: custom }", function() { + expect( 11 ); var element = $( "#list1" ).accordion({ event: "custom1 custom2" }); @@ -153,6 +161,7 @@ test( "{ event: custom }", function() { }); test( "{ header: default }", function() { + expect( 2 ); // default: > li > :first-child,> :not(li):even // > :not(li):even accordion_state( $( "#list1" ).accordion(), 1, 0, 0); @@ -161,6 +170,7 @@ test( "{ header: default }", function() { }); test( "{ header: custom }", function() { + expect( 6 ); var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); @@ -174,11 +184,13 @@ test( "{ header: custom }", function() { }); test( "{ heightStyle: 'auto' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); - equalHeights( element, 95, 130 ); + accordion_equalHeights( element, 95, 130 ); }); test( "{ heightStyle: 'content' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "content" }); var sizes = element.find( ".ui-accordion-content" ).map(function() { return $( this ).height(); @@ -189,12 +201,14 @@ test( "{ heightStyle: 'content' }", function() { }); test( "{ heightStyle: 'fill' }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ heightStyle: 'fill' } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

    Lorem Ipsum

    " ) .css({ @@ -204,10 +218,11 @@ test( "{ heightStyle: 'fill' } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ heightStyle: 'fill' } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

    Lorem Ipsum

    " ) .css({ @@ -232,10 +247,11 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); test( "{ icons: false }", function() { + expect( 8 ); var element = $( "#list1" ); function icons( on ) { deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); @@ -254,6 +270,7 @@ test( "{ icons: false }", function() { }); test( "{ icons: hash }", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); -- cgit v1.2.3 From db96e2a51f83c2b1e42b18d7995e356025083ec7 Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 14 Jun 2011 15:11:43 -0500 Subject: Tests: Adding visual/unit tests for scale effect. --- tests/unit/effects/effects.html | 76 ++++++----- tests/unit/effects/effects_scale.js | 61 +++++++++ tests/visual/effects.all.css | 54 -------- tests/visual/effects.all.html | 217 -------------------------------- tests/visual/effects.all.js | 106 ---------------- tests/visual/effects/effects.all.css | 55 ++++++++ tests/visual/effects/effects.all.html | 217 ++++++++++++++++++++++++++++++++ tests/visual/effects/effects.all.js | 106 ++++++++++++++++ tests/visual/effects/effects.scale.html | 159 +++++++++++++++++++++++ 9 files changed, 644 insertions(+), 407 deletions(-) create mode 100644 tests/unit/effects/effects_scale.js delete mode 100644 tests/visual/effects.all.css delete mode 100644 tests/visual/effects.all.html delete mode 100644 tests/visual/effects.all.js create mode 100644 tests/visual/effects/effects.all.css create mode 100644 tests/visual/effects/effects.all.html create mode 100644 tests/visual/effects/effects.all.js create mode 100644 tests/visual/effects/effects.scale.html (limited to 'tests') diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 6956ebcda..e3c6d2f4e 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -28,40 +28,54 @@ - + + @@ -81,6 +95,8 @@

    Slide with relative width

    +
    +
    diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js new file mode 100644 index 000000000..1436cd030 --- /dev/null +++ b/tests/unit/effects/effects_scale.js @@ -0,0 +1,61 @@ +(function( $ ) { +module( "effect.scale: Scale" ); + +function run( position, v, h, vo, ho ) { + var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; + asyncTest( desc, function() { + var test = $( ".testScale" ), + css = { + position: position + }, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + complete: complete, + duration: 1 + }, + target = {}, + relative = position === "relative"; + + css[ h ] = 33; + css[ v ] = 33; + target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70; + target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70; + if ( relative && h == "right" ) { + target[ h ] += 70; + } + if ( relative && v == "bottom" ) { + target[ v ] += 70; + } + test.css( css ); + test.effect( effect ); + + function complete() { + equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); + equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + start(); + } + }); +} + +function suite( position ) { + run( position, "top", "left", "top", "left" ); + run( position, "top", "left", "middle", "center" ); + run( position, "top", "left", "bottom", "right" ); + run( position, "bottom", "right", "top", "left" ); + run( position, "bottom", "right", "middle", "center" ); + run( position, "bottom", "right", "bottom", "right" ); +} + +$(function() { + suite( "absolute" ); + suite( "relative" ); + $.offset.initialize(); + if ( $.offset.supportsFixedPosition ) { + suite( "fixed" ); + } +}); + +})( jQuery ); diff --git a/tests/visual/effects.all.css b/tests/visual/effects.all.css deleted file mode 100644 index d2ed94026..000000000 --- a/tests/visual/effects.all.css +++ /dev/null @@ -1,54 +0,0 @@ - -body,html { - margin: 0; - padding: 0; - font-size: 12px; - font-family: Arial; - background: #191919; -} -body { margin: 1em; } - -ul.effects { - list-style-type: none; - margin: 0; - padding: 0; -} - -ul.effects li { - list-style-type: none; - margin: 0; - padding: 0; - width: 120px; - height: 100px; - float: left; - margin-top: 20px; - margin-left: 20px; -} - -div.effect { - width: 120px; - height: 100px; - background: #ccc; - border: 5px outset #aaa; - float: left; - cursor: pointer; - cursor: hand; -} - -div.current { - border: 5px outset #FF9C08; - background: #FF9C08; -} - -div.effect p { - color: #191919; - font-weight: bold; - margin: 0px; - padding: 10px; -} - -.ui-effects-transfer { - border: 1px dotted #fff; - background: #666; - opacity: 0.5; -} diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html deleted file mode 100644 index fed35de8a..000000000 --- a/tests/visual/effects.all.html +++ /dev/null @@ -1,217 +0,0 @@ - - - - - jQuery UI Effects Test Suite - - - - - - - - - - - - - - - - - - - - -
      - -
    • -
      -

      Blind up

      -
      -
      • - -
    • -
      -

      Blind down

      -
      -
      • - -
    • -
      -

      Blind left

      -
      -
      • - -
    • -
      -

      Blind right

      -
      -
      • - -
    • -
      -

      Bounce 3 times

      -
      -
      • - -
    • -
      -

      Clip horizontally

      -
      -
      • - -
    • -
      -

      Clip vertically

      -
      -
      • - -
    • - -
      • - -
    • -
      -

      Drop up

      -
      -
      • - -
    • -
      -

      Drop left

      -
      -
      • - -
    • -
      -

      Drop right

      -
      -
      • - -
    • -
      -

      Explode in 9 pieces

      -
      -
      • - -
    • -
      -

      Explode in 36 pieces

      -
      -
      • - -
    • -
      -

      Fade

      -
      -
      • - -
    • -
      -

      Fold

      -
      -
      • - -
    • -
      -

      Highlight

      -
      -
      • - -
    • -
      -

      Pulsate 2 times

      -
      -
      • - -
    • -
      -

      Puff

      -
      -
      • - -
    • -
      -

      Scale

      -
      -
      • - -
    • -
      -

      Shake

      -
      -
      • - -
    • -
      -

      Size Default Show/Hide

      -
      -
      • - -
    • -
      -

      Size Toggle

      -
      -
      • - -
    • -
      -

      Slide down

      -
      -
      • - -
    • -
      -

      Slide up

      -
      -
      • - -
    • -
      -

      Slide left

      -
      -
      • - -
    • -
      -

      Slide right

      -
      -
      • - -
    • -
      -

      Transfer to first element

      -
      -
      • - -
    • -
      -

      addClass

      -
      -
      • - -
    • -
      -

      removeClass

      -
      -
      • - -
    • -
      -

      toggleClass

      -
      -
      • - -
    • -
      -

      hide/show (jQuery)

      -
      -
      • - -
    - - - diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.all.css new file mode 100644 index 000000000..1d531b026 --- /dev/null +++ b/tests/visual/effects/effects.all.css @@ -0,0 +1,55 @@ + +body,html { + margin: 0; + padding: 0; + font-size: 12px; + font-family: Arial; + background: #191919; + color: #fff; +} +body { margin: 1em; } + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + list-style-type: none; + margin: 0; + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0px; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/effects.all.html new file mode 100644 index 000000000..a2f8f62ef --- /dev/null +++ b/tests/visual/effects/effects.all.html @@ -0,0 +1,217 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + + + + + + + + + + + + +
      + +
    • +
      +

      Blind up

      +
      +
      • + +
    • +
      +

      Blind down

      +
      +
      • + +
    • +
      +

      Blind left

      +
      +
      • + +
    • +
      +

      Blind right

      +
      +
      • + +
    • +
      +

      Bounce 3 times

      +
      +
      • + +
    • +
      +

      Clip horizontally

      +
      +
      • + +
    • +
      +

      Clip vertically

      +
      +
      • + +
    • + +
      • + +
    • +
      +

      Drop up

      +
      +
      • + +
    • +
      +

      Drop left

      +
      +
      • + +
    • +
      +

      Drop right

      +
      +
      • + +
    • +
      +

      Explode in 9 pieces

      +
      +
      • + +
    • +
      +

      Explode in 36 pieces

      +
      +
      • + +
    • +
      +

      Fade

      +
      +
      • + +
    • +
      +

      Fold

      +
      +
      • + +
    • +
      +

      Highlight

      +
      +
      • + +
    • +
      +

      Pulsate 2 times

      +
      +
      • + +
    • +
      +

      Puff

      +
      +
      • + +
    • +
      +

      Scale

      +
      +
      • + +
    • +
      +

      Shake

      +
      +
      • + +
    • +
      +

      Size Default Show/Hide

      +
      +
      • + +
    • +
      +

      Size Toggle

      +
      +
      • + +
    • +
      +

      Slide down

      +
      +
      • + +
    • +
      +

      Slide up

      +
      +
      • + +
    • +
      +

      Slide left

      +
      +
      • + +
    • +
      +

      Slide right

      +
      +
      • + +
    • +
      +

      Transfer to first element

      +
      +
      • + +
    • +
      +

      addClass

      +
      +
      • + +
    • +
      +

      removeClass

      +
      +
      • + +
    • +
      +

      toggleClass

      +
      +
      • + +
    • +
      +

      hide/show (jQuery)

      +
      +
      • + +
    + + + diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js new file mode 100644 index 000000000..a28c41a89 --- /dev/null +++ b/tests/visual/effects/effects.all.js @@ -0,0 +1,106 @@ + +$(function() { + var duration = 1000, wait = 500; + + $("div.effect") + .hover(function() { $(this).addClass("hover"); }, + function() { $(this).removeClass("hover"); }); + + var effect = function(el, n, o) { + + $.extend(o, { + easing: "easeOutQuint" + }); + + $(el).bind("click", function() { + + $(this).addClass("current") + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( n, o, duration ) + .delay( wait ) + .show( n, o, duration, function() { + $( this ).removeClass("current"); + }); + }); + + }; + + $("#hide").click(function() { + var el = $(this); + el.addClass("current").hide(duration, function() { + setTimeout(function() { + el.show(duration, function() { el.removeClass("current"); }); + }, wait); + }); + }); + + effect("#blindLeft", "blind", { direction: "left" }); + effect("#blindUp", "blind", { direction: "up" }); + effect("#blindRight", "blind", { direction: "right" }); + effect("#blindDown", "blind", { direction: "down" }); + + effect("#bounce3times", "bounce", { times: 3 }); + + effect("#clipHorizontally", "clip", { direction: "horizontal" }); + effect("#clipVertically", "clip", { direction: "vertical" }); + + effect("#dropDown", "drop", { direction: "down" }); + effect("#dropUp", "drop", { direction: "up" }); + effect("#dropLeft", "drop", { direction: "left" }); + effect("#dropRight", "drop", { direction: "right" }); + + effect("#explode9", "explode", {}); + effect("#explode36", "explode", { pieces: 36 }); + + effect("#fade", "fade", {}); + + effect("#fold", "fold", { size: 50 }); + + effect("#highlight", "highlight", {}); + + effect("#pulsate", "pulsate", { times: 2 }); + + effect("#puff", "puff", { times: 2 }); + effect("#scale", "scale", {}); + effect("#size", "size", {}); + $("#sizeToggle").bind("click", function() { + var opts = { to: { width: 300, height: 300 }}; + $(this).addClass('current') + .toggle("size", opts, duration) + .delay(wait) + .toggle("size", opts, duration, function() { + $(this).removeClass("current"); + }); + }); + + $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); + + effect("#slideDown", "slide", { direction: "down" }); + effect("#slideUp", "slide", { direction: "up" }); + effect("#slideLeft", "slide", { direction: "left" }); + effect("#slideRight", "slide", { direction: "right" }); + + $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); + + $("#addClass").click(function() { + $(this).addClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration, function() { + $(this).removeClass("current"); + }); + }); + $("#removeClass").click(function() { + $(this).addClass("current").removeClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); + $("#toggleClass").click(function() { + $(this).toggleClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html new file mode 100644 index 000000000..9521a1872 --- /dev/null +++ b/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + +
    +
    +
    +
    +
    + + + + +
    + + + + +
    + \ No newline at end of file -- cgit v1.2.3 From a89ff4098a6149817061a752ec3755127f554407 Mon Sep 17 00:00:00 2001 From: Corey Frang Date: Thu, 23 Jun 2011 05:29:09 -0500 Subject: Unit Tests: Adding a unit test to make sure .stop( true, true ) clears the inline styles when using animateClass - Fixed #3928 - Class-Animation: Please add a clearInlineStyle-Option --- tests/unit/effects/effects_core.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'tests') diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 4c685ebb6..fd6b4d378 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -123,4 +123,19 @@ asyncTest( "animateClass works with children", function() { }}); }); +asyncTest( "animateClass clears style properties when stopped", function() { + var test = $("div.animateClass"), + style = test[0].style, + orig = style.cssText; + + expect( 2 ); + + test.addClass( "testChangeBackground", duration ); + notEqual( orig, style.cssText, "cssText is the not the same after starting animation" ); + + test.stop( true, true ); + equal( orig, style.cssText, "cssText is the same after stopping animation midway" ); + start(); +}); + })(jQuery); -- cgit v1.2.3 From d18cd7ed0f41213aca9f29ae67c360ca6b21abfa Mon Sep 17 00:00:00 2001 From: Corey Frang Date: Thu, 23 Jun 2011 07:22:34 -0500 Subject: Effects.core: Check Visibility vs 'hide' and 'show' modes, finish immediately if neccessary - Fixes #6715 - Hide and Show try to affect hidden and showing elements --- tests/unit/effects/effects_core.js | 12 ++++++++++++ ui/jquery.effects.core.js | 15 +++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) (limited to 'tests') diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index fd6b4d378..f78aea304 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -19,6 +19,18 @@ var minDuration = 15, module( "effects.core" ); +test( "Immediate Return Conditions", function() { + var hidden = $( "div.hidden" ), + count = 0; + expect( 6 ); + hidden.hide( "blind", function() { + equal( ++count, 1, "Hide on hidden returned immediately" ); + }).show().show( "blind", function() { + equal( ++count, 2, "Show on shown returned immediately" ); + }); + equal( ++count, 3, "Both Functions worked properly" ); +}); + $.each( $.effects.effect, function( effect ) { if ( effect === "transfer" ) { return; diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 330ddd83c..b08cd6cf4 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -556,19 +556,26 @@ $.fn.extend({ } function run( next ) { - var elem = this, - complete = args.complete; + var elem = $( this ), + complete = args.complete, + mode = args.mode; function done() { if ( $.isFunction( complete ) ) { - complete.call( elem ); + complete.call( elem[0] ); } if ( $.isFunction( next ) ) { next(); } } - effectMethod.call( elem, args, done ); + // if the element is hiddden and mode is hide, + // or element is visible and mode is show + if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) { + done(); + } else { + effectMethod.call( elem[0], args, done ); + } } // TODO: remove this check in 2.0, effectMethod will always be true -- cgit v1.2.3 From 5c34cea06fb84777e1af72acf5ff0e9b60bd96f2 Mon Sep 17 00:00:00 2001 From: Corey Frang Date: Thu, 23 Jun 2011 07:24:48 -0500 Subject: Unit Tests: Fixing a typo in the new test for hide/show on hidden/shown --- tests/unit/effects/effects_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests') diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index f78aea304..7c20e22fe 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -22,7 +22,7 @@ module( "effects.core" ); test( "Immediate Return Conditions", function() { var hidden = $( "div.hidden" ), count = 0; - expect( 6 ); + expect( 3 ); hidden.hide( "blind", function() { equal( ++count, 1, "Hide on hidden returned immediately" ); }).show().show( "blind", function() { -- cgit v1.2.3 From a56aa861b1deb6d71ec74a77647d12d50570ea57 Mon Sep 17 00:00:00 2001 From: marcneuwirth Date: Tue, 28 Jun 2011 10:49:47 -0500 Subject: Datepicker: Added onSelect.apply() call to _doKeyDown method when enter button pushed if onSelect is defined. Fixed #7124 - Datepicker: onSelect does not fire when enter button is pushed --- tests/unit/datepicker/datepicker_events.js | 5 +++++ ui/jquery.ui.datepicker.js | 7 +++++++ 2 files changed, 12 insertions(+) (limited to 'tests') diff --git a/tests/unit/datepicker/datepicker_events.js b/tests/unit/datepicker/datepicker_events.js index bf48c9c8a..c7c16b610 100644 --- a/tests/unit/datepicker/datepicker_events.js +++ b/tests/unit/datepicker/datepicker_events.js @@ -41,6 +41,11 @@ test('events', function() { simulate('keydown', {keyCode: $.simulate.VK_ESC}); equals(selectedDate, $.datepicker.formatDate('mm/dd/yy', date), 'Callback selected date - esc'); + var dateStr = '02/04/2008'; + inp.val(dateStr).datepicker('show'). + simulate('keydown', {keyCode: $.simulate.VK_ENTER}); + equals(dateStr, selectedDate, + 'onSelect is called after enter keydown'); // onChangeMonthYear inp.datepicker('option', {onChangeMonthYear: callback2, onSelect: null}). val('').datepicker('show'); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 1d3de7740..442621e0d 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -529,6 +529,13 @@ $.extend(Datepicker.prototype, { $.datepicker._currentClass + ')', inst.dpDiv); if (sel[0]) $.datepicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]); + var onSelect = $.datepicker._get(inst, 'onSelect'); + if (onSelect) { + var dateStr = $.datepicker._formatDate(inst); + + // trigger custom callback + onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); + } else $.datepicker._hideDatepicker(); return false; // don't submit the form -- cgit v1.2.3 From effdd5d19c534f8445ebafe4212278c4366b0041 Mon Sep 17 00:00:00 2001 From: marcneuwirth Date: Tue, 28 Jun 2011 10:59:08 -0500 Subject: Datepicker: Added onSelect.apply() call to _setDate method if onSelect is defined. Fixed #6264 - Datepicker: onSelect does not fire when setDate is called --- tests/unit/datepicker/datepicker_options.js | 10 ++++++++++ ui/jquery.ui.datepicker.js | 8 ++++++++ 2 files changed, 18 insertions(+) (limited to 'tests') diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js index a10d1ea45..107609174 100644 --- a/tests/unit/datepicker/datepicker_options.js +++ b/tests/unit/datepicker/datepicker_options.js @@ -469,6 +469,16 @@ test('setDate', function() { var dateAndTimeClone = new Date(2008, 3 - 1, 28, 1, 11, 0); inp.datepicker('setDate', dateAndTimeToSet); equals(dateAndTimeToSet.getTime(), dateAndTimeClone.getTime(), 'Date object passed should not be changed by setDate'); + // Test onSelect callback is executed when using setDate + inp.datepicker('destroy'); + var testDate = null; + inp.datepicker({ + onSelect: function(dateText, inst) { + testDate = new Date(dateText); + } + }); + inp.datepicker('setDate', date2); + equals(date2.getTime(), testDate.getTime(), 'onSelect is called after setDate'); }); test('altField', function() { diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 442621e0d..dda8585fd 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1399,6 +1399,14 @@ $.extend(Datepicker.prototype, { if (inst.input) { inst.input.val(clear ? '' : this._formatDate(inst)); } + + var onSelect = this._get(inst, 'onSelect'); + if (onSelect) { + var dateStr = this._formatDate(inst); + + // trigger custom callback + onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); + } }, /* Retrieve the date(s) directly. */ -- cgit v1.2.3 From 76e2b98a312cfab3d754aac5068ad965e544840c Mon Sep 17 00:00:00 2001 From: Philip Graham Date: Tue, 28 Jun 2011 16:40:28 +0000 Subject: Updated guard against unparsed characters to allow extra characters as long as they are separated from the date by whitespace. This maintains compatibility with timepicker extensions. Fixes #7244 - Datepicker: parseDate() does not throw an exception for long years --- tests/unit/datepicker/datepicker_tickets.js | 14 ++++++++++++-- ui/jquery.ui.datepicker.js | 5 ++++- 2 files changed, 16 insertions(+), 3 deletions(-) (limited to 'tests') diff --git a/tests/unit/datepicker/datepicker_tickets.js b/tests/unit/datepicker/datepicker_tickets.js index d5249f905..10647eb13 100644 --- a/tests/unit/datepicker/datepicker_tickets.js +++ b/tests/unit/datepicker/datepicker_tickets.js @@ -30,12 +30,22 @@ test('Ticket 6827: formatDate day of year calculation is wrong during day lights }); test('Ticket #7244: date parser does not fail when too many numbers are passed into the date function', function() { - expect(1); + var date; try{ - var date = $.datepicker.parseDate('dd/mm/yy', '18/04/19881'); + date = $.datepicker.parseDate('dd/mm/yy', '18/04/19881'); + ok(false, "Did not properly detect an invalid date"); }catch(e){ ok("invalid date detected"); } + + try { + date = $.datepicker.parseDate('dd/mm/yy', '18/04/1988 @ 2:43 pm'); + equal(date.getDate(), 18); + equal(date.getMonth(), 3); + equal(date.getFullYear(), 1988); + } catch(e) { + ok(false, "Did not properly parse date with extra text separated by whitespace"); + } }); })(jQuery); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 1d3de7740..45107c969 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1095,7 +1095,10 @@ $.extend(Datepicker.prototype, { } } if (iValue < value.length){ - throw "Extra/unparsed characters found in date: " + value.substring(iValue); + var extra = value.substr(iValue); + if (!/^\s+/.test(extra)) { + throw "Extra/unparsed characters found in date: " + extra; + } } if (year == -1) year = new Date().getFullYear(); -- cgit v1.2.3 From d5452c0ec27219c3564522b852f83ca9757bed84 Mon Sep 17 00:00:00 2001 From: Benjamin Sterling Date: Mon, 11 Jul 2011 19:49:56 -0400 Subject: Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css --- demos/position/default.html | 12 ++++ tests/unit/position/position_core.js | 81 ++++++++++++++++++++++++ tests/unit/position/position_core_within.js | 95 +++++++++++++++++++++++++++++ ui/jquery.ui.position.js | 18 +++++- 4 files changed, 205 insertions(+), 1 deletion(-) (limited to 'tests') diff --git a/demos/position/default.html b/demos/position/default.html index 87fc8e38a..60b8b39f9 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -30,6 +30,18 @@ background-color: #bcd5e6; text-align: center; } + div.ui-flipped-top { + border-top: 3px solid #000000; + } + div.ui-flipped-bottom { + border-bottom: 3px solid #000000; + } + div.ui-flipped-left { + border-left: 3px solid #000000; + } + div.ui-flipped-right { + border-right: 3px solid #000000; + } select, input { margin-left: 15px; } diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index bd8e58612..fd6e643e9 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -435,6 +435,87 @@ test( "collision: flip, with margin", function() { }, { top: 0, left: 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var elem = $( "#elx" ).position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var elem = $( "#elx" ).position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var elem = $( "#elx" ).position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + //test( "bug #5280: consistent results (avoid fractional values)", function() { // var wrapper = $( "#bug-5280" ), // elem = wrapper.children(), diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 567c17192..bfb913335 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -438,4 +438,99 @@ test( "collision: flip, with margin", function() { }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); }); +test( "addClass: flipped left", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left top", + of: within[0], + within: within, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: within[0], + within: within, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + }( jQuery ) ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 3bae0d010..23a98b491 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -204,7 +204,8 @@ $.fn.position = function( options ) { offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ], my: options.my, at: options.at, - within: within + within: within, + elem : elem }); } }); @@ -265,6 +266,9 @@ $.ui.position = { return; } + data.elem + .removeClass( "ui-flipped-left ui-flipped-right" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -283,6 +287,10 @@ $.ui.position = { -data.targetWidth, offset = -2 * data.offset[ 0 ]; if ( overLeft < 0 || overRight > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overLeft < 0 ? "right" : "left" ) ); + position.left += myOffset + atOffset + offset; } }, @@ -290,6 +298,10 @@ $.ui.position = { if ( data.at[ 1 ] === center ) { return; } + + data.elem + .removeClass( "ui-flipped-top ui-flipped-bottom" ); + var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -308,6 +320,10 @@ $.ui.position = { -data.targetHeight, offset = -2 * data.offset[ 1 ]; if ( overTop < 0 || overBottom > 0 ) { + + data.elem + .addClass( "ui-flipped-" + ( overTop < 0 ? "bottom" : "top" ) ); + position.top += myOffset + atOffset + offset; } } -- cgit v1.2.3 From 927857ce84b11b081d0c983e5fa561bc2264bd19 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 12 Jul 2011 11:15:33 -0400 Subject: Position: Cleanup up position demo CSS and add it to the within-visual-test --- demos/position/default.html | 14 +++++++------- tests/visual/position/position_within.html | 13 ++++++++++++- 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'tests') diff --git a/demos/position/default.html b/demos/position/default.html index 60b8b39f9..72bf8abcc 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -12,7 +12,7 @@