aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
authorJörn Zaefferer <joern.zaefferer@gmail.com>2011-06-19 14:45:20 +0200
committerJörn Zaefferer <joern.zaefferer@gmail.com>2011-06-19 14:45:20 +0200
commitaa7f8195f8c288dbefcb92064b68cb28064ac64c (patch)
tree333cd184f8a830c1b588e3d3d0368c134648a3b6 /tests/visual
parent391282a9aeb4e5bb6ba6655d7f1d5d125f93155a (diff)
parentfb210ae1ec16cefb1e4d4dfaf7d55499cac53ab8 (diff)
downloadjquery-ui-aa7f8195f8c288dbefcb92064b68cb28064ac64c.tar.gz
jquery-ui-aa7f8195f8c288dbefcb92064b68cb28064ac64c.zip
Merge branch 'master' into widget-delegation
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/effects/effects.all.css (renamed from tests/visual/effects.all.css)1
-rw-r--r--tests/visual/effects/effects.all.html (renamed from tests/visual/effects.all.html)38
-rw-r--r--tests/visual/effects/effects.all.js (renamed from tests/visual/effects.all.js)0
-rw-r--r--tests/visual/effects/effects.scale.html159
-rw-r--r--tests/visual/position/position.html2
-rw-r--r--tests/visual/position/position_within.html189
6 files changed, 369 insertions, 20 deletions
diff --git a/tests/visual/effects.all.css b/tests/visual/effects/effects.all.css
index d2ed94026..1d531b026 100644
--- a/tests/visual/effects.all.css
+++ b/tests/visual/effects/effects.all.css
@@ -5,6 +5,7 @@ body,html {
font-size: 12px;
font-family: Arial;
background: #191919;
+ color: #fff;
}
body { margin: 1em; }
diff --git a/tests/visual/effects.all.html b/tests/visual/effects/effects.all.html
index fed35de8a..a2f8f62ef 100644
--- a/tests/visual/effects.all.html
+++ b/tests/visual/effects/effects.all.html
@@ -1,25 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
- <script type="text/javascript" src="effects.all.js"></script>
+ <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <script src="../../../jquery-1.5.1.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.blind.js"></script>
+ <script src="../../../ui/jquery.effects.bounce.js"></script>
+ <script src="../../../ui/jquery.effects.clip.js"></script>
+ <script src="../../../ui/jquery.effects.drop.js"></script>
+ <script src="../../../ui/jquery.effects.explode.js"></script>
+ <script src="../../../ui/jquery.effects.fade.js"></script>
+ <script src="../../../ui/jquery.effects.fold.js"></script>
+ <script src="../../../ui/jquery.effects.highlight.js"></script>
+ <script src="../../../ui/jquery.effects.pulsate.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script src="../../../ui/jquery.effects.shake.js"></script>
+ <script src="../../../ui/jquery.effects.slide.js"></script>
+ <script src="../../../ui/jquery.effects.transfer.js"></script>
+ <script src="effects.all.js"></script>
</head>
<body>
diff --git a/tests/visual/effects.all.js b/tests/visual/effects/effects.all.js
index a28c41a89..a28c41a89 100644
--- a/tests/visual/effects.all.js
+++ b/tests/visual/effects/effects.all.js
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 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects Test Suite</title>
+ <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <script src="../../../jquery-1.5.1.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script src="effects.all.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ jQuery(function( $ ) {
+ var test = $( "#testBox" ),
+ opts = $( ".arg" ),
+ optsRev = $( opts.get().reverse() ),
+ doer = $( "#doAnim" ),
+ current = $( "#current" ),
+ cleanStyle = test[0].style,
+ total = 1;
+
+ opts.each(function() {
+ total *= this.options.length;
+ });
+
+ opts.change( doAnim );
+ doer.click( doAnim );
+ $( "#cyclePrev" ).click(function() {
+ cycle( -1 );
+ });
+ $( "#cycleNext" ).click(function() {
+ cycle( 1 );
+ });
+
+ function cycle( direction ) {
+ optsRev.each(function() {
+ var cur = this.selectedIndex,
+ next = cur + direction,
+ len = this.options.length;
+
+ this.selectedIndex = ( next + len ) % len;
+
+ if ( ( next+len ) % len === next ) return false;
+ });
+ doAnim();
+ }
+
+
+ function doAnim() {
+ var cur = 0;
+ opts.each(function() {
+ cur *= this.options.length
+ cur += this.selectedIndex;
+ });
+ cur++;
+ current.text( "Configuration: " + cur + " of " + total );
+ run.apply(test, opts.map(function() {
+ return $(this).val();
+ }).get());
+ }
+
+ function run( position, v, h, vo, ho ) {
+ var el = this,
+ style = el[0].style,
+ effect = {
+ effect: "scale",
+ mode: "effect",
+ percent: 200,
+ origin: [ vo, ho ],
+ duration: 500
+ };
+ el.stop(true, true);
+ if ( typeof style === "object" ) {
+ style.cssText = "";
+ } else {
+ el[0].style = "";
+ }
+ el.css( "position", position )
+ .css( h, 5 )
+ .css( v, 5 )
+ .delay( 100 )
+ .effect( effect );
+ }
+ });
+ </script>
+ <style type="text/css">
+ #testArea {
+/* border: 5px dashed #777;*/
+ width: 200px;
+ height: 200px;
+ position: relative;
+ }
+ #testBox {
+ width: 50px;
+ height: 50px;
+ background-color: #bada55;
+ color: black;
+ border: 10px solid #fff;
+ margin: 10px;
+ padding: 10px;
+ }
+ label {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ z-index: 300;
+ left: 50%;
+ top: 50%;
+ margin-left: -200px;
+ width: 400px;
+ opacity: 0.8;
+ }
+ </style>
+</head>
+<body>
+ <div id="testArea">
+ <div id="testBox">
+ </div>
+ </div>
+ <div id="controls">
+ <label for="pos">Positioning
+ <select id="pos" class="arg">
+ <option value="absolute">absolute</option>
+ <option value="relative">relative</option>
+ <option value="fixed">fixed</option>
+ </select>
+ </label>
+ <label for="vertPos">Vertical Positioning
+ <select id="vertPos" class="arg">
+ <option value="top">top</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizPos">Horizontal Positioning
+ <select id="horizPos" class="arg">
+ <option value="left">left</option>
+ <option value="right">right</option>
+ </select>
+ </label>
+ <label for="vertOrigin">Vertical Origin
+ <select id="vertOrigin" class="arg">
+ <option value="top">top</option>
+ <option value="middle">middle</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizOrigin">Horizontal Origin
+ <select id="horizOrigin" class="arg">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right">right</option>
+ </select>
+ </label><br />
+ <label id="current">jQuery UI Scale Animation Test</label>
+ <button id="cyclePrev">Back</button>
+ <button id="doAnim">Run Animation</button>
+ <button id="cycleNext">Forward</button>
+ </div>
+</body> \ No newline at end of file
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 @@
<style>
input, .ui-menu { position: absolute; }
.ui-menu { width: 200px; }
- html, body { width: 99%; height: 99% }
+ html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
</style>
</head>
diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
new file mode 100644
index 000000000..f120a4b47
--- /dev/null
+++ b/tests/visual/position/position_within.html
@@ -0,0 +1,189 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Position Visual Test: Containing Element</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.5.1.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.mouse.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+
+ <style>
+ html, body {
+ height:100%;
+ width:100%;
+ margin:0;
+ /* force scroll bar*/
+ min-height:800px;
+ min-width:800px;
+
+ /* IE6 needs this */
+ text-align:center;
+ }
+ .demo-description {
+ text-align:center;
+ padding:1.5em;
+ }
+ .demo-container {
+ background:#aaa;
+ width:80%;
+ height:80%;
+
+ text-align:left;
+ margin:0 auto;
+ position:relative;
+ padding:10px;
+ }
+ .demo {
+ background:#eee;
+ overflow:hidden;
+ position:relative;
+ height:100%;
+ /* IE6 needs this */
+ width:100%;
+ }
+ #parent {
+ width: 60%;
+ margin: 10px auto;
+ padding: 5px;
+ border: 1px solid #777;
+ background-color: #fbca93;
+ text-align: center;
+ cursor:move;
+ }
+ .positionable {
+ width: 75px;
+ height: 75px;
+ position: absolute;
+ display: block;
+ right: 0;
+ bottom: 0;
+ background-color: #bcd5e6;
+ text-align: center;
+ border:solid 2px #555;
+ cursor:move;
+ }
+ select, input {
+ margin-left: 15px;
+ }
+ </style>
+ <script>
+ $(function() {
+ function position( using ) {
+ $( ".positionable" ).position({
+ of: $( "#parent" ),
+ my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+ at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+ offset: $( "#offset" ).val(),
+ using: using,
+ within: $( ".demo" ),
+ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+ });
+ }
+ $( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
+
+ $( ".positionable" ).css( "opacity", 0.5 );
+
+ $( ":input" ).bind( "click keyup change", function() { position(); } );
+
+ $( "#parent" ).draggable({
+ drag: function() { position(); }
+ });
+
+ $( ".positionable" ).draggable({
+ drag: function( event, ui ) {
+ // reset offset before calculating it
+ $( "#offset" ).val( "0" );
+ position(function( result ) {
+ 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();
+ });
+ }
+ });
+
+ position();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo-description">
+ Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
+ <br/>Drag around the parent element to see collision detection in action.
+</div><!-- End demo-description -->
+
+<div class="demo-container">
+<div class="demo">
+
+ <div id="parent">
+ <p>This is the position parent element.</p>
+ </div>
+
+ <div class="positionable">
+ <p>to position</p>
+ </div>
+
+ <div class="positionable" style="width:120px; height: 40px;">
+ <p>to position 2</p>
+ </div>
+
+ <div style="padding: 20px; margin-top: 75px;">
+ position...
+ <div style="padding-bottom: 20px;">
+ <b>my:</b>
+ <select id="my_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right" selected="selected">right</option>
+ </select>
+ <select id="my_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>at:</b>
+ <select id="at_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right" selected="selected">right</option>
+ </select>
+ <select id="at_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>offset:</b>
+ <input id="offset" type="text" size="15"/>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>collision:</b>
+ <select id="collision_horizontal">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="none">none</option>
+ </select>
+ <select id="collision_vertical">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="none">none</option>
+ </select>
+ </div>
+ </div>
+
+</div><!-- End demo -->
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-17 13:30:14 +0000