diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2009-07-24 18:24:13 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2009-07-24 18:24:13 +0000 |
| commit | eff793d014dfaeb4e601dbd97cf7b33352b05ce5 (patch) | |
| tree | 9b3bed79e91895f21b2ccab876a973850544b541 /tests | |
| parent | bfca009321a9be73c7b4fa042f0cfe5fd39ca8a4 (diff) | |
| download | jquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.tar.gz jquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.zip | |
Copied position plugin from /branches/dev/positionTo r2971.
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/unit/position/position.html | 40 | ||||
| -rw-r--r-- | tests/unit/position/position_core.js | 333 |
2 files changed, 373 insertions, 0 deletions
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 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Position Test Suite</title>
+
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.position.js"></script>
+
+ <link type="text/css" href="../testsuite.css" rel="stylesheet" />
+ <script type="text/javascript" src="../testsuite.js"></script>
+ <script type="text/javascript" src="../../../external/testrunner-r6343.js"></script>
+
+ <script type="text/javascript" src="position_core.js"></script>
+</head>
+<body>
+
+<div id="main" style="top: 0; left: 0;">
+ <div id="el1" style="position: absolute; width: 6px; height: 6px;"></div>
+ <div id="el2" style="position: absolute; width: 6px; height: 6px;"></div>
+ <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px;"></div>
+</div>
+
+<div style="position: absolute; top: 0px; left: 0px">
+ <div id="elx" style="position: absolute; width: 10px; height: 10px;"></div>
+ <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
+</div> + +<div style="position: absolute; top: 200px; left: 100px;"> + <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px;"></div> + <div style="position: absolute; top: 100px; left: 50px;"> + <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px;"></div> + <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> + </div> +</div>
+ +<div style="position: absolute; height: 5000px; width: 5000px;"></div> +
+</body>
+</html>
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);
|