aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/position/position_core_within.js10
-rw-r--r--tests/visual/position/position.html20
-rw-r--r--tests/visual/position/position_feedback.html145
-rw-r--r--tests/visual/position/position_feedback_rotate.html105
-rw-r--r--tests/visual/position/position_fit.html1
-rw-r--r--tests/visual/position/position_flip.html1
-rw-r--r--tests/visual/position/position_flipfit.html1
-rw-r--r--tests/visual/position/position_margin.html1
8 files changed, 269 insertions, 15 deletions
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js
index 187408c61..042e881eb 100644
--- a/tests/unit/position/position_core_within.js
+++ b/tests/unit/position/position_core_within.js
@@ -276,7 +276,7 @@ test( "collision: fit, no offset", function() {
collisionTest({
collision: "fit"
- }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom" );
+ }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" );
collisionTest2({
collision: "fit"
@@ -291,7 +291,7 @@ test( "collision: fit, with offset", function() {
collisionTest({
collision: "fit",
at: "right+2 bottom+3"
- }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom");
+ }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom");
collisionTest2({
collision: "fit",
@@ -396,7 +396,7 @@ test( "collision: fit, with margin", function() {
collisionTest({
collision: "fit"
- }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
+ }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" );
collisionTest2({
collision: "fit"
@@ -409,7 +409,7 @@ test( "collision: fit, with margin", function() {
collisionTest({
collision: "fit"
- }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
+ }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" );
collisionTest2({
collision: "fit"
@@ -422,7 +422,7 @@ test( "collision: fit, with margin", function() {
collisionTest({
collision: "fit"
- }, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( within ).width }, "right bottom" );
+ }, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" );
collisionTest2({
collision: "fit"
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index b9b769d9b..64c5d2300 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -10,23 +10,31 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
var inputs = $("input");
$("ul").insertAfter(inputs);
$(window).resize(function() {
inputs.each(function() {
- $(this).position({
+ var input = $(this).position({
my: this.id.replace(/-/, " "),
at: this.id.replace(/-/, " "),
of: "#container",
collision: "none"
});
- $(this).next().menu().position({
- my: "left top+20",
+ var menu = $(this).next().menu()
+ menu.position({
+ my: "left+30 top+20",
at: "left bottom",
of: this,
+ using: function( position, feedback ) {
+ input.val(feedback.horizontal + " " + feedback.vertical)
+ $(this).offset( position );
+ $(this)
+ .removeClass("left right top bottom center middle")
+ .addClass(feedback.horizontal)
+ .addClass(feedback.vertical);
+ }
});
});
}).resize();
@@ -44,11 +52,11 @@
top: -22px;
left: 5px;
}
- .ui-flipped-left:before {
+ .right:before {
left: auto;
right: 5px;
}
- .ui-flipped-top:before {
+ .bottom:before {
content: "↓";
top: auto;
bottom: -19px;
diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html
new file mode 100644
index 000000000..11bb19f3e
--- /dev/null
+++ b/tests/visual/position/position_feedback.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Position Visual Test: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ function using( position, feedback ) {
+ $(this)
+ .css( position )
+ .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
+ .removeClass( "left right top bottom center middle vertical horizontal" )
+ .addClass( feedback.horizontal )
+ .addClass( feedback.vertical )
+ .addClass( feedback.important );
+ }
+ var target = $("#target").position({
+ my: "center",
+ at: "center",
+ of: window
+ });
+ var element = $(".element");
+ $.each([
+ "center top-100",
+ "right+25 top-50",
+ "right+75 top",
+ "right+75 center",
+ "right+75 bottom",
+ "right+25 bottom+50",
+ "center bottom+100",
+ "left-25 bottom+50",
+ "left-75 bottom",
+ "left-75 center",
+ "left-75 top",
+ "left-25 top-50"
+ ], function(index, direction) {
+ element.clone().insertAfter(target).position({
+ my: "center",
+ at: direction,
+ of: target,
+ using: using
+ })
+ });
+
+ var targetOffset = target.offset();
+ var oppositeElement = element.clone().width(50).appendTo('body');
+ var leftElement = element.clone().width(50).height(150).appendTo('body');
+ var rightElement = element.clone().height(150).width(150).appendTo('body');
+ element.width(150);
+ $(document).on( "mousemove", function(event) {
+ var base = {
+ my: "left top",
+ at: "left top",
+ of: target,
+ using: using
+ }
+ element.position( $.extend({
+ offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
+ }, base));
+ oppositeElement.position( $.extend({
+ offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
+ }, base));
+ leftElement.position( $.extend({
+ offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
+ }, base));
+ rightElement.position( $.extend({
+ offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
+ }, base));
+ });
+ });
+ </script>
+ <style>
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ }
+ #target {
+ height: 75px;
+ }
+ .element:before {
+ font-size: 12pt;
+ content: "↑";
+ position: absolute;
+ top: -19px;
+ left: 5px;
+ }
+ .right:before {
+ left: auto;
+ right: 5px;
+ }
+ .bottom:before {
+ content: "↓";
+ top: auto;
+ bottom: -19px;
+ }
+ .center:before {
+ left: 50%;
+ right: auto;
+ }
+ .middle:before {
+ top: 50%;
+ bottom: auto;
+ }
+ .horizontal:before {
+ height: 10px;
+ top: 50%;
+ margin-top: -8px;
+ bottom: auto;
+ left: -18px;
+ right: auto;
+ content: "←";
+ }
+ .right.horizontal:before {
+ left: auto;
+ right: -18px;
+ content: "→";
+ }
+ .bottom.horizontal:before {
+ top: auto;
+ bottom: 5px;
+ }
+ .top.horizontal:before {
+ top: 5px;
+ }
+ </style>
+</head>
+<body>
+
+ <div id="target">all around me</div>
+
+ <div class="element"></div>
+
+</body>
+</html>
diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html
new file mode 100644
index 000000000..a93287e7d
--- /dev/null
+++ b/tests/visual/position/position_feedback_rotate.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Position Visual Test: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ function using( position, feedback ) {
+ var angleRad = Math.atan2( feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2, feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2 ) * 180 / Math.PI;
+ var angle = (Math.round( angleRad * 100) / 100 );
+ $(this)
+ .offset( position )
+ .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" )
+ .css({
+ "-webkit-transform": "rotate(" + angle + "deg)",
+ "-moz-transform": "rotate(" + angle + "deg)",
+ "-ms-transform": "rotate(" + angle + "deg)",
+ "-o-transform": "rotate(" + angle + "deg)",
+ "transform": "rotate(" + angle + "deg)"
+ });
+ }
+ var target = $("#target").position({
+ my: "center",
+ at: "center",
+ of: window
+ });
+ var element = $(".element");
+ $.each([
+ "center top-100",
+ "right+25 top-50",
+ "right+75 top",
+ "right+75 center",
+ "right+75 bottom",
+ "right+25 bottom+50",
+ "center bottom+100",
+ "left-25 bottom+50",
+ "left-75 bottom",
+ "left-75 center",
+ "left-75 top",
+ "left-25 top-50"
+ ], function(index, direction) {
+ element.clone().insertAfter(target).position({
+ my: "center",
+ at: direction,
+ of: target,
+ using: using
+ })
+ });
+
+ var targetOffset = target.offset();
+ var oppositeElement = element.clone().width(50).appendTo('body');
+ var leftElement = element.clone().width(50).height(150).appendTo('body');
+ var rightElement = element.clone().height(150).width(150).appendTo('body');
+ element.width(150);
+ $(document).on( "mousemove", function(event) {
+ var base = {
+ my: "left top",
+ at: "left top",
+ of: target,
+ using: using
+ }
+ element.position( $.extend({
+ offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
+ }, base));
+ oppositeElement.position( $.extend({
+ offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
+ }, base));
+ leftElement.position( $.extend({
+ offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
+ }, base));
+ rightElement.position( $.extend({
+ offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
+ }, base));
+ });
+ });
+ </script>
+ <style>
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ }
+ #target {
+ height: 75px;
+ }
+ </style>
+</head>
+<body>
+
+ <div id="target">all around me</div>
+
+ <div class="element"></div>
+
+</body>
+</html>
diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html
index 9c60b78f6..dbd52550f 100644
--- a/tests/visual/position/position_fit.html
+++ b/tests/visual/position/position_fit.html
@@ -10,7 +10,6 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
var inputs = $("input");
diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html
index bae3c649b..29ad32f96 100644
--- a/tests/visual/position/position_flip.html
+++ b/tests/visual/position/position_flip.html
@@ -10,7 +10,6 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
var inputs = $("input");
diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html
index fcfb75b6b..fb99e4007 100644
--- a/tests/visual/position/position_flipfit.html
+++ b/tests/visual/position/position_flipfit.html
@@ -10,7 +10,6 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
var inputs = $("input");
diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html
index 71d8f0a3c..2e3b63266 100644
--- a/tests/visual/position/position_margin.html
+++ b/tests/visual/position/position_margin.html
@@ -9,7 +9,6 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
$( "#elem" ).position({
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-16 16:29:11 +0000