jQuery UI Position Test Suite

From eff793d014dfaeb4e601dbd97cf7b33352b05ce5 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 24 Jul 2009 18:24:13 +0000 Subject: Copied position plugin from /branches/dev/positionTo r2971. --- tests/unit/position/position.html | 40 +++++ tests/unit/position/position_core.js | 333 +++++++++++++++++++++++++++++++++++ 2 files changed, 373 insertions(+) create mode 100644 tests/unit/position/position.html create mode 100644 tests/unit/position/position_core.js (limited to 'tests') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html new file mode 100644 index 000000000..6d9a00008 --- /dev/null +++ b/tests/unit/position/position.html @@ -0,0 +1,40 @@ + + + + jQuery UI Position Test Suite + + + + + + + + + + + + + +

+ +

+ + + diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js new file mode 100644 index 000000000..f05a2e804 --- /dev/null +++ b/tests/unit/position/position_core.js @@ -0,0 +1,333 @@ +/* + * position_core.js + */ +(function($) { + +test('my, at, of', function() { + $('#elx').position({ + my: 'left top', + at: 'left top', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'left top, left top'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 60, left: 40 }, 'left top, left bottom'); + + $('#elx').position({ + my: 'left', + at: 'bottom', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 55, left: 50 }, 'left, bottom'); + + $('#elx').position({ + my: 'left foo', + at: 'bar baz', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 45, left: 50 }, 'left foo, bar baz'); +}); + +test('multiple elements', function() { + var elements = $('#el1, #el2'); + var result = elements.position({ + my: 'left top', + at: 'left bottom', + of: '#parent', + collision: 'none' + }); + + same(result, elements); + var expected = {top: 10, left: 4}; + elements.each(function() { + same($(this).offset(), expected); + }); +}); + +test('positions', function() { + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + center: 3, + 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: my ? start.top - offsets[vertical] : start.top + offsets[vertical], + left: 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' + }); + same(el.offset(), definition.result, "Position via " + jsDump.parse({my:definition.my, at:definition.at})); + }); +}); + +test('of', function() { + $('#elx').position({ + my: 'left top', + at: 'left top', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'selector'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: $('#parentx'), + collision: 'none' + }); + same($('#elx').offset(), { top: 60, left: 40 }, 'jQuery object'); + + $('#elx').position({ + my: 'left top', + at: 'left top', + of: $('#parentx')[0], + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'DOM element'); + + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: document, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(document).height() - 10, + left: $(document).width() - 10 + }, 'document'); + + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: window, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(window).height() - 10, + left: $(window).width() - 10 + }, 'window'); + + $(window).scrollTop(500).scrollLeft(200); + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: window, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(window).height() + 500 - 10, + left: $(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' + }); + 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' + }); + same($('#elx').offset(), { + top: 600, + left: 400 + }, 'event - left top, right bottom'); +}); + +test('offset', function() { + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '10', + collision: 'none' + }); + same($('#elx').offset(), { top: 70, left: 50 }, 'single value'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '5 -3', + collision: 'none' + }); + same($('#elx').offset(), { top: 57, left: 45 }, 'two values'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '5px -3px', + collision: 'none' + }); + same($('#elx').offset(), { top: 57, left: 45 }, 'with units'); +}); + +test('by', function() { + expect(6); + + var count = 0, + elems = $('#el1, #el2'), + expectedPosition = { top: 40, left: 40 }, + originalPosition = elems.position({ + my: 'right bottom', + at: 'rigt bottom', + of: '#parentx', + collision: 'none' + }).offset(); + + elems.position({ + my: 'left top', + at: 'left top', + of: '#parentx', + by: function(position) { + same(this, elems[count], 'correct context for call #' + count); + same(position, expectedPosition, 'correct position for call #' + count); + count++; + } + }); + + elems.each(function() { + same($(this).offset(), originalPosition, 'elements not moved'); + }); +}); + +function collisionTest(config, result, msg) { + var elem = $("#elx").position($.extend({ + my: "left top", + at: "right bottom", + of: window + }, config)); + same(elem.offset(), result, msg); +} + +function collisionTest2(config, result, msg) { + collisionTest($.extend({ + my: "right bottom", + at: "left top" + }, config), result, msg); +} + +test("collision: fit, no offset", function() { + collisionTest({ + collision: "fit" + }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit" + }, { top: 0, left: 0 }, "left top"); +}); + +test("collision: fit, with offset", function() { + collisionTest({ + collision: "fit", + offset: "2 3" + }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + offset: "2 3" + }, { top: 0, left: 0 }, "left top, positive offset"); + + collisionTest2({ + collision: "fit", + offset: "-2 -3" + }, { top: 0, left: 0 }, "left top, negative offset"); +}); + +test("collision: flip, no offset", function() { + collisionTest({ + collision: "flip" + }, { top: -10, left: -10 }, "left top"); + + collisionTest2({ + collision: "flip" + }, { top: $(window).height(), left: $(window).width() }, "right bottom"); +}); + +test("collision: flip, with offset", function() { + collisionTest({ + collision: "flip", + offset: "2 3" + }, { top: -13, left: -12 }, "left top, with offset added"); + + collisionTest2({ + collision: "flip", + offset: "2 3" + }, { top: $(window).height() - 3, left: $(window).width() - 2 }, "bottom, positive offset"); + + collisionTest2({ + collision: "flip", + offset: "-2 -3" + }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, negative offset"); +}); + +test("collision: none, no offset", function() { + collisionTest({ + collision: "none" + }, { top: $(window).height(), left: $(window).width() }, "left top"); + + collisionTest2({ + collision: "none" + }, { top: -10, left: -10 }, "moved to the right bottom"); +}); + +test("collision: none, with offset", function() { + collisionTest({ + collision: "none", + offset: "2 3" + }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, with offset added"); + + collisionTest2({ + collision: "none", + offset: "2 3" + }, { top: -7, left: -8 }, "left top, positive offset"); + + collisionTest2({ + collision: "none", + offset: "-2 -3" + }, { top: -13, left: -12 }, "left top, negative offset"); +}); + +})(jQuery); -- cgit v1.2.3