aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/dialog/stacking.html62
-rw-r--r--tests/visual/index.html4
-rw-r--r--tests/visual/menu/menu.html321
3 files changed, 217 insertions, 170 deletions
diff --git a/tests/visual/dialog/stacking.html b/tests/visual/dialog/stacking.html
new file mode 100644
index 000000000..dcb7de280
--- /dev/null
+++ b/tests/visual/dialog/stacking.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Dialog Visual Test</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.resizable.js"></script>
+ <script src="../../../ui/jquery.ui.button.js"></script>
+ <script src="../../../ui/jquery.ui.dialog.js"></script>
+
+ <style>
+ body {
+ font-size: 62.5%;
+ }
+ </style>
+ <script>
+ $(function() {
+ var iframeDialog = $( "#dialog-iframe" ).dialog({
+ position: {
+ my: "right-90 center"
+ },
+ height: 400
+ }),
+
+ scrollingDialog = $( "#dialog-scrolling" ).dialog({
+ maxHeight: 200,
+ position: {
+ my: "left+90 center"
+ }
+ }),
+
+ otherDialog = $( "#dialog-other" ).dialog({
+ width: 200,
+ height: 150
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p>
+<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p>
+
+
+<div id="dialog-iframe" title="Dialog that embeds an iframe">
+ <iframe src="animated.html" height="400"></iframe>
+</div>
+
+<div id="dialog-scrolling" title="Dialog with scroll">
+ <p style="height:600px;background:#eee">a bunch of content</p>
+</div>
+
+<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div>
+
+</body>
+</html>
diff --git a/tests/visual/index.html b/tests/visual/index.html
index 730eb4553..bb46137f4 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -33,7 +33,11 @@
<h2>Dialog</h2>
<ul>
+ <li><a href="dialog/animated.html">Animations</a></li>
+ <li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li>
+ <li><a href="dialog/form.html">Forms in dialogs</a></li>
<li><a href="dialog/performance.html">Performance</a></li>
+ <li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
</ul>
<h2>Effects</h2>
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index 3d4e81e92..1c203ef12 100644
--- a/tests/visual/menu/menu.html
+++ b/tests/visual/menu/menu.html
@@ -15,7 +15,7 @@
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
}
- $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
+ $( "#menu1, #menu2, #menu3, .menu4" ).menu({
select: logger
});
@@ -29,6 +29,11 @@
select: logger,
icon: "ui-icon-carat-1-s"
});
+
+ $( "#menu7" ).menu({
+ items: "> :not('.ui-menu-group')",
+ select: logger
+ });
});
</script>
<style>
@@ -44,171 +49,161 @@
<h2>Default inline menu</h2>
<ul id="menu1">
- <li><a href="#">Aberdeen</a></li>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#">Addyston</a></li>
- <li><a href="#">Delphi</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Aberdeen</li>
+ <li>Ada</li>
+ <li>Adamsville</li>
+ <li>Addyston</li>
+ <li>Delphi</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
<h2>Inline with disabled items and submenus</h2>
<ul id="menu2">
- <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#">Addyston</a></li>
- <li>
- <a href="#">Delphi</a>
+ <li class="ui-state-disabled">Aberdeen</li>
+ <li>Ada</li>
+ <li>Adamsville</li>
+ <li>Addyston</li>
+ <li>Delphi
<ul>
- <li class="ui-state-disabled"><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li class="ui-state-disabled">Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li><a href="#">Saarland</a></li>
- <li>
- <a href="#">Salzburg</a>
+ <li>Saarland</li>
+ <li>Salzburg
<ul>
- <li>
- <a href="#">Delphi</a>
+ <li>Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li>
- <a href="#">Delphi</a>
+ <li>Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li><a href="#">Perch</a></li>
+ <li>Perch</li>
</ul>
</li>
- <li class="ui-state-disabled"><a href="#">Amesville</a></li>
+ <li class="ui-state-disabled">Amesville</li>
</ul>
<h2>Menu with icons</h2>
<ul id="menu3">
- <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
- <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
- <li class="ui-state-disabled">
- <a href="#">Delphi</a>
+ <li><span class="ui-icon ui-icon-print"></span>Aberdeen</li>
+ <li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li>
+ <li>Adamsville</li>
+ <li><span class="ui-icon ui-icon-wrench"></span>Addyston</li>
+ <li class="ui-state-disabled">Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li><a href="#">Saarland</a></li>
+ <li>Saarland</li>
<li>
- <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
+ <span class="ui-icon ui-icon-print"></span>Salzburg
<ul>
<li>
- <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a>
+ <span class="ui-icon ui-icon-wrench"></span>Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li>
- <a href="#">Delphi</a>
+ <li>Delphi
<ul>
- <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
- <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
- <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
+ <li><span class="ui-icon ui-icon-wrench"></span>Ada</li>
+ <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
+ <li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li>
</ul>
</li>
- <li><a href="#">Perch</a></li>
+ <li>Perch</li>
</ul>
</li>
</ul>
<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
<ul class="menu4">
- <li><a href="#">Aberdeen</a></li>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#">Addyston</a></li>
- <li><a href="#">Adelphi</a></li>
- <li><a href="#">Adena</a></li>
- <li><a href="#">Adrian</a></li>
- <li><a href="#">Akron</a></li>
- <li><a href="#">Albany</a></li>
- <li><a href="#">Alexandria</a></li>
- <li><a href="#">Alger</a></li>
- <li><a href="#">Alledonia</a></li>
- <li><a href="#">Alliance</a></li>
- <li><a href="#">Alpha</a></li>
- <li><a href="#">Alvada</a></li>
- <li><a href="#">Alvordton</a></li>
- <li><a href="#">Amanda</a></li>
- <li><a href="#">Amelia</a></li>
- <li><a href="#">Amesville</a></li>
- <li><a href="#">Aberdeen</a></li>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#">Addyston</a></li>
- <li><a href="#">Adelphi</a></li>
- <li><a href="#">Adena</a></li>
- <li><a href="#">Adrian</a></li>
- <li><a href="#">Akron</a></li>
- <li><a href="#">Albany</a></li>
- <li><a href="#">Alexandria</a></li>
- <li><a href="#">Alger</a></li>
- <li><a href="#">Alledonia</a></li>
- <li><a href="#">Alliance</a></li>
- <li><a href="#">Alpha</a></li>
- <li><a href="#">Alvada</a></li>
- <li><a href="#">Alvordton</a></li>
- <li><a href="#">Amanda</a></li>
- <li><a href="#">Amelia</a></li>
- <li><a href="#">Amesville</a></li>
+ <li>Aberdeen</li>
+ <li>Ada</li>
+ <li>Adamsville</li>
+ <li>Addyston</li>
+ <li>Adelphi</li>
+ <li>Adena</li>
+ <li>Adrian</li>
+ <li>Akron</li>
+ <li>Albany</li>
+ <li>Alexandria</li>
+ <li>Alger</li>
+ <li>Alledonia</li>
+ <li>Alliance</li>
+ <li>Alpha</li>
+ <li>Alvada</li>
+ <li>Alvordton</li>
+ <li>Amanda</li>
+ <li>Amelia</li>
+ <li>Amesville</li>
+ <li>Aberdeen</li>
+ <li>Ada</li>
+ <li>Adamsville</li>
+ <li>Addyston</li>
+ <li>Adelphi</li>
+ <li>Adena</li>
+ <li>Adrian</li>
+ <li>Akron</li>
+ <li>Albany</li>
+ <li>Alexandria</li>
+ <li>Alger</li>
+ <li>Alledonia</li>
+ <li>Alliance</li>
+ <li>Alpha</li>
+ <li>Alvada</li>
+ <li>Alvordton</li>
+ <li>Amanda</li>
+ <li>Amelia</li>
+ <li>Amesville</li>
</ul>
<h2>Menu with custom markup</h2>
<div id="menu5">
- <blockquote><a href="#">Aberdeen</a></blockquote>
- <blockquote><a href="#">Ada</a></blockquote>
- <blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote>
- <blockquote><a href="#">Addyston</a></blockquote>
- <blockquote>
- <a href="#">Delphi</a>
+ <blockquote>Aberdeen</blockquote>
+ <blockquote>Ada</blockquote>
+ <blockquote class="ui-state-disabled">Adamsville</blockquote>
+ <blockquote>Addyston</blockquote>
+ <blockquote>Delphi
<div>
- <blockquote><a href="#">Ada</a></blockquote>
- <blockquote><a href="#">Saarland</a></blockquote>
- <blockquote><a href="#">Salzburg</a></blockquote>
+ <blockquote>Ada</blockquote>
+ <blockquote>Saarland</blockquote>
+ <blockquote>Salzburg</blockquote>
</div>
</blockquote>
- <blockquote><a href="#">Saarland</a></blockquote>
- <blockquote>
- <a href="#">Salzburg</a>
+ <blockquote>Saarland</blockquote>
+ <blockquote>Salzburg
<div>
- <blockquote>
- <a href="#">Delphi</a>
+ <blockquote>Delphi
<div>
- <blockquote><a href="#">Ada</a></blockquote>
- <blockquote><a href="#">Saarland</a></blockquote>
- <blockquote><a href="#">Salzburg</a></blockquote>
+ <blockquote>Ada</blockquote>
+ <blockquote>Saarland</blockquote>
+ <blockquote>Salzburg</blockquote>
</div>
</blockquote>
- <blockquote>
- <a href="#">Delphi</a>
+ <blockquote>Delphi
<div>
- <blockquote><a href="#">Ada</a></blockquote>
- <blockquote><a href="#">Saarland</a></blockquote>
- <blockquote><a href="#">Salzburg</a></blockquote>
+ <blockquote>Ada</blockquote>
+ <blockquote>Saarland</blockquote>
+ <blockquote>Salzburg</blockquote>
</div>
</blockquote>
- <blockquote><a href="#">Perch</a></blockquote>
+ <blockquote>Perch</blockquote>
</div>
</blockquote>
</div>
@@ -216,93 +211,79 @@
<h2>Menu with custom markup, multi-line items and a custom submenu icon</h2>
<div class="menuElement" id="menu6">
<div class="address-item">
- <a href="#">
- <span class="address-header">John Doe</span>
- <span class="address-content">78 West Main St Apt 3A</span>
- <span class="address-content">Bloomsburg, PA 12345</span>
- </a>
+ <span class="address-header">John Doe</span>
+ <span class="address-content">78 West Main St Apt 3A</span>
+ <span class="address-content">Bloomsburg, PA 12345</span>
</div>
<div class="address-item">
- <a href="#">
- <span class="address-header">Jane Doe</span>
- <span class="address-content">78 West Main St Apt 3A</span>
- <span class="address-content">Bloomsburg, PA 12345</span>
- </a>
+ <span class="address-header">Jane Doe</span>
+ <span class="address-content">78 West Main St Apt 3A</span>
+ <span class="address-content">Bloomsburg, PA 12345</span>
</div>
<div class="address-item ui-state-disabled">
- <a href="#">
- <span class="address-header">James Doe</span>
- <span class="address-content">78 West Main St Apt 3A</span>
- <span class="address-content">Bloomsburg, PA 12345</span>
- </a>
+ <span class="address-header">James Doe</span>
+ <span class="address-content">78 West Main St Apt 3A</span>
+ <span class="address-content">Bloomsburg, PA 12345</span>
</div>
<div class="address-item">
- <a href="#">
- <span class="address-header">Jenny Doe</span>
- <span class="address-content">78 West Main St Apt 3A</span>
- <span class="address-content">Bloomsburg, PA 12345</span>
- </a>
+ <span class="address-header">Jenny Doe</span>
+ <span class="address-content">78 West Main St Apt 3A</span>
+ <span class="address-content">Bloomsburg, PA 12345</span>
</div>
<div class="address-item">
- <a href="#">
- <span class="address-header">John Doe</span>
- <span class="address-content">78 West Main St Apt 3A</span>
- <span class="address-content">Bloomsburg, PA 12345</span>
- </a>
+ <span class="address-header">John Doe</span>
+ <span class="address-content">78 West Main St Apt 3A</span>
+ <span class="address-content">Bloomsburg, PA 12345</span>
<div class="menuElement">
- <div><a href="#">Ada</a></div>
- <div><a href="#">Saarland</a></div>
- <div><a href="#">Salzburg</a></div>
+ <div>Ada</div>
+ <div>Saarland</div>
+ <div>Salzburg</div>
</div>
</div>
</div>
-<h2>Inline with dividers and elements without anchors</h2>
+<h2>Inline with dividers and group labels</h2>
<ul id="menu7">
- <li><strong>Group 1</strong></li>
- <li><a href="#">Aberdeen</a></li>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Adamsville</a></li>
- <li><a href="#">Addyston</a></li>
+ <li class="ui-menu-group"><strong>Group 1</strong></li>
+ <li>Aberdeen</li>
+ <li>Ada</li>
+ <li>Adamsville</li>
+ <li>Addyston</li>
<li></li>
- <li><strong>Group 2</strong></li>
- <li>
- <a href="#">Delphi</a>
+ <li class="ui-menu-group"><strong>Group 2</strong></li>
+ <li>Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li><a href="#">Saarland</a></li>
+ <li>Saarland</li>
<li>---</li>
- <li><strong>Group 3</strong></li>
- <li>
- <a href="#">Salzburg</a>
+ <li class="ui-menu-group"><strong>Group 3</strong></li>
+ <li>Salzburg
<ul>
- <li>
- <a href="#">Delphi</a>
+ <li>Delphi
<ul>
- <li><a href="#">Ada</a></li>
+ <li>Ada</li>
<li> - </li>
- <li><a href="#">Saarland</a></li>
+ <li>Saarland</li>
<li>&mdash;</li>
- <li><a href="#">Salzburg</a></li>
+ <li>Salzburg</li>
<li>&ndash;</li>
</ul>
</li>
- <li>
- <a href="#">Delphi</a>
+ <li>Delphi
<ul>
- <li><a href="#">Ada</a></li>
- <li><a href="#">Saarland</a></li>
- <li><a href="#">Salzburg</a></li>
+ <li>Ada</li>
+ <li>Saarland</li>
+ <li>Salzburg</li>
</ul>
</li>
- <li><a href="#">Perch</a></li>
+ <li>Perch</li>
</ul>
</li>
- <li><a href="#">Amesville</a></li>
+ <li>Amesville</li>
</ul>
<div style="position: absolute; top: 1em; right: 1em;">
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-14 01:30:56 +0000